Konsoldaki mesajları günlüğe kaydet

Kayce Basques

Bu etkileşimli eğitimde, Chrome Geliştirici Araçları Konsolu'nda mesajları nasıl kaydedeceğiniz ve filtreleyeceğiniz gösterilmektedir.

Bu eğitim, sırayla tamamlanacak şekilde tasarlanmıştır. Bu dokümanda, web geliştirmenin temellerini (ör. JavaScript kullanarak sayfaya etkileşim ekleme) 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. Adımları fiziksel olarak uyguladığınızda 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ğitici sol tarafta, demo ise sağ tarafta yer alıyor.

   

3. Demoya odaklanın ve 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 demodan sonra açılır.

   

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

   Geliştirici Araçları, demonun alt kısmına sabitlendi:

   Geliştirici Araçları ayrı bir pencerede çıkarıldı:

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

Konsol'da gördüğünüz mesajların çoğu, sayfanın JavaScript'ini yazan web geliştiricilerden gelir. Bu bölümün amacı, Console'da görme olasılığınız olan farklı mesaj türlerini tanıtmak ve her mesaj türünü kendi JavaScript'inizden nasıl kendiniz kaydedebileceğinizi açıklamaktır.

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

   

2. Console'daki Hello, Console! mesajının yanında log.js:2'yi tıklayın. Kaynaklar paneli açılır ve iletinin konsola kaydedilmesine neden olan kod satırı vurgulanır.

   

   Sayfanın JavaScript'i console.log('Hello, Console!') işlevini çağırdığında mesaj kaydedildi.

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

   • Konsol sekmesini tıklayın.
   • Konsol ön planda olana kadar Ctrl+[ veya Command+[ (Mac) tuşlarına basın.
   • Komut menüsünü açın, Console yazmaya başlayın, Show Console Panel (Konsol Panelini Göster) komutunu seçin ve Enter tuşuna basın.

4. Demoda Log Warning (Uyarı Günlüğü) düğmesini tıklayın. Abandon Hope All Ye Who Enter, konsola kaydedilir.

   

   Bu şekilde biçimlendirilmiş iletiler uyarı niteliğindedir.

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 Console'a geri dönün. Bir mesajın belirli bir şekilde kaydedilmesine neden olan kodu görmek istediğinizde bu işlemi yapın.

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

   

   Yığın izleme, logWarning adlı bir işlevin çağrıldığını ve bunun da quoteDante adlı bir işlevi çağırdığını belirtiyor. Başka bir deyişle, ilk gerçekleşen çağrı, yığın izlemenin (stack trace) en altındadır. console.trace() işlevini çağırarak istediğiniz zaman yığın izlerini kaydedebilirsiniz.

7. Log Error'u (Hata Günlüğü) tıklayın. Aşağıdaki hata mesajı 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 Konsol'a kaydedilir.

   

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

9. Log Group'u (Grup Günlüğü) tıklayın. Suçla savaşan 4 ünlü kaplumbağanın adları Adolescent Irradiated Espionage Tortoises etiketi altında gruplandırılıyor.

   

10. Log Custom'ı (Özel Günlük) tıklayın. Kırmızı kenarlıklı ve mavi arka planlı bir ileti Konsol'a kaydedilir.

    

Buradaki temel fikir, JavaScript'inizden Console'a mesaj kaydetmek istediğinizde console yöntemlerinden birini kullanmanızdır. Her yöntem, mesajları farklı şekilde biçimlendirir.

Bu bölümde gösterilenlerden daha fazla yöntem vardır. Eğitimin sonunda diğer yöntemleri nasıl keşfedeceğinizi öğreneceksiniz.

Tarayıcı tarafından kaydedilen mesajları görüntüleme

Tarayıcı da mesajları konsola kaydeder. Bu durum genellikle sayfayla ilgili bir sorun olduğunda yaşanır.

1. 404 hatasına neden ol'u tıklayın. Sayfanın JavaScript'i, var olmayan bir dosyayı getirmeye çalıştığından tarayıcı 404 ağ hatası kaydeder.

   

2. Hata Nedeni'ni tıklayın. JavaScript, mevcut olmayan bir DOM düğümünü güncellemeye çalıştığı için tarayıcı yakalanmamış bir TypeError hatası kaydeder.

   

3. 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. Filtreleme hakkında daha fazla bilgiyi sonraki bölümde bulabilirsiniz. Bir sonraki mesajın görünür olduğundan emin olmak için bunu yapmanız gerekir. Not: Varsayılan Düzeyler açılır listesi 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 ileti kaynağına göre filtreleyin.

   

4. İhlale Neden Ol'u tıklayın. Sayfa birkaç saniyeliğine yanıt vermez hale gelir ve ardından tarayıcı, [Violation] 'click' handler took 3000ms mesajını Konsol'a kaydeder. Tam süre değişiklik gösterebilir.

   

Mesajları filtreleme

Bazı sayfalarda Console'un mesajlarla dolduğunu görürsünüz. DevTools, o anki görevle alakalı olmayan mesajları filtrelemenin birçok farklı yolunu 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. Günlük Düzeyleri açılır listesini tıklayın ve Hatalar'ı devre dışı bırakın. Bir seviyenin yanında onay işareti kalmadığında seviye devre dışı bırakılır. Error düzeyindeki mesajlar kaybolur.

   

2. Günlük Düzeyleri açılır listesini tekrar tıklayın ve Hatalar'ı yeniden etkinleştirin. Error düzeyindeki mesajlar yeniden görünür.

Metne göre filtreleme

Yalnızca tam bir dize içeren mesajları görüntülemek istediğinizde bu dizeyi Filtre kutusuna yazın.

1. Filtre kutusuna Dave yazın. Dave dizesini içermeyen tüm iletiler gizlenir.

   

2. Filtre kutusundan Dave simgesini silin. Tüm mesajlar yeniden görünür.

Normal ifadeye göre filtreleme

Belirli bir dize yerine bir metin kalıbı içeren tüm iletileri göstermek istediğinizde normal ifade kullanın.

1. Filtre kutusuna /^[AH]/ yazın. Ne yaptığını öğrenmek için bu kalıbı RegExr'ye girin.

   

2. Filtre kutusundan /^[AH]/ simgesini silin. Tüm mesajlar tekrar görünür hale gelir.

Mesaj kaynağına göre filtreleme

Yalnızca belirli bir URL'den gelen mesajları görüntülemek istediğinizde kenar çubuğunu kullanın.

1. Show Console Sidebar'ı (Konsol Kenar Çubuğunu Göster) tıklayın .

   

2. 12 Mesaj'ın yanındaki Genişlet simgesini tıklayın. Kenar çubuğunda, mesajların kaydedilmesine neden olan URL'lerin listesi gösterilir. Örneğin, log.js 11 iletiye neden oldu.

   

Kullanıcı mesajlarına göre filtreleme

Daha önce Log Info'yu tıkladığınızda, mesajı konsola kaydetmek için console.log('Hello, Console!') adlı bir komut dosyası çağrılıyordu. JavaScript'ten bu şekilde kaydedilen iletilere kullanıcı iletileri adı verilir. Buna karşılık, 404 Hatasına Neden Ol'u tıkladığınızda tarayıcı, istenen kaynağın bulunamadığını belirten bir Error düzeyinde mesaj kaydetti. Bu tür iletiler tarayıcı iletileri olarak kabul edilir. Tarayıcı mesajlarını filtreleyip 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 iletileri tekrar göstermek için 12 İleti'yi tıklayın.

Konsol'u diğer panellerle birlikte kullanma

Stilleri düzenlerken Console günlüğünü hızlıca kontrol etmeniz gerekirse ne yapmanız gerekir? Çekmeceyi kullanın.

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

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

   

Sonraki adımlar

Tebrikler, eğitimi tamamladınız. Kupayı almak için Kupa Ver'i tıklayın.

• Console kullanıcı arayüzüyle ilgili daha fazla özellik ve iş akışını keşfetmek için Console Referansı'na bakın.
• Console API Referansı'nı inceleyerek JavaScript'ten kaydedilen mesajları görüntüleme bölümünde gösterilen tüm console yöntemleri hakkında daha fazla bilgi edinin ve bu eğitimde ele alınmayan diğer console yöntemleri keşfedin.
• Geliştirici Araçları ile başka neler yapabileceğinizi öğrenmek için Başlangıç bölümüne bakın.
• Tüm console biçimlendirme ve stil yöntemleri hakkında daha fazla bilgi edinmek için Console'da mesajları biçimlendirme ve stil uygulama başlıklı makaleyi inceleyin.