Konsoldaki mesajları günlüğe kaydet

Kayce Basques

Bu etkileşimli eğitim, Chrome Geliştirici Araçları Konsolu'ndaki mesajları günlüğe nasıl kaydedeceğinizi ve filtreleyeceğinizi gösterir.

Bu eğitim sırayla tamamlanmak üzere tasarlanmıştır. Bir sayfaya etkileşim eklemek için JavaScript'in nasıl kullanılacağı gibi, web geliştirmenin temellerini bildiğiniz varsayılır.

Demoyu ve Geliştirici Araçları'nı ayarlama

Bu eğitim, demoyu açıp tüm iş akışlarını kendiniz deneyebileceğiniz şekilde tasarlanmıştır. Fiziksel olarak takip ettiğinizde, iş akışlarını daha sonra hatırlama ihtimaliniz 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 Control+Üst Karakter+J veya Command+Option+J (Mac) tuşlarına basarak Geliştirici Araçları'nı açın. Geliştirici Araçları varsayılan olarak demonun sağında açılır.

   

4. İsteğe bağlı: Geliştirici Araçları'nı pencerenin alt kısmına yerleştirin veya ayrı bir pencereye yerleştirin.

   Geliştirici Araçları demonun alt kısmına yerleştirildi:

   Geliştirici Araçları ayrı bir pencerede ayrılmış:

JavaScript'ten günlüğe kaydedilen mesajları görüntüleme

Konsolda gördüğünüz çoğu mesaj, sayfanın JavaScript'ini yazan web geliştiricilerinden gelir. Bu bölümün amacı, size Console'da görebileceğiniz farklı mesaj türlerini tanıtmak ve her mesaj türünü kendi JavaScript'inizden nasıl günlüğe kaydedebileceğinizi açıklamaktır.

1. Demodaki Log Info (Günlük Bilgileri) düğmesini tıklayın. Hello, Console! Console'a giriş yapıyor.

   

2. Konsoldaki Hello, Console! mesajının yanından log.js:2'yi tıklayın. Kaynaklar paneli açılır ve mesajın Console'a kaydedilmesine neden olan kod satırını vurgular.

   

   Sayfanın JavaScript'i console.log('Hello, Console!') olarak adlandırıldığında mesaj günlüğe kaydedildi.

3. Aşağıdaki iş akışlarından birini kullanarak Konsol'a dönün:

   • Konsol sekmesini tıklayın.
   • Konsol odakta olana kadar Ctrl+[ 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 Enter tuşuna basın.

4. Demodaki Günlük Uyarısı düğmesini tıklayın. Abandon Hope All Ye Who Enter ise konsola giriş yapar.

   

   Bu şekilde biçimlendirilmiş mesajlar 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. Bu işlemi, bir mesajın belirli bir şekilde günlüğe kaydedilmesine neden olan kodu görmek istediğinizde yapın.

6. Abandon Hope All Ye Who Enter'in önündeki Genişlet simgesini tıklayın. Geliştirici Araçları, çağrıya giden yığın izlemeyi gösterir.

   

   Yığın izleme (stack trace), logWarning adlı bir işlevin, buna da quoteDante adlı bir işlev çağrıldığını bildiriyor. Başka bir deyişle, ilk gerçekleşen çağrı, yığın izlemenin alt kısmındadır. console.trace() öğesini çağırarak istediğiniz zaman yığın izlemeyi günlüğe kaydedebilirsiniz.

7. LogError (Günlük Hatası) seçeneğini tıklayın. Şu hata mesajı günlüğe kaydedilir: I'm sorry, Dave. I'm afraid I can't do that.

   

8. Log Table'ı (Günlük Tablosu) tıklayın. Ünlü sanatçılarla ilgili bir tablo Console'a kaydedilir.

   

   birthday sütununun yalnızca bir satır için nasıl doldurulduğunu unutmayın. Bunun nedenini anlamak için kodu kontrol edin.

9. Log Group'u (Günlük Grubu) 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 Kaydı) seçeneğini tıklayın. Kırmızı kenarlıklı ve mavi arka planlı bir mesaj konsola kaydedilir.

    

Buradaki ana fikir, iletileri JavaScript'inizden Konsol'a günlüğe kaydetmek istediğinizde console yöntemlerinden birini kullanmanızdır. Her yöntem, mesajları farklı şekilde biçimlendirir.

Bu bölümde gösterilenlerden de 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 genellikle sayfayla ilgili bir sorun olduğunda ortaya çıkar.

1. 404 nedeni'ni tıklayın. Sayfanın JavaScript'i var olmayan bir dosyayı getirmeye çalıştığı için tarayıcı 404 ağ hatasını günlüğe kaydeder.

   

2. Hataya Neden seçeneğini tıklayın. JavaScript var olmayan bir DOM düğümünü güncellemeye çalıştığı için tarayıcı, yakalanmamış bir TypeError değerini günlüğe kaydeder.

   

3. Log Levels (Günlük Düzeyleri) açılır menüsünü tıklayın ve devre dışıysa Ayrıntılı seçeneğini etkinleştirin. Bir sonraki bölümde filtreleme hakkında daha fazla bilgi edineceksiniz. Kaydettiğiniz bir sonraki mesajın görünür olması için bunu yapmanız gerekir. Not: Varsayılan Düzeyler açılır menüsü devre dışıysa Konsol Kenar Çubuğunu kapatmanız gerekebilir. Console Kenar Çubuğu hakkında daha fazla bilgi için aşağıda İleti Kaynağına göre filtreleyin.

   

4. İhlale Neden seçeneğini tıklayın. Sayfa birkaç saniyeliğine yanıt vermemeye başlar ve ardından tarayıcı [Violation] 'click' handler took 3000ms mesajını Console'a kaydeder. Kesin süre değişiklik gösterebilir.

   

Mesajları filtreleme

Bazı sayfalarda Konsol çok sayıda iletiyle dondurulur. Geliştirici Araçları, mevcut görevle alakalı olmayan mesajları filtrelemek için birçok farklı yöntem sunar.

Günlük düzeyine göre filtreleme

Her console.* yöntemine bir önem düzeyi atanır: Verbose, Info, Warning veya Error. Örneğin, console.log() Info düzeyinde bir mesajdır, console.error() ise Error düzeyinde bir mesajdır.

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

1. Log Levels (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. Yanında onay işareti olmayan bir seviye 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.

Metne göre filtrele

Yalnızca belirli bir dizeyi içeren iletileri görüntülemek isterseniz söz konusu 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 metnini silin. Tüm mesajlar yeniden görünür.

Normal ifadeye göre filtrele

Belirli bir dize yerine metin kalıbı içeren tüm mesajları göstermek için normal ifade kullanın.

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

   

2. Filtre metin kutusundan /^[AH]/ metnini silin. Tüm mesajlar tekrar görünür durumdadır.

İleti kaynağına göre filtrele

Yalnızca belirli bir URL'den gelen iletileri görüntülemek istiyorsanız Kenar çubuğu'nu kullanın.

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

   

2. 12 İleti'nin yanındaki Genişlet simgesini tıklayın. Kenar çubuğunda, iletilerin günlüğe kaydedilmesine neden olan URL'lerin listesi gösterilir. Örneğin, log.js 11 mesaja neden oldu.

   

Kullanıcı mesajlarına göre filtreleme

Daha önce Günlük Bilgileri'ni tıkladığınızda, mesajı Konsola kaydetmek için console.log('Hello, Console!') adlı bir komut dosyası kullanılıyordu. Bunun gibi JavaScript'ten günlüğe kaydedilen mesajlara kullanıcı mesajları adı verilir. Buna karşılık, 404 nedeni'ni tıkladığınızda tarayıcı, istenen kaynağın bulunamadığını belirten Error düzeyinde bir mesaj günlüğe kaydeder. Bu tür mesajlar tarayıcı mesajları olarak kabul edilir. Tarayıcı iletilerini filtrelemek ve yalnızca kullanıcı mesajlarını göstermek için Kenar çubuğu'nu kullanabilirsiniz.

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

   

2. Tüm mesajları tekrar görmek için 12 Mesajlar'ı tıklayın.

Konsol'u diğer panellerle birlikte kullanın.

Stilleri düzenliyorsanız ancak Konsol günlüğünde bir öğeyi hızlıca kontrol etmeniz gerekiyorsa ne olur? Çekmece'yi kullanın.

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

2. Escape tuşuna basın. Çekmece'nin Konsol sekmesi açılır. Bu eğitim boyunca kullandığınız Konsol'un tüm özelliklerine sahiptir.

   

Sonraki adımlar

Tebrikler, eğiticiyi tamamladınız. Kuponu almak için Dispense Kupası'nı tıklayın.

• Konsol kullanıcı arayüzüyle ilgili diğer özellikleri ve iş akışlarını keşfetmek için Konsol Referansı'na bakın.
• JavaScript'ten günlüğe kaydedilen iletileri 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 keşfetmek 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 Konsolda mesajları biçimlendirme ve stil belirleme başlıklı makaleyi inceleyin.