Konsoldaki mesajları günlüğe kaydet

Kayce Baskçalar

Twitter GitHub Glitch

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.

1. Demoyu açın.

2. İsteğe bağlı: Demoyu ayrı bir pencereye taşıyın. Bu örnekte eğitim solda, demo ise sağdadır.

   

3. 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.

   

4. İ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.

1. Demoda Log Info (Günlük Bilgileri) düğmesini tıklayın. Hello, Console!, Console'a kaydedilir.

   

2. 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.

3. 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.

4. 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.

5. İ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.

6. 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ık quoteDante 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 zaman console.trace() yöntemini çağırarak yığın izlemeleri günlüğe kaydedebilirsiniz.

7. 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.

   

8. 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.

9. 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.

   

10. 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.

1. 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.

   

2. 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.

   

3. 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.

   

4. İ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.

Önemli nokta: Konsol yalnızca çıkış mesajlarını filtreler. Konsol'a yazdığınız tüm girişler burada kalır.

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.

Not: console.* yöntemlerinin tam listesi ve önem düzeyleri için Console API referansını inceleyin.

Günlük düzeyine göre filtrelemek için:

1. 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.

   

2. 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.

Önemli nokta: Konsol, uyguladığınız açılır filtreyi her zaman hatırlar. Bu ayar tüm sayfalarda, ayrıca sayfada, Geliştirici Araçları'nda ve Chrome'un yeniden yüklenmesinde kalır. Geçici bir filtreyi hızlıca uygulamak için Kenar çubuğu'nu kullanın.

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.

1. 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.

   

2. 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.

1. Filtre metin kutusuna /^[AH]/ yazın. Yaptığı işlemin açıklaması için bu kalıbı RegExr'e yazın.

   

2. 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.

Önemli nokta: Kenar çubuğu filtreleri geçicidir. Konsol; sayfa, Geliştirici Araçları ve Chrome yeniden yüklemelerinin yanı sıra bu tür filtreleri tüm sayfalarda korumaz.

1. Konsol Kenar Çubuğunu Göster'i tıklayın.

   

2. 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.

1. 9 Kullanıcı Mesajı'nı tıklayın. Tarayıcı mesajları gizlenir.

   

2. 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.

1. Öğeler sekmesini tıklayın.

2. 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ğer console 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.