Bu etkileşimli eğitim, Chrome Geliştirici Araçları Konsolu'nda mesajları nasıl günlüğe kaydedeceğinizi ve filtreleyeceğinizi gösterir.
Bu eğitimin sırayla tamamlanması amaçlanmıştır. Bir sayfaya etkileşim özelliği eklemek için JavaScript'in nasıl kullanılacağı gibi web geliştirmenin temel ilkelerini anladığınız varsayılır.
Demoyu ve Geliştirici Araçları'nı ayarlayın
Bu eğitim, demoyu açıp tüm iş akışlarını kendiniz deneyebilmeniz için tasarlanmıştır. Fiziksel olarak izlediğinizde iş akışlarını daha sonra hatırlama olasılığınız artar.
- Demoyu açın.
İsteğe bağlı: Demoyu ayrı bir pencereye taşıyın. Bu örnekte eğitim solda, demo ise sağdadır.
Demoya odaklanıp ardından Geliştirici Araçları'nı açmak için Control+Üst Karakter+J veya Command+Option+J (Mac) tuşlarına basın. Geliştirici Araçları varsayılan olarak demonun sağ tarafında açılır.
İsteğe bağlı: Geliştirici Araçları'nı pencerenin en altına yerleştirin veya ayrı bir pencereye çıkarın.
Demonun alt kısmına yerleştirilmiş Geliştirici Araçları:
Geliştirici Araçları ayrı bir pencerede çıkarıldı:
JavaScript'ten günlüğe kaydedilen mesajları görüntüleme
Konsol'da gördüğünüz çoğu mesaj, sayfanın JavaScript'ini yazan web geliştiricilerinden gelir. Bu bölümün amacı, Konsol'da görebileceğiniz farklı mesaj türlerini size tanıtmak ve her mesaj türünü kendi JavaScript'inizle kendiniz nasıl günlüğe kaydedebileceğinizi açıklamaktır.
Demoda Log Info (Günlük Bilgileri) düğmesini tıklayın.
Hello, Console!
, Console'a kaydedilir.Konsol'da
Hello, Console!
mesajının yanında bulunan log.js:2 öğesini tıklayın. Kaynaklar paneli açılır ve mesajın Play Console'da günlüğe kaydedilmesine neden olan kod satırını vurgular.Mesaj, sayfanın JavaScript'i
console.log('Hello, Console!')
adını verdiğinde günlüğe kaydedildi.Aşağıdaki iş akışlarından birini kullanarak Konsol'a geri dönün:
- Konsol sekmesini tıklayın.
- Konsol odaklanana kadar Control+[ veya Command+[ (Mac) tuşlarına basın.
- Komut Menüsü'nü açın,
Console
yazmaya başlayın, Konsol Panelini Göster komutunu seçin ve ardından Enter'a basın.
Demoda Log Warning (Uyarı Günlüğe Kaydet) düğmesini tıklayın.
Abandon Hope All Ye Who Enter
, Console'a kaydedilir.Bu şekilde biçimlendirilmiş iletiler uyarıdır.
İsteğe bağlı: Mesajın bu şekilde biçimlendirilmesine neden olan kodu görüntülemek için log.js:12'yi tıklayın ve işiniz bittiğinde Konsol'a geri dönün. Bunu, bir iletinin belirli bir şekilde günlüğe kaydedilmesini sağlayan kodu görmek istediğinizde yapın.
Abandon Hope All Ye Who Enter
öğesinin önündeki Genişlet simgesini tıklayın. Geliştirici Araçları, çağrıdan önce gelen yığın izlemeyi gösterir.Yığın izleme,
logWarning
adlı bir işlevin, buna karşılıkquoteDante
adlı bir işlevin çağrıldığını söylüyor. Yani ilk gerçekleşen çağrı, yığın izlemenin (stack trace) en altında yer alır. İstediğiniz zamanconsole.trace()
yöntemini çağırarak yığın izlemeleri günlüğe kaydedebilirsiniz.Günlük Hatası'nı tıklayın. Şu hata mesajı günlüğe kaydedilir:
I'm sorry, Dave. I'm afraid I can't do that.
Günlük Tablosu'nu tıklayın. Ünlü sanatçılarla ilgili bir tablo Konsol'da günlüğe kaydedilir.
birthday
sütununun yalnızca bir satır için nasıl doldurulduğuna dikkat edin. Bunun nedenini anlamak için kodu kontrol edin.Günlük Grubu'nu tıklayın. Suçla mücadele eden 4 ünlü kaplumbağanın adları
Adolescent Irradiated Espionage Tortoises
etiketi altında gruplandırılır.Log Custom (Özel Günlük) seçeneğini tıklayın. Kırmızı kenarlıklı ve mavi arka planlı bir mesaj Console'a kaydedilir.
Buradaki ana fikir, mesajları JavaScript'inizden Konsola'ya kaydetmek istediğinizde, console
yöntemlerinden birini kullanmanızdır. Her yöntem, mesajları farklı şekilde biçimlendirir.
Bu bölümde gösterilenden daha fazla yöntem vardır. Eğiticinin sonunda, diğer yöntemleri nasıl keşfedeceğinizi öğreneceksiniz.
Tarayıcı tarafından günlüğe kaydedilen iletileri görüntüleme
Tarayıcı, mesajları da Console'a kaydeder. Bu durum genellikle sayfada bir sorun olduğunda yaşanır.
Cause 404'ü tıklayın. Sayfanın JavaScript'i var olmayan bir dosyayı getirmeye çalıştığı için tarayıcı bir
404
ağ hatasını günlüğe kaydeder.Neden Hatası'nı tıklayın. JavaScript, var olmayan bir DOM düğümünü güncellemeye çalıştığı için tarayıcı yakalanmamış bir
TypeError
öğesini günlüğe kaydeder.Log Levels (Günlük Düzeyleri) açılır menüsünü tıklayın ve Verbose (Ayrıntılı) seçeneği devre dışıysa etkinleştirin. Sonraki bölümde filtreleme hakkında daha fazla bilgi edineceksiniz. Günlüğe kaydettiğiniz bir sonraki mesajın görünür olmasını sağlamak için bunu yapmanız gerekir. Not: Varsayılan Düzeyler açılır menüsü devre dışıysa Konsol Kenar Çubuğu'nu kapatmanız gerekebilir. Konsol Kenar Çubuğu hakkında daha fazla bilgi için aşağıdaki İleti Kaynağına göre filtreleyin.
İhlale sebep'i tıklayın. Sayfa birkaç saniye yanıt vermemeye başlar ve ardından tarayıcı, mesajı
[Violation] 'click' handler took 3000ms
konsola kaydeder. Kesin süre değişiklik gösterebilir.
Mesajları filtreleme
Bazı sayfalarda Konsol'un çok sayıda ileti aldığını görürsünüz. Geliştirici Araçları, mevcut görevle alakalı olmayan mesajları filtrelemek için pek çok farklı yöntem sunar.
Günlük düzeyine göre filtrele
Her console.*
yöntemine bir önem düzeyi atanır: Verbose
, Info
, Warning
veya Error
. Örneğin, console.log()
Info
düzeyinde bir mesajdırken console.error()
Error
düzeyinde bir mesajdır.
Günlük düzeyine göre filtrelemek için:
Günlük Düzeyleri açılır menüsünü tıklayın ve Errors (Hatalar) seçeneğini devre dışı bırakın. Bir seviye, yanında onay işareti yoksa devre dışı bırakılır.
Error
düzeyindeki mesajlar kaybolur.Log Levels (Günlük Düzeyleri) açılır menüsünü tekrar tıklayın ve Errors (Hatalar) seçeneğini yeniden etkinleştirin.
Error
düzeyindeki mesajlar yeniden görünür.
Metne göre filtrele
Yalnızca belirli bir dizeyi içeren mesajları görüntülemek istiyorsanız bu dizeyi Filtre metin kutusuna yazın.
Filtre metin kutusuna
Dave
yazın.Dave
dizesini içermeyen tüm iletiler gizlenir.Adolescent Irradiated Espionage Tortoises
etiketini de görebilirsiniz. Bu bir hata.Filtre metin kutusundan
Dave
alanını silin. Tüm mesajlar yeniden görünür.
Normal ifadeye göre filtrele
Belirli bir dize yerine bir metin kalıbı içeren tüm mesajların gösterilmesini istediğinizde normal ifade kullanın.
Filtre metin kutusuna
/^[AH]/
yazın. Yaptığı işlemin açıklaması için bu kalıbı RegExr'e yazın.Filtre metin kutusundan
/^[AH]/
alanını silin. Tüm mesajlar tekrar görünür durumda.
İleti kaynağına göre filtrele
Yalnızca belirli bir URL'den gelen iletileri görüntülemek istiyorsanız Kenar çubuğunu kullanın.
Konsol Kenar Çubuğunu Göster'i tıklayın.
12 Mesajlar'ın yanındaki Genişlet simgesini tıklayın. Kenar çubuğu, iletilerin günlüğe kaydedilmesine neden olan URL'lerin listesini gösterir. Örneğin,
log.js
11 mesaja neden olmuştur.
Kullanıcı mesajlarına göre filtrele
Daha önce Günlük Bilgileri'ni tıkladığınızda, mesajı Console'a kaydetmek için console.log('Hello, Console!')
adlı bir komut dosyası kullanılıyordu. JavaScript'ten günlüğe kaydedilen bu tür iletilere kullanıcı mesajları adı verilir. Buna karşılık, Cause 404'ü tıkladığınızda tarayıcı, istenen kaynağın bulunamadığını belirten Error
düzeyinde bir mesaj günlüğe kaydeder. Bu tür iletiler tarayıcı mesajları
olarak kabul edilir. Tarayıcı mesajlarını filtrelemek ve yalnızca kullanıcı mesajlarını göstermek için Kenar çubuğunu kullanabilirsiniz.
9 Kullanıcı Mesajı'nı tıklayın. Tarayıcı mesajları gizlenir.
Tüm mesajları tekrar göstermek için 12 Mesajlar'ı tıklayın.
Console'u diğer herhangi bir panelle birlikte kullanma
Stilleri düzenliyorsanız, ancak bir şey için Konsol günlüğünü hızlıca kontrol etmeniz gerekiyorsa ne olur? Çekmeceyi kullanın.
- Öğeler sekmesini tıklayın.
Esc tuşuna basın. Çekmece'nin Konsol sekmesi açılır. Bu eğitim boyunca kullandığınız Console'un tüm özelliklerine sahiptir.
Sonraki adımlar
Tebrikler, eğiticiyi tamamladınız. Kupanızı almak için Kupayı dağıt'ı tıklayın.
- Console kullanıcı arayüzüyle ilgili diğer özellikleri ve iş akışlarını keşfetmek için Konsol Referansı bölümüne göz atın.
- JavaScript'ten günlüğe kaydedilen mesajları görüntüleme bölümünde gösterilen tüm
console
yöntemleri hakkında daha fazla bilgi edinmek ve bu eğiticide ele alınmayan diğerconsole
yöntemlerini keşfetmek için Console API Referansı'na bakın. - Geliştirici Araçları ile başka neler yapabileceğinizi öğrenmek için Başlarken bölümüne bakın.
- Tüm
console
biçim ve stil yöntemleri hakkında daha fazla bilgi edinmek için Konsol'da mesajları biçimlendirme ve stil oluşturma bölümüne bakın.