JavaScript konsolunu kullanarak iş akışınızı nasıl iyileştirebilirsiniz?

Bir web geliştiricisi olarak, kodunuzda hata ayıklama ihtiyacını çok iyi biliyorsunuz. Genellikle günlükler için ve bazı durumlarda bunları biçimlendirmek ve / veya görüntülemek için harici kitaplıklar kullanırız, ancak tarayıcılarımızın konsolu düşündüğümüzden çok daha güçlüdür.

Konsolu düşündüğümüzde aklımıza gelen ilk şey ve console.logdeğil mi? Ancak hayal ettiğimizden çok daha fazla yöntem var. Şimdi konsolu en iyi şekilde nasıl kullanacağımızı göreceğiz ve bu yöntemleri daha okunaklı hale getirmek için size bazı ipuçları vereceğim

Konsol nedir?

JavaScript konsolu, modern tarayıcılarda, kabuk benzeri bir arayüzde kullanıma hazır geliştirme araçlarıyla birlikte gelen yerleşik bir özelliktir. Bir geliştiricinin şunları yapmasına olanak tanır:

  • Bir web sayfasında oluşan hataların ve uyarıların günlüğünü görüntüleyin.
  • JavaScript komutlarını kullanarak web sayfasıyla etkileşim kurun.
  • Uygulamalarda hata ayıklayın ve DOM'u doğrudan tarayıcıda gezinin.
  • Ağ etkinliğini inceleyin ve analiz edin

Temel olarak, tarayıcınızın içinden JavaScript yazmanıza, yönetmenize ve izlemenize olanak tanır.

Console.log, Console.error, Console.warn ve Console.info

Bunlar muhtemelen en çok kullanılan yöntemlerdir. Bu yöntemlere birden fazla parametre aktarabilirsiniz. Her parametre değerlendirilir ve boşlukla ayrılmış bir dizede birleştirilir, ancak nesneler veya diziler söz konusu olduğunda özellikleri arasında gezinebilirsiniz.

Console.group

Bu yöntem, daraltılabilen bir grup altında bir dizi console.log (aynı zamanda hata bilgisi vb.) Gruplamanıza olanak tanır. Sözdizimi gerçekten çok basit: console.loggruplamak istediğimiz her şeyi a'dan önce girin console.group()(veya console.groupCollapsed()varsayılan olarak kapatılmasını istiyorsak). Ardından console.groupEnd()grubu kapatmak için sonuna bir ekleyin .

Sonuçlar şöyle görünecek:

Console.table

console.tableHayatımın değiştiğini keşfettiğimden beri . JSON veya çok büyük JSON dizilerini bir içinde görüntülemek console.logkorkunç bir deneyimdir. console.tableBiz sütunları isim ve parametre olarak bunları geçebilir güzel tablonun içindeki bu yapıları görselleştirmek için bize izin verir.

Sonuç harika ve hata ayıklamada çok kullanışlıdır:

Console.count, Console.time ve Console.timeEnd

Bu üç yöntem, hata ayıklaması gereken her geliştirici için İsviçre çakısıdır. console.countSayımları ve çıkışlar sayısı count()aynı satırda ve aynı etiket ile çağrılan edilmiştir. console.timeBir giriş parametresi olarak belirtilen bir ada sahip bir zamanlayıcı başlatır ve belirli bir sayfadaki 10.000 eşzamanlı zamanlayıcı kadar çalışabilir. Başladıktan sonra console.timeEnd, zamanlayıcıyı durdurmak ve geçen süreyi Konsola yazdırmak için bir çağrı kullanırız .

Çıktı şöyle görünecek:

Console.trace ve Console.assert

Bu yöntemler, çağrıldığı noktadan basitçe bir yığın izi yazdırır. Bir JS kitaplığı oluşturduğunuzu ve kullanıcıyı hatanın nerede oluştuğunu bildirmek istediğinizi düşünün. Bu durumda bu yöntemler çok faydalı olabilir. console.assertGibidir console.traceama geçti koşul geçemedi yalnızca yazdırılır.

Gördüğümüz gibi, çıktı tam olarak React'in (veya başka bir kitaplığın) bir istisna oluşturduğumuzda bize göstereceği şeydir.

Tüm Konsollar silinsin mi?

Konsol kullanmak bizi çoğu zaman onları ortadan kaldırmaya zorluyor. Veya bazen üretim yapısını unuturuz (ve bunları yalnızca günler ve günler sonra yanlışlıkla fark ederiz). Tabi kimseye konsolları ihtiyaç duyulmayan yerlerde kötüye kullanmasını önermiyorum (değişiklik giriş tutamacındaki konsol çalıştığını gördükten sonra silinebilir). Hata ayıklamanıza yardımcı olması için hata günlüklerini veya izleme günlüklerini geliştirme modunda bırakmalısınız. Webpack'i hem işte hem de kendi projelerimde çok kullanıyorum. Bu araç, uglifyjs-webpack-eklentisini kullanarak üretim yapısından kalmasını istemediğiniz tüm konsolları (türe göre) silmenizi sağlar.

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')var debug = process.env.NODE_ENV !== "production";.....optimization: { minimizer: !debug ? [ new UglifyJsPlugin({ // Compression specific options uglifyOptions: { // Eliminate comments comments: false, compress: { // remove warnings warnings: false, // Drop console statements drop_console: true }, } })] : []}

Yapılandırma gerçekten önemsiz ve işi basitleştiriyor, bu yüzden konsolla eğlenin (ama kötüye kullanmayın!)

Makaleyi beğendiyseniz lütfen alkışlayın ve beni takip edin :)

Thx ve bizi izlemeye devam edin?

Son haberlerimi ve ipuçlarımı Facebook'ta takip edin