Home-theater-designers
Web tarayıcı konsolu, ön uç uygulamalarda hata ayıklamak için en yaygın kullanılan araçlardan biridir. Konsol API'si, geliştiricilere hataları çözme ve mesajları kaydetme olanağı sağlar.
konsol.log() Konsol API'sinde muhtemelen en sık kullanılan yöntemdir, ancak iş akışınızda kullanabileceğiniz başka yöntemler de vardır. Bu kılavuz, hata ayıklama iş akışınızı geliştirmek için kullanabileceğiniz farklı web tarayıcı konsolu yöntemlerini gösterir.
Loglama Neden Önemlidir?
Web tarayıcı konsolunda oturum açmak, ön uç veya JavaScript tabanlı uygulamalarda hata ayıklamanın en iyi yöntemlerinden biridir.
İlgili: Öğrenmeye Değer 6 JavaScript Çerçevesi
Çoğu modern web tarayıcısı, Konsol API'sini destekleyerek geliştiricilerin kullanımına hazır hale getirir. Konsol nesnesi, tarayıcının hata ayıklama konsoluna erişim sağlamaktan sorumludur. Uygulama, tarayıcılar arasında farklı olabilir, ancak çoğu yöntem tüm modern tarayıcılarda çalışır.
Uç : Tarayıcı konsolunuz bu kılavuzda açıklanan tüm kodları çalıştırabilir. basmak F12 Tarayıcı geliştiricilerin araçlarını Chrome veya Firefox'ta açmak için klavyenizdeki
Dize Mesajlarını Günlüğe Kaydetme
En yaygın konsol yöntemlerinden biri konsol.log() . Web konsoluna basitçe bir dize mesajı veya bir değer verir. Basit değerler veya dize mesajları için, konsol.log() yöntemi muhtemelen kullanmak için en iyi seçenektir.
ip adresinizi nasıl taklit edersiniz
çıktı almak için Selam Dünya mesajı, aşağıdakileri kullanabilirsiniz.
console.log(`Hello World`); Diğer bir özel özellik konsol.log() yöntem, DOM öğelerinin çıktısını veya bir web sitesinin bir bölümünün yapısını yazdırma yeteneğidir, örneğin gövde öğesinin yapısını ve içindeki her şeyi aşağıdakileri kullanır.
console.log(document.body) Çıktı, bir HTML ağacı olarak DOM öğelerinin bir koleksiyonudur.
Etkileşimli JavaScript Nesnelerini Günlüğe Kaydetme
NS konsol.dir () yöntemi, JavaScript nesnelerinin etkileşimli özelliklerini günlüğe kaydetmek için kullanılır. Örneğin, bir web sayfasındaki DOM öğelerini görüntülemek için kullanabilirsiniz.
Tipik çıktı konsol.dir () yöntemi, belirtilen JavaScript Nesnesinin JSON biçimindeki tüm özelliklerinden oluşur. Bir HTML sayfasının gövdesindeki tüm öğelerin özelliklerini yazdırmak için aşağıdaki yöntemi kullanın:
console.dir(document.body) İfadeleri Değerlendirmek
Birim testinden onaylama yöntemlerine aşina olabilirsiniz - peki konsol.assert() yöntem benzer şekilde çalışır. Kullan konsol.assert() Bir ifadeyi veya durumu değerlendirme yöntemi.
Assert yöntemi başarısız olduğunda, konsol bir hata mesajı yazdırır; aksi halde hiçbir şey yazdırmaz. Bir kişinin yaşının 18'den büyük olup olmadığını değerlendirmek için aşağıdaki kodu kullanın:
let ageLimit = 18;
let yourAge = 12;
const assertFailMessage = 'You have to be older than 18 years of age';
console.assert( yourAge > ageLimit, assertFailMessage); Yukarıdaki onaylama başarısız olur ve buna göre bir hata mesajı yazdırılır.
Tablolardaki Verileri Günlüğe Kaydetme
Kullan konsol.tablo() verileri tablo biçiminde görüntüleme yöntemi. Tablo biçiminde gösterilecek iyi adaylar arasında diziler veya nesne verileri bulunur.
Not : Firefox gibi bazı tarayıcıların maksimum 1.000 satır sınırı vardır. konsol.tablo() yöntem.
Aşağıdaki araba nesneleri dizisine sahip olduğunuzu varsayarsak:
let cars = [
{'color':'purple', 'type':'minivan', 'registration': new Date('2021-04-05')},
{'color': 'red', 'type':'minivan', 'registration': new Date ('2021-06-10')}
] Aşağıdaki yöntemi kullanarak yukarıdaki diziyi bir tabloda görüntüleyebilirsiniz:
console.table(cars); Mesajları Kategoriye Göre Günlüğe Kaydetme
Web tarayıcı konsolu mesajları temel olarak üç gruba ayrılır: hata, uyarı ve bilgi.
Hatalar
Hata mesajlarını konsola özel olarak yazdırmak için konsol.hata() yöntemi, hatayla ilgili mesajlar kırmızı yazı tipiyle görüntülenir.
console.error('error message'); Uyarılar
Uyarıları yazdırmak için aşağıdakileri kullanın. Çoğu senaryoda olduğu gibi, uyarı mesajları turuncu renkte görüntülenir:
console.warn('warning message');Bilgi
Genel bilgileri konsola yazdırmak için, konsol.bilgi () yöntem:
console.info('general info message') Düzgün bir şekilde kategorize edildiklerinde tarayıcı konsolunda iletileri filtrelemek veya bulmak kolaydır.
İzleme Programı Akışı
Kullan konsol.trace() program akışının veya yürütmesinin yığın izini yazdırma yöntemi. Bu, hata ayıklama için çok kullanışlı bir özelliktir, çünkü programınızdaki işlevlerin yürütüldüğü sırayı yazdırır.
Görmek için konsol.trace() eylem yöntemi, üç işlev oluşturabilir (aşağıya göre) ve işlevlerden birine bir yığın izi yerleştirebilirsiniz.
function functionOne(){
functionTwo()
}
function functionTwo(){
functionThree()
}
function functionThree(){
console.trace()
}Tarayıcı konsolunuzda, arayın veya tetikleyin işlevBir() ve bir yığın olduğu için Son Giren İlk Çıkarma Sırasında (LIFO) yazdırılan işlev çağrılarının yığın izini alırsınız.
Zamanlama Programı Yürütme
Programınızda bir işlemin ne kadar süreceğini belirlemek için, konsol.zaman() yöntem. konsol.zaman() genellikle ile birlikte kullanılır konsol.zamanBitiş () ikincisinin zamanlayıcıyı sonlandırmak için kullanıldığı yöntem.
Zamanlayıcılarınızı doğru şekilde etiketlemenin önemini vurgulayarak, web sayfası başına 10.000'e kadar zamanlayıcı çalıştırabilirsiniz.
Bir for döngüsünün 1'den 50.000'e kadar olan sayıları ne kadar sürede geçeceğini belirlemek için zamanlayıcıyı aşağıdaki gibi kullanabilirsiniz.
console.time('loop timer 2');
for(i=1; i<50001; i++){
}
console.timeEnd('loop timer 2');
sayma
NS konsol.sayısı() metot, bir programda bir fonksiyonun veya bir kod parçasının kaç defa çağrıldığını takip etmek için kullanılır. Örneğin, bir for döngüsünün kaç kez çalıştırıldığını aşağıdaki gibi takip edebiliriz:
for(i=0; i<4; i++ ){
console.count();
}Günlük Mesajlarını Gruplama
Tıpkı zamanlayıcı yönteminde olduğu gibi, konsol.grup () , ve konsol.grupEnd () yöntemler genellikle çiftler halinde kullanılır.
Grup yöntemi, günlük mesajlarınızı daha iyi düzenlemenize yardımcı olur. Örneğin aşağıdaki gibi etiket uyarıları ile bir grup uyarı mesajı oluşturabiliriz.
console.group('warnings')
console.warn('another warning');
console.warn('This is a warning')
console.groupEnd()Uyarı grubu içindeki iki mesaj, aşağıdaki çıktıda görüldüğü gibi görsel olarak kategorilere ayrılmıştır.
Konsolu Temizleme
Son olarak, tarayıcı konsolunuzda günlük mesajlarını temizlemenin birkaç yolu vardır.
Kullan konsol.clear() yöntem aşağıdaki gibidir.
console.clear() Tarayıcı klavye kısayollarını kullanarak tarayıcı konsolunu da temizleyebilirsiniz.
Google Chrome : Ctrl + L
Firefox : Ctrl + Üst Karakter + L
Tarayıcı Konsolunu Dolu Dolu Kullanmak
Bu kılavuz, ön uç uygulamalarda hata ayıklamanıza yardımcı olacak farklı web tarayıcı konsolu yöntemlerinden bazılarını size göstermiştir. Konsol API'si çok hafiftir, öğrenmesi kolaydır ve çoğu modern tarayıcıda yaygın olarak desteklenir.
sabit hat ne kadar
Bir sonraki projenizden bir CAPTCHA doğrulaması yapın ve yeni hata ayıklama becerilerinizi test edin!
Paylaş Paylaş Cıvıldamak E-posta HTML, CSS ve JavaScript Kullanarak CAPTCHA Doğrulama Formu OluşturunCAPTCHA doğrulaması ile web sitelerinizi güvenli hale getirin.
Sonrakini Oku İlgili konular- Programlama
- Web Geliştirme
- JavaScript
Mwiza, mesleğe göre yazılım geliştirir ve Linux ve ön uç programlama üzerine kapsamlı bir şekilde yazar. İlgi alanlarından bazıları tarih, ekonomi, politika ve işletme mimarisidir.
Mwiza Kumwenda'dan Daha FazlaHaber bültenimize abone ol
Teknik ipuçları, incelemeler, ücretsiz e-kitaplar ve özel fırsatlar için bültenimize katılın!
Abone olmak için buraya tıklayın