Konsol özellikleri referansı

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.

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.

Çekmecede Konsolu Aç

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

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

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.

Konsol Ayarlarını Aç

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

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

• Ağı gizle
• Günlüğü koru
• Yalnızca seçili bağlam
• Konsolda benzer mesajları gruplandırma
• Konsolda CORS hatalarını göster
• XMLHttpRequests'i günlüğe kaydetme
• Ergin değerlendirme
• Geçmişten otomatik tamamlama

Konsol Kenar Çubuğunu Aç

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

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:

• Koşullu ayrılma noktalarında turuncu bir soru işareti ? ile console.* çağrı
• Pembe iki noktalı .. içeren günlük noktası mesajları

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 simgesini tıklayın.

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.

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.

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.

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

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.

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.

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

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.

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:

• İsteği Ağ panelinde CORS ile ilgili bir TypeError ile açmak için .
• Sorunlar sekmesinde olası bir çözüm görmek için .

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.

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.

Ayrıca, 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.

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

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.

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.

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.

Günlüklerde metin arama

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. İ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'i tıklayın.
   • RegEx ifadesi kullanarak arama yapmak için 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.

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

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.

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.

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.

Özel erişimcileri değerlendirme

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

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

Numaralandırılabilir özellikler parlak renklidir. Numaralandırılamayan özellikler yoksayıldı. 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.

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

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:

• Tüm nesnelerde [[Prototype]] bulunur.
• Temel sarmalayıcılar bir [[PrimitiveValue]] özelliğine sahiptir.
• ArrayBuffer nesne aşağıdaki özelliklere sahiptir:
  • [[Int8Array]], [[Uint8Array]], [[Int16Array]], [[Int32Array]]
  • [[ArrayBufferByteLength]], [[ArrayBufferData]]
• ArrayBuffer'e özgü özelliklere ek olarak, WebAssembly.Memory nesneleri de [[WebAssemblyMemory]] özelliğine sahiptir.
• Anahtarlı koleksiyonlar (haritalar ve kümeler), anahtarlı girişleri içeren bir [[Entries]] özelliğine sahiptir.
• Promise nesne aşağıdaki özelliklere sahiptir:
  • [[PromiseState]]: beklemede, yerine getirildi veya reddedildi
  • [[PromiseResult]]: Beklemedeyse undefined, karşılanırsa <value>, reddedilirse <reason>
• Proxy nesne şu özelliklere sahiptir: [[Handler]] nesne, [[Target]] nesnesi ve [[isRevoked]] (kapalı veya kapalı).

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

İş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.
• Oluşturucu işlevleri, [[IsGenerator]]: true özelliğiyle işaretlenmiştir.
• 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.

Konsolu temizle

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

• Konsolu Temizle '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.