Konsol özellikleri referansı

Sofia Emelianova
Sofia Emelianova

Bu sayfa, Chrome Geliştirici Araçları Konsolu ile ilgili özelliklere referans niteliğindedir. Günlüğe kaydedilen mesajları görüntülemek ve JavaScript'i çalıştırmak için Console'u kullanmaya zaten aşina olduğunuz varsayılır. Yoksa Başlarken bölümüne bakın.

console.log() gibi işlevlerle ilgili API referansını arıyorsanız Console API Referansı'na bakın. monitorEvents() gibi işlevlerle ilgili referans için Console Utilities API Referansı'na bakın.

Konsolu aç

Konsolu panel olarak veya Çekmece'de sekme olarak açabilirsiniz.

Konsol panelini açma

Control+ÜstKrktr+J veya Command+Option+J (Mac) tuşlarına basın.

Konsol.

Konsolu Komut Menüsü'nden açmak için Console yazmaya başlayın ve ardından yanında Panel rozeti bulunan Konsolu Göster komutunu çalıştırın.

Konsol panelini gösterme komutu.

Çekmecede Konsolu Aç

Escape tuşuna basın veya Geliştirici Araçları'nı Özelleştir ve Kontrol Et'i tıklayın Geliştirici Araçları'nı özelleştirme ve kontrol etme. ve ardından Konsol Çekmecesini Göster'i seçin.

Konsol Çekmecesini Göster.

Çekmece, Geliştirici Araçları pencerenizin en altında, Konsol sekmesi açık şekilde açılır.

Çekmecedeki Konsol sekmesi.

Konsol sekmesini Komut Menüsü'nden açmak için Console yazmaya başlayın ve ardından yanında Çekmece rozeti bulunan Konsolu Göster komutunu çalıştırın.

Çekmecede Konsol sekmesini gösterme komutu.

Konsol Ayarlarını Aç

Konsol'un sağ üst köşesindeki Ayarlar. Konsol Ayarları'nı tıklayın.

Console Ayarları'na gidin.

Aşağıdaki bağlantılarda her ayar açıklanmaktadır:

Filtreleme için yararlı olan Kenar çubuğunu göstermek üzere Konsol Kenar Çubuğunu Göster'i Konsol Kenar Çubuğunu Göster. tıklayın.

Konsol Kenar Çubuğu.

Mesajları göster

Bu bölümde, mesajların Console'da sunulma şeklini değiştiren özellikler yer alır. Uygulamalı bir açıklama için Mesajları görüntüleme bölümüne bakın.

İleti gruplandırmasını devre dışı bırak

Konsolun varsayılan mesaj gruplandırma davranışını devre dışı bırakmak için Konsol Ayarları'nı açın ve Benzer şekilde gruplandır'ı devre dışı bırakın. Örnek için XHR ve Fetch isteklerini günlüğe kaydetme bölümüne bakın.

Kesme noktalarındaki mesajları görüntüleme

Konsol, kesme noktaları tarafından tetiklenen iletileri aşağıdaki şekilde işaretler:

Konsol, koşullu kesme noktaları ve günlük noktaları tarafından oluşturulan mesajları işaretler.

Kaynaklar panelinde satır içi ayrılma noktası düzenleyicisi'ne gitmek için ayrılma noktası mesajının yanındaki bağlantı bağlantısını tıklayın.

Yığın izlerini göster

Konsol, hatalar ve uyarılar için yığın izlerini otomatik olarak yakalar. Yığın izleme, hata veya uyarıya neden olan işlev çağrılarının (çerçeveler) geçmişidir. Konsol, bunları ters sırada gösterir: Son kare en üsttedir.

Bir yığın izlemeyi (stack trace) görüntülemek için bir hata veya uyarının yanındaki Genişlet. genişlet simgesini tıklayın.

Yığın izleri.

Yığın izlemelerdeki hata nedenlerini görüntüleyin

Konsol, varsa yığın izlemedeki hata nedenleri zincirlerini gösterebilir.

Hata ayıklamayı kolaylaştırmak için, hataları yakalarken ve yeniden gönderirken hata nedenlerini belirtebilirsiniz. Konsol, neden zincirinde adım adım ilerledikçe her hata yığınını Caused by: önekiyle yazdırır. Böylece orijinal hatayı bulabilirsiniz.

Bir hata zinciri, yığın izlemede önek olarak "Neden:" ön ekine neden olur.

Eş zamansız yığın izlerini göster

Kullandığınız çerçeve tarafından destekleniyorsa veya setTimeout gibi tarayıcı planlama temel öğelerini doğrudan kullanırken Geliştirici Araçları eşzamansız kodun her iki parçasını birbirine bağlayarak eşzamansız işlemleri izleyebilir.

Bu durumda, yığın izleme (stack trace), eşzamansız işlemin "tam hikayesini" gösterir.

Eş zamansız yığın izleme (stack trace).

Yığın izlemelerde bilinen üçüncü taraf karelerini göster

Kaynak haritaları ignoreList alanını içerdiğinde Console, varsayılan olarak paketleyiciler tarafından oluşturulan kaynaklardan (ör. webpack) veya çerçevelerden (ör. Angular) üçüncü taraf çerçevelerini yığından gizler.

Üçüncü taraf kareler de dahil olmak üzere tam yığın izlemeyi (stack trace) görüntülemek için yığın izlemenin en altında N kare daha göster'i tıklayın.

N kare daha göster.

Tam yığın izlemeyi her zaman görüntülemek için Ayarlar. Ayarlar > Yoksayma Listesi > Bilinen üçüncü taraf komut dosyalarını yoksayılanlar listesine otomatik olarak ekle ayarını devre dışı bırakın.

Bilinen üçüncü taraf komut dosyalarını yoksayılanlar listesine otomatik olarak ekle.

XHR ve Fetch isteklerini günlüğe kaydet

Tüm XMLHttpRequest ve Fetch isteklerini gerçekleştikçe Console'a kaydetmek için Konsol Ayarları'nı açın ve XMLHttpRequests'i kaydet'i etkinleştirin.

XMLHttpRequest ve Fetch isteklerini günlüğe kaydetme.

Yukarıdaki örnekte en üstte yer alan mesajda Console'un varsayılan gruplandırma davranışı gösterilmektedir. Aşağıdaki örnekte, ileti gruplandırması devre dışı bırakıldıktan sonra aynı günlüğün nasıl görüneceği gösterilmektedir.

Günlüğe kaydedilen XMLHttpRequest ve Fetch isteklerinin gruplandırmadan sonra nasıl göründüğü.

İletileri sayfa yüklemelerinde koru

Varsayılan olarak, her yeni sayfa yükleyişinizde Konsol temizlenir. Sayfa yüklemeleri genelinde mesajların saklanması için Konsol Ayarlarını Aç'ı ve ardından Günlüğü Koru onay kutusunu etkinleştirin.

Ağ mesajlarını gizle

Varsayılan olarak tarayıcı, ağ mesajlarını Konsol'a kaydeder. Örneğin, aşağıdaki örnekte en üstteki mesaj 404 kodunu temsil etmektedir.

Console'da bir 404 mesajı.

Ağ mesajlarını gizlemek için:

  1. Konsol Ayarları'nı açın.
  2. Ağı Gizle onay kutusunu etkinleştirin.

CORS hatalarını göster veya gizle

Ağ istekleri, Ortamlar Arası Kaynak Paylaşımı (CORS) nedeniyle başarısız olursa Konsol CORS hatalarını gösterebilir.

CORS hatalarını göstermek veya gizlemek için:

  1. Konsol Ayarları'nı açın.
  2. Show CORS errors in the console (Konsolda CORS hatalarını göster) onay kutusunu işaretleyin veya kutunun işaretini kaldırın.

Konsolda CORS hatalarını gösterin.

Konsol CORS hatalarını gösterecek şekilde ayarlanmışsa ve bu hatalarla karşılaşırsanız, hataların yanında bulunan aşağıdaki düğmeleri tıklayabilirsiniz:

Ağ ve Sorunlar düğmeleri.

Mesajları filtreleme

Console'da mesajları filtrelemenin birçok yolu vardır.

Tarayıcı mesajlarını filtreleme

Konsol Kenar Çubuğunu açın ve yalnızca sayfanın JavaScript'inden gelen mesajları göstermek için Kullanıcı Mesajları'nı tıklayın.

Kullanıcı mesajlarını görüntüleme.

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

Geliştirici Araçları, console.* yöntemlerinin çoğuna önem düzeylerini atar.

Dört düzey vardır:

  • Verbose
  • Info
  • Warning
  • Error

Örneğin, console.log() Info grubunda, console.error() ise Error grubundadır. Console API Referansı, geçerli her yöntemin önem düzeyini açıklar.

Tarayıcının Console'a günlüğe kaydettiği her mesajın bir önem düzeyi de vardır. İlgilenmediğiniz tüm mesaj düzeylerini gizleyebilirsiniz. Örneğin, yalnızca Error mesajlarıyla ilgileniyorsanız diğer 3 grubu gizleyebilirsiniz.

Verbose, Info, Warning veya Error mesajlarını etkinleştirmek ya da devre dışı bırakmak için Log Levels (Günlük Düzeyleri) açılır menüsünü tıklayın.

Günlük Düzeyleri açılır menüsü.

Ayrıca, Konsol Kenar Çubuğunu Göster. Konsol Kenar Çubuğu'nu açıp Errors, Uyarılar, Bilgi veya Ayrıntılı'yı tıklayarak günlük düzeyine göre filtreleme yapabilirsiniz.

Uyarıları görüntülemek için Kenar Çubuğunu kullanma.

İletileri URL'ye göre filtreleme

Yalnızca belirli bir URL'den gelen mesajları görüntülemek için url: yazıp bir URL girin. url: yazdıktan sonra DevTools ilgili tüm URL'leri gösterir.

Bir URL filtresi.

Alanlar da kullanılabilir. Örneğin, https://example.com/a.js ve https://example.com/b.js mesajları günlüğe kaydediyorsa url:https://example.com, bu 2 komut dosyasındaki mesajlara odaklanmanıza olanak tanır.

Belirli bir URL'den gelen tüm mesajları gizlemek için -url: yazın ve ardından URL'yi yazın (örneğin, https://b.wal.co). Bu bir negatif URL filtresidir.

Negatif URL filtresi. Geliştirici Araçları, belirtilen URL ile eşleşen tüm mesajları gizliyor.

Ayrıca Konsol Kenar Çubuğu'nu açıp Kullanıcı Mesajları bölümünü genişleterek ve ardından odaklanmak istediğiniz mesajları içeren komut dosyasının URL'sini tıklayarak tek bir URL'den mesaj gösterebilirsiniz.

Belirli bir komut dosyasından mesajları görüntüleme.

Farklı bağlamlardan gelen mesajları filtreleme

Sayfanızda bir reklam olduğunu varsayalım. Reklam <iframe> içine yerleştirilmiştir ve Console'unuzda çok sayıda mesaj oluşturur. Bu reklam farklı bir JavaScript bağlamında olduğundan, mesajlarını gizlemenin bir yolu Konsol Ayarları'nı açıp Yalnızca Seçili Bağlam onay kutusunu etkinleştirmektir.

Normal ifade kalıbıyla eşleşmeyen iletileri filtrele

Bu kalıpla eşleşmeyen tüm iletileri filtrelemek için Filtre metin kutusuna /[foo]\s[bar]/ gibi bir normal ifade yazın. Alanlar desteklenmiyor. Bunun yerine \s özelliğini kullanın. Geliştirici Araçları, kalıbın ileti metninde veya mesajın günlüğe kaydedilmesine neden olan komut dosyasında bulunup bulunmadığını kontrol eder.

Örneğin, aşağıda /[gm][ta][mi]/ ile eşleşmeyen tüm iletiler filtrelenir.

/[gm][ta][mi]/ ile eşleşmeyen tüm iletiler filtrelenir.

Günlük mesajlarında metin aramak için:

  1. Yerleşik bir arama çubuğunu açmak için Command+F (Mac) veya Ctrl+F (Windows, Linux) tuşlarına basın.
  2. Çubuğa sorgunuzu yazın. Bu örnekte sorgu legacy şeklindedir. Sorgu yazma. İsteğe bağlı olarak şunları yapabilirsiniz:
    • Sorgunuzu büyük/küçük harfe duyarlı hale getirmek için Büyük/küçük harf eşleştir. Büyük/küçük harf eşleştir'i tıklayın.
    • RegEx ifadesi kullanarak arama yapmak için RegEx düğmesi. Normal İfade Kullan'ı tıklayın.
  3. Enter tuşuna basın. Önceki veya sonraki arama sonucuna atlamak için yukarı veya aşağı düğmesine basın.

JavaScript'i çalıştırın

Bu bölüm, Konsolda JavaScript çalıştırmayla ilgili özellikler içerir. Uygulamalı bir adım adım açıklamalı kılavuz için JavaScript Çalıştırma bölümüne bakın.

Dize kopyalama seçenekleri

Konsol, dizeleri varsayılan olarak geçerli JavaScript değişmez değerleri olarak verir. Çıkışı sağ tıklayın ve üç kopyalama seçeneğinden birini belirleyin:

  • JavaScript değişmez değeri olarak kopyala. Uygun özel karakterlerden çıkış yapar ve dizeyi, içeriğe bağlı olarak tek tırnak, çift tırnak veya tırnak işaretleri içine alır.
  • Dize içeriklerini kopyala. Ham dizeyi, yeni satırlar ve diğer özel karakterlerle birlikte panoya kopyalar.
  • JSON değişmez değeri olarak kopyala. Dizeyi geçerli JSON olarak biçimlendirir.

Kopyalama seçenekleri.

Geçmişteki ifadeleri yeniden çalıştır

Console'da daha önce çalıştırdığınız JavaScript ifadelerinin geçmişinde gezinmek için Yukarı Ok tuşuna basın. İfadeyi tekrar çalıştırmak için Enter tuşuna basın.

Canlı İfadeler ile bir ifadenin değerini gerçek zamanlı olarak izleme

Konsol'a aynı JavaScript ifadesini tekrar tekrar yazıyorsanız Canlı İfade oluşturmak sizin için daha kolay olabilir. Canlı İfadeler ile, bir ifadeyi bir kez yazıp Konsolunuzun üst kısmına sabitlersiniz. İfadenin değeri neredeyse gerçek zamanlı olarak güncellenir. Canlı İfadelerle JavaScript İfade Değerlerini Gerçek Zamanlı Olarak İzleme bölümüne bakın.

Eager Değerlendirmesini Devre Dışı Bırak

Konsolda JavaScript ifadeleri yazdığınızda, Eager Değerlendirmesi söz konusu ifadenin döndürülen değerinin bir önizlemesini gösterir. Döndürülen değer önizlemelerini kapatmak için Konsol Ayarları'nı açın ve Eager Değerlendirmesi onay kutusunu devre dışı bırakın.

Kullanıcı etkinleştirmesini değerlendirmeyle tetikleyin

Kullanıcı etkinleştirme, kullanıcı işlemlerine bağlı olan bir göz atma oturumunun durumudur. "Etkin" durumu, kullanıcının şu anda sayfayla etkileşimde bulunduğu veya sayfa yüklendikten sonra etkileşimde bulunduğu anlamına gelir.

Herhangi bir değerlendirmeyle kullanıcı etkinleştirmeyi tetiklemek için Konsol Ayarları'nı açın ve Onay kutusu. Değerlendir, kullanıcı etkinleştirmesini tetikler seçeneğini işaretleyin.

Otomatik tamamlamayı geçmişten devre dışı bırak

Siz bir ifadeyi yazarken Console'un otomatik tamamlama pop-up'ı, daha önce çalıştırdığınız ifadeleri gösterir. Bu ifadelerin başına > karakteri eklenir. Aşağıdaki örnekte Geliştirici Araçları daha önce document.querySelector('a') ve document.querySelector('img') değerlerini değerlendirmişti.

Geçmişteki ifadeleri gösteren otomatik tamamlama pop-up&#39;ı.

Geçmişinizden ifadelerin gösterilmesini durdurmak için Konsol Ayarları'nı açın ve Geçmişten Otomatik Tamamlama onay kutusunu devre dışı bırakın.

JavaScript bağlamı seçin

Varsayılan olarak JavaScript Bağlamı açılır menüsü, ana dokümanın tarama bağlamını temsil eden üst değerine ayarlanmıştır.

JavaScript Bağlamı açılır menüsü.

Sayfanızda, <iframe> içine yerleştirilmiş bir reklamınız olduğunu varsayalım. Reklamın DOM'sini değiştirmek için JavaScript çalıştırmak istiyorsunuz. Bunu yapmak için öncelikle JavaScript Bağlamı açılır menüsünden reklamın tarama bağlamını seçmeniz gerekir.

Farklı bir JavaScript bağlamı seçme.

Nesne özelliklerini inceleme

Konsol, belirttiğiniz bir JavaScript nesnesinin özelliklerinin etkileşimli bir listesini görüntüleyebilir.

Listeye göz atmak için Konsol'a nesne adını yazın ve Enter tuşuna basın.

DOM nesnelerinin özelliklerini incelemek için DOM nesnelerinin özelliklerini görüntüleme başlıklı makaledeki adımları uygulayın.

Sahip olunan ve devralınan mülkleri tespit etme

Konsol, önce kendi nesne özelliklerini sıralar ve bunları kalın yazı tipiyle vurgular.

Nesne özelliklerini görüntüleme.

Prototip zincirinden devralınan özellikler normal yazı tipindedir. Konsol, bunları yerleşik nesnelerin ilgili yerel erişimcilerini değerlendirerek nesnenin kendisinde görüntüler.

Devralınan mülkler gösteriliyor.

Özel erişimcileri değerlendirme

Geliştirici Araçları, oluşturduğunuz erişimcileri varsayılan olarak değerlendirmez. Özel erişimci. Bir nesnedeki özel erişimcileri değerlendirmek için (...) simgesini tıklayın. Değerlendirilen özel erişimci.

Numaralandırılabilir ve numaralandırılamayan özellikleri tespit etme

Numaralandırılabilir özellikler parlak renklidir. Numaralandırılamayan özellikler yoksayıldı. Numaralandırılabilir ve numaralandırılamayan özellikler. Numaralanabilir özellikler, for … in döngüsü veya Object.keys() yöntemiyle yinelenebilir.

Sınıf örneklerinin özel özelliklerini tespit etme

Konsol, # önekiyle sınıf örneklerinin özel özelliklerini belirtir.

Sınıf örneğinin özel mülkü.

Konsol, özel mülkleri sınıf kapsamı dışında değerlendirdiğinizde bile otomatik olarak tamamlayabilir.

Özel mülk otomatik tamamlama.

Dahili JavaScript özelliklerini inceleyin

ECMAScript gösterimini alan Console, JavaScript'in içindeki bazı özellikleri çift köşeli parantez içine alır. Kodunuzda bu tür özelliklerle etkileşimde bulunamazsınız. Ancak bunları incelemeniz faydalı olabilir.

Farklı nesnelerde aşağıdaki dahili özellikleri görebilirsiniz:

İşlevleri inceleme

JavaScript'te işlevler, aynı zamanda özellikleri olan nesnelerdir. Ancak Konsol'a bir işlev adı yazarsanız Geliştirici Araçları, özelliklerini görüntülemek yerine bu işlevi çağırır.

JavaScript'in içindeki işlev özelliklerini görüntülemek için console.dir() komutunu kullanın.

Bir işlevin özelliklerini inceleme.

İşlevler aşağıdaki özelliklere sahiptir:

  • [[FunctionLocation]]. Kaynak dosyada işlev tanımını içeren satırın bağlantısı.
  • [[Scopes]]. İşlevin erişebildiği değerleri ve ifadeleri listeler. Hata ayıklama sırasında işlev kapsamlarını incelemek için Yerel, kapatma ve genel özellikleri görüntüleme ve düzenleme bölümüne bakın.
  • Sınır işlevleri aşağıdaki özelliklere sahiptir:
    • [[TargetFunction]]. bind() hedefi.
    • [[BoundThis]]. this değeri.
    • [[BoundArgs]]. İşlev bağımsız değişkenlerinden oluşan dizi. Bağlı işlev.
  • Oluşturucu işlevleri, [[IsGenerator]]: true özelliğiyle işaretlenmiştir. Oluşturucu işlevi.
  • Oluşturucular, yinelemeli nesneleri döndürür ve aşağıdaki özelliklere sahiptir:
    • [[GeneratorLocation]]. Bir kaynak dosyada oluşturucu tanımını içeren satıra bağlantı.
    • [[GeneratorState]]: suspended, closed veya running.
    • [[GeneratorFunction]]. Nesneyi döndüren oluşturma aracı.
    • [[GeneratorReceiver]]. Değeri alan bir nesnedir. Yineleme nesnesi.

Konsolu temizle

Console'u temizlemek için aşağıdaki iş akışlarından herhangi birini kullanabilirsiniz:

  • Konsolu Temizle Net.'yi tıklayın.
  • Bir mesajı sağ tıklayın ve Konsolu Temizle'yi seçin.
  • Console'a clear() yazıp Enter tuşuna basın.
  • Web sayfanızın JavaScript'inden console.clear() çağrısı yapın.
  • Konsol odaktayken Control+L tuşlarına basın.