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:
- Console Ayarları'nı açın.
- 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:
- Console Ayarları'nı açın.
- 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:
- Yerleşik arama çubuğunu açmak için Command+F (Mac) veya Ctrl+F (Windows, Linux) tuşlarına basın.
- Ç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.
- 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: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]]
: Beklemedeyseundefined
, 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
veyarunning.
[[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.