Mesajları stratejik olarak konsola kaydetme – JSManifest

Mesajları stratejik olarak konsola kaydetme – JSManifest

Geliştiriciler genellikle her türlü nedenden dolayı mesajları konsola kaydeder. En yaygın neden, uygulamalarının bekledikleri gibi çalıştığından emin olmalarına yardımcı olmak için yardımcı çıktılar sağlamasıdır. Bu gönderi, stratejik kullanımlar için birkaç örnek gösterecektir. konsol.log ve konsol.hatası.

konsol.log

Mesajları konsola kaydetmek için en yaygın kullanılan yöntem, konsol.log. Basitliği, onları geliştirme akışınızda kullanmak için hayatı çok daha iyi hale getirir (bence). Console.log bir değer alır (geçeceğiniz zamanın çoğu sicimancak nesneler ve sayılar gibi diğer türleri bağımsız değişken olarak iletebilir ve konsolda oturum açmak için kullanabilirsiniz.

const logSomething = (str) => {
  console.log(str)
}

logSomething('this is going to the console')

Sonuç:

Bu konsol mesajlarını daha kullanışlı hale getirmek için kullanışlı bir küçük numara, çıktılarını konsolda renklendirmektir. Önekli bir dize ileterek %c ilk argüman olarak, CSS değerleri için bir yer tutucu görevi görecek ve sağladığınız stilleri ikinci argümana otomatik olarak uygulayacaktır. stiller bağımsız değişkeni noktalı virgülle ayrılmış bir dizedir “;” görüntülenecek mesaja birden çok stil uygulamak için kullanılır.

Örneğin, bir http isteğinden 3 saniye sonra işleviniz zaman aşımına uğradığında “Üç saniye geçti” mesajını turuncu renkte günlüğe kaydederseniz, şöyle bir şey yapabilirsiniz:


const message =
  '%cThis message will turn orange when the timeout gets to zero after 3 seconds'
setTimeout(() => {
  const styles = 'color:orange;'
  console.log(message, styles)
}, 3000)

Çıktı:

günlük çıkışı turuncu

Şimdi, bunun konsol mesajlarının güzel görünmesini sağlamak dışında ne zaman yararlı olacağını merak ediyorsanız, uygulamanızın hangi bölümünün ne yaptığını, hangi kod satırına dikkat etmenin önemli olabileceğini, hangi satıra dikkat etmeniz gerektiğini özelleştirmek ve ayırt etmek için renkleri kullanabilirsiniz. kod anormal bir davranış sergiliyor — liste sonsuz.

Bir uygulama üzerinde çalıştığınızı ve gelecekteki istekler için üstbilgiler ayarlamanız gerektiğini varsayalım. İstek nesneleri oluşturmak için kullanabileceğiniz bir başlık nesnesini yöneten bir yardımcı işlev oluşturdunuz.

Bu yardımcı işlevi adlandırmaya karar verdiniz makeBaşlıklar ve 3 yöntem döndürür:

Yöntem Tanım
almak Başlıklar nesnesinden bir anahtar/değer çifti alır
Ayarlamak Başlıklar nesnesine bir anahtar/değer ayarlar
dönüş Başlıkları Tüm başlıklar nesnesini döndürür

Ve koddaki yapıcı:

const makeHeaders = function(options) {
  const headers = {}

  return {
    get: function(key) {
      return headers[key] || null
    },
    set: function(key, value) {
      if (key === undefined) return
      if (value === null) {
        console.warn(
          `WARNING! You tried to set "${key}" to headers but the value was null or undefined. The operation was skipped.`,
        )
        return
      }
      headers[key] = value
    },
    returnHeaders: function() {
      return headers
    },
  }
}

Şimdi uygulamanızda, onu şu şekilde kullanan bir kodunuz olabilir:

const headers = makeHeaders()
headers.set('Content-Type', 'application/json')

Örnek kullanım durumumuz için bir İleti istemek https://something.com/v1/api/user/ (bu gerçek bir uç nokta değildir) gelecekteki API çağrılarından verilere erişebilmemiz için kendimizi doğrulamak için. Temel bir kimlik doğrulama hizmeti genellikle bir Kullanıcı adı ve şifre bir gönderi isteğinde gövdeye parametreler olarak:

const url = 'https://someapi.com'
const method = 'post'
const data = {
  username: 'myUsername',
  password: 'myPassword123',
}

Ardından, API isteği için diğer seçeneklerle birlikte bunu istek nesnenize uygularsınız. Bu örnek için kullanacağımız aksiyolar:

const callApi = async (params) => {
  try {
    const response = await axios(params)
    if (response.data) {
      console.log(response.data) 
    }
    return response.data
  } catch (error) {
    
  }
}

callApi({ url, method, data, headers })
  .then(({ token }) => console.log(token))
  .catch((error) => console.error(error))

Kimlik doğrulama hizmeti, kimlik bilgilerini doğrulayacak ve belirtecin oluşturulmasından sonra varsayılan 1 saat sona erme tarihi olan süresi dolan bir belirteç döndürecektir. Her şey yolunda, ancak isteğe bağlı bir üçüncü parametreyi desteklediklerini söyleyelim, expires_in. Milisaniye cinsinden bir sayı girilerek varsayılan sona erme tarihi geçersiz kılınabilir:

const headers = makeHeaders()
headers.set('Content-Type', 'application/json')

const url = 'https://someapi.com'
const method = 'post'

const expiringMinutesToMs = (mins) => {
  return mins * 60000
}

const data = {
  username: 'myUsername',
  password: 'myPassword123',
  expires_in: expiringMinutesToMs(75), 
}

const callApi = async (params) => {
  try {
    const response = await axios(params)
    if (response.data) {
      console.log(response.data) 
    }
    return response.data
  } catch (error) {
    
  }
}

callApi({ url, method, data, headers })
  .then(({ token }) => console.log(token))
  .catch((error) => console.error(error))

Bir sayı iletmeye çalışırsak minutesToMs ve bir aldı undefined değer, düz bir ole ile kaydedebiliriz console.log('some message here')ancak farklı nedenlerle konsola gönderilen birkaç mesaj varsa, konsola çok fazla çıktı varsa, dağınık ve okunması zor görünebilir.

Renkleri dahil ederek, konsoldan gelen önemli mesajları ayırt edebilir ve daha hızlı dikkat çekebilirsiniz. Bu, geliştirme sürecinizi daha hızlı ve daha eğlenceli hale getirerek geliştirme akışınızın etkinliğini artırır!

const headers = makeHeaders()
headers.set('Content-Type', 'application/json')

const url = 'https://someapi.com'
const method = 'post'

const expiringMinutesToMs = (mins) => {
  if (mins === undefined) {
    const msg =
      'WARNING! You tried to pass in "mins" to the "expiringMinutesToMs" call but the value was undefined. It was defaulted to 60 minutes (1 hour) instead'
    console.log(`%c${msg}`, 'color:#FF4500')
  }
  return mins * 60000
}

let expiresInMinutes

const data = {
  username: 'myUsername',
  password: 'myPassword123',
  expires_in: expiringMinutesToMs(expiresInMinutes),
}

const callApi = async (params) => {
  try {
    const response = await axios(params)
    if (response.data) {
      console.log(response.data) 
    }
    return response.data
  } catch (error) {
    
  }
}

callApi({ url, method, data, headers })
  .then(({ token }) => console.log(token))
  .catch((error) => console.error(error))

renkli konsol çıktısı

konsol.hatası

kullanma console.error hataları konsola yazdırır. Bu, kendisine ilettiğiniz her şeyi hata olarak biçimlendirmeye çalışır.

konsol mesajlarını stratejik olarak günlüğe kaydetme

sevdiğim şey console.error hataya yol açan önceki çağrılara gitmenize izin veren bir yığın izlemesi içermesidir. Bunu, hataları konsola kaydetmek dışında kullanmazdım, aksi takdirde kodunuzu düzenleyen diğer geliştiriciler için yanıltıcı olabilir.

Ve bu, bu yazının sonunu tamamlıyor. Gerisini oynamanız için size bırakıyorum!

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.