Konsol özellikleri referansı

Bu sayfada Chrome Geliştirici Araçları Konsolu ile ilgili özelliklere referans verilmiştir. Günlüğe kaydedilen mesajları görüntülemek ve JavaScript'i çalıştırmak için Console'u kullanma konusunda bilgi sahibi olduğunuz varsayılır. Başlamadıysanız Başlayın bölümüne bakın.

console.log() gibi işlevler için 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 Çekmecede sekme olarak açabilirsiniz.

Konsol panelini açma

Control+Üst Karakter+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.

Çekmeceden 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 olarak açılır.

Komut Menüsü'nden Konsol sekmesini 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üğü sakla
• Yalnızca seçili bağlam
• Benzer mesajları konsolda gruplandır
• Konsolda CORS hatalarını göster
• XMLHttpRequests'i günlüğe kaydet
• Eager değerlendirme
• Geçmişten otomatik tamamlama

Konsol Kenar Çubuğunu Açma

Filtreleme için kullanışlı olan Kenar çubuğunu görüntülemek üzere Konsol Kenar Çubuğunu Göster'i tıklayın.

Mesajları göster

Bu bölümde, mesajların Konsol'daki sunulma şeklini değiştiren özellikler bulunmaktadır. Uygulamalı bir adım adım açıklamalı kılavuz için Mesajları görüntüleme bölümüne göz atı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 Benzerini 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ından gelen mesajları göster

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

• Koşullu ayrılma noktalarında turuncu soru işaretiyle ? console.* çağrı
• Pembe iki noktalı .. 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 sabit bağlantısını tıklayın.

Yığın izlerini göster

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

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

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

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

Bu durumda yığın izleme, eşzamansız işlemin "tüm hikayesini" gösterir.

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

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

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

Tüm yığın izlemeyi (stack trace) 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 isteklerinin meydana geldiği anda konsola kaydedilmesi için Konsol Ayarları'nı açın ve XMLHttpRequests'i günlüğe 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ını devre dışı bıraktıktan sonra aynı günlüğün nasıl göründüğü gösterilmektedir.

Sayfa yüklemelerinde mesajları koru

Varsayılan olarak, yeni bir sayfa yüklediğinizde Konsol temizlenir. Tüm sayfa yüklemelerinde mesajları korumak 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 günlüğe kaydeder. Örneğin, aşağıdaki örnekte en üstteki mesaj 404 kodunu temsil etmektedir.

Ağ mesajlarını gizlemek için:

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

CORS hatalarını göster veya gizle

Ağ istekleri, Kaynaklar 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. Console 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 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 bulmak 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örmek için Kullanıcı Mesajları'nı tıklayın.

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

Geliştirici Araçları, console.* yönteminin önem düzeylerinin çoğunu atar.

Dört düzey vardır:

• Verbose
• Info
• Warning
• Error

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

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

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

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

Mesajları URL'ye göre filtrele

Yalnızca belirli bir URL'den gelen mesajları görüntülemek için url: yazın ve ardından bir URL yazın. url: yazdıktan sonra Geliştirici Araçları ilgili tüm URL'leri gösterir.

Alanlar da çalışır. Ö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ından gelen 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 girin (ör. 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ş ve Console'da çok sayıda mesaj oluşturuyor. Bu reklam farklı bir JavaScript bağlamında olduğundan, mesajlarını gizlemenin bir yolu Konsol Ayarları'nı açmak ve 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 mesajları filtrelemek için Filtre metin kutusuna /[foo]\s[bar]/ gibi bir normal ifade yazın. Alanlar desteklenmiyor. Bunun yerine \s alanını kullanın. DevTools, kalıbın mesaj 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 arama çubuğunu açmak için Command+F (Mac) veya Ctrl+F (Windows, Linux) tuşlarına basın.
2. Çubukta sorgunuzu yazın. Bu örnekte sorgu: legacy. İsteğe bağlı olarak:
   • 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ümde, Konsolda JavaScript'in çalıştırılmasıyla ilgili özellikler yer alır. Uygulamalı bir adım adım açıklamalı kılavuz için JavaScript'i çalıştırma sayfasını inceleyin.

Dize kopyalama seçenekleri

Konsol, dizeleri varsayılan olarak geçerli JavaScript değişmez değerleri olarak verir. Bir çı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 vurgu işaretleriyle sarmalar.
• Dize içeriklerini kopyala. Yeni satırlar ve diğer özel karakterler de dahil olmak üzere tam işlenmemiş dizeyi 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. Bu ifadeyi tekrar çalıştırmak için Enter tuşuna basın.

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

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

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

Konsola 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 devre dışı bırakmak için Console Ayarları'nı açın ve Eager Değerlendirmesi onay kutusunu devre dışı bırakın.

Kullanıcı etkinleştirmesini değerlendirmeyle tetikleyin

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

Herhangi bir değerlendirmeyle kullanıcı etkinleştirmesini 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

Bir ifade yazarken, Konsolun 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ğerlendirdi.

Geçmişinize ait 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 ayarlanı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'i ç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 nesne adını Konsol'a 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, yerleşik nesnelerin karşılık gelen yerel erişimcilerini değerlendirerek bunları 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ı. Numaralandırma özellikleri, for … in döngüsü veya Object.keys() yöntemiyle yinelenebilir.

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

Konsol, sınıf örneklerinin özel mülklerini # önekiyle belirtir.

Konsol, gizli mülkleri sınıf kapsamının dışında değerlendirseniz bile otomatik olarak tamamlayabilir.

Dahili JavaScript özelliklerini inceleyin

ECMAScript gösterimini kullanan 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 onları incelemek yararlı 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 özelliğine ek olarak, WebAssembly.Memory nesnelerinin de bir [[WebAssemblyMemory]] özelliği vardır.
• Anahtarlı koleksiyonlar (haritalar ve kümeler), anahtarlı girişlerini içeren bir [[Entries]] özelliğine sahiptir.
• Promise nesne aşağıdaki özelliklere sahiptir:
  • [[PromiseState]]: beklemede, karşılandı veya reddedildi
  • [[PromiseResult]]: Beklemedeyse undefined, karşılanırsa <value>, reddedilirse <reason>
• Proxy nesne şu özelliklere sahiptir: [[Handler]] nesnesi, [[Target]] nesne ve [[isRevoked]] (kapalı veya kapalı).

İşlevleri inceleyin

JavaScript'te işlevler, aynı zamanda özellikleri olan nesnelerdir. Ancak Konsol'a bir işlev adı yazarsanız DevTools, ö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şkenleri dizisi.
• Oluşturucu işlevleri, [[IsGenerator]]: true özelliğiyle işaretlenir.
• Oluşturucular, aşağıdaki özelliklere sahip yineleyici nesneleri döndürür:
  • [[GeneratorLocation]]. Kaynak dosyada oluşturucu tanımını içeren bir satırın bağlantısı.
  • [[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.
• Konsola clear() yazıp Enter tuşuna basın.
• Web sayfanızın JavaScript'inden console.clear() çağırın.
• Konsol odaktayken Control+L tuşlarına basın.