Bu sayfa, Chrome Geliştirici Araçları Konsolu ile ilgili özelliklere referans niteliğindedir. Bu makalede, günlük mesajlarını görüntülemek ve JavaScript çalıştırmak için Console'u kullanma konusunda bilgi sahibi olduğunuz varsayılmaktadır. Aksi takdirde Başlayın 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 bir panel olarak veya Çekmecede sekme olarak açabilirsiniz.
Konsolda paneli açma
Ctrl+Üst Karakter+J veya Command+Option+J (Mac) tuşlarına basın.
Komut menüsünden Console'u açmak için Console yazmaya başlayın ve ardından yanında Panel rozeti bulunan Console'u Göster komutunu çalıştırın.
Çekmecede Konsol'u açma
Esc tuşuna basın veya DevTools'u Özelleştirin ve Kontrol Edin'i 
tıklayın ve ardından Konsol Çekmecesi'ni Göster'i seçin.
Çekme çubuğu, DevTools pencerenizin alt kısmında Konsol sekmesi açıkken 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 Konsol'u Göster komutunu çalıştırın.
Konsol ayarlarını açma
Konsolun 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
- Benzer mesajları konsolda gruplandırma
- Konsolda CORS hatalarını gösterme
- XMLHttpRequest'leri günlüğe kaydetme
- Eager değerlendirme
- Geçmişten otomatik tamamlama
Konsol Kenar Çubuğunu Aç
Filtreleme için kullanışlı 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 nasıl sunulduğunu değiştiren özellikler yer alır. Adım adım açıklamalı kılavuz için Mesajları görüntüleme başlıklı makaleyi inceleyin.
Mesaj gruplamayı devre dışı bırakma
Konsolun varsayılan mesaj gruplama davranışını devre dışı bırakmak için Konsol Ayarları'nı açın ve Benzer e-postaları gruplandır'ı devre dışı bırakın. Örnek için XHR ve Fetch isteklerini günlüğe kaydetme başlıklı makaleye bakın.
Kesme noktalarından gelen mesajları görüntüleme
Konsol, kesme noktaları tarafından tetiklenen mesajları aşağıdaki şekilde işaretler:
- Koşullu ayrılma noktalarında turuncu soru işareti (
?) bulunanconsole.*çağrıları - Pembe iki noktalı
..günlük noktası mesajları
Kaynaklar panelindeki satır içi kesme noktası düzenleyicisine atlamak için kesme noktası mesajının yanındaki ankraj bağlantısını tıklayın.
Yığın izlemeleri görüntüleme
Konsol, hatalar ve uyarılar için yığın izlemelerini otomatik olarak yakalar. Yığın izleme, hataya veya uyarıya neden olan işlev çağrılarının (çerçeveler) geçmişidir. Konsol bunları ters sırada gösterir: En son kare en üsttedir.
Yığın izlemeyi görüntülemek için hatanın veya uyarının yanındaki 
genişletme simgesini tıklayın.
Yığın izlemelerde hata nedenlerini görüntüleme
Console, varsa yığın izlemedeki hata nedenlerinin zincirlerini gösterebilir.
Hata ayıklamayı kolaylaştırmak için, hataları yakalayıp yeniden oluştururken hata nedenlerini belirtebilirsiniz. Konsol, neden zincirini gösterirken her hata yığınını Caused by: önekiyle yazdırır. Böylece orijinal hatayı bulabilirsiniz.
Eş zamansız yığın izlemeleri (stack trace) görüntüleme
Kullandığınız çerçeve tarafından veya setTimeout gibi tarayıcı zamanlama temel öğelerini doğrudan kullandığınızda 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, asynkron işlemin "tam hikayesini" gösterir.
Yığın izlemelerinde bilinen üçüncü taraf çerçevelerini gösterme
Kaynak haritaları ignoreList alanını içerdiğinde Console, varsayılan olarak paketleyiciler (ör. webpack) veya çerçeveler (ör. Angular) tarafından oluşturulan kaynaklardaki üçüncü taraf çerçeveleri yığın izlemelerinden gizler.
Üçüncü taraf çerçeveleri dahil olmak üzere yığın izlemenin tamamını görüntülemek için yığın izlemenin alt kısmındaki N tane daha çerçeve göster'i tıklayın.
Yığın izlemenin tamamını her zaman görüntülemek için 
Ayarlar > Yoksayılanlar 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 kaydetme
Konsol ayarlarını açın ve tüm XMLHttpRequest ve Fetch isteklerini gerçekleştikleri sırada Konsol'a kaydetmek için XMLHttpRequest'leri Günlüğe Kaydet'i etkinleştirin.
Yukarıdaki örnekte gösterilen üst mesaj, Console'un varsayılan gruplandırma davranışını gösterir. Aşağıdaki örnekte, mesaj gruplandırması devre dışı bırakıldıktan sonra aynı günlüğün nasıl göründüğü gösterilmektedir.
Mesajları sayfa yüklemeleri arasında koruma
Varsayılan olarak, yeni bir sayfa yüklediğinizde Console temizlenir. Mesajların sayfa yüklemelerinde kalıcı olması için Konsol ayarlarını açın ve ardından Günlüğü sakla onay kutusunu etkinleştirin.
Ağ mesajlarını gizleme
Varsayılan olarak, tarayıcı ağ mesajlarını Konsol'a kaydeder. Örneğin, aşağıdaki örnekte en üstteki mesaj 404'ü temsil etmektedir.
Ağ mesajlarını gizlemek için:
- Konsol ayarlarını açın.
- Ağı gizle onay kutusunu etkinleştirin.
CORS hatalarını gösterme veya gizleme
Ağ istekleri Kaynaklar Arası Kaynak Paylaşımı (CORS) nedeniyle başarısız olursa Console'da CORS hataları gösterilebilir.
CORS hatalarını göstermek veya gizlemek için:
- Konsol ayarlarını açın.
- Konsolda CORS hatalarını göster onay kutusunu işaretleyin veya temizleyin.
Konsol, CORS hatalarını gösterecek şekilde ayarlanmışsa ve bu hatalarla karşılaşırsanız hataların yanındaki aşağıdaki düğmeleri tıklayabilirsiniz:
simgesini tıklayarak isteği Ağ panelinde CORS ile ilgili bir TypeErrorile açın.- 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
Yalnızca sayfanın JavaScript'inden gelen mesajları göstermek için Console kenar çubuğunu açın ve Kullanıcı Mesajları'nı tıklayın.
Günlük düzeyine göre filtreleme
DevTools, console.* yöntemlerinin çoğuna önem dereceleri atar.
Dört seviye vardır:
VerboseInfoWarningError
Ö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 Konsola kaydettiği her mesajın bir önem düzeyi de vardır. İlgilenmediğiniz mesajları dilediğiniz düzeyde gizleyebilirsiniz. Örneğin, yalnızca Error iletileriyle ilgileniyorsanız diğer 3 grubu gizleyebilirsiniz.
Verbose, Info, Warning veya Error iletilerini etkinleştirmek ya da devre dışı bırakmak için Günlük Seviyeleri açılır menüsünü tıklayın.
Konsol kenar çubuğunu açıp Hatalar, Uyarılar, Bilgi veya Ayrıntılı'yı tıklayarak da günlük düzeyine göre filtreleme yapabilirsiniz.
Mesajları URL'ye göre filtreleyin
Yalnızca belirli bir URL'den gelen mesajları görüntülemek için url:'yi ve ardından bir URL yazın. url: yazdıktan sonra DevTools, alakalı tüm URL'leri gösterir.
Alan adları da kullanılabilir. Örneğin, https://example.com/a.js ve https://example.com/b.js iletileri günlüğe kaydediyorsa url:https://example.com, bu 2 komut dosyasından gelen iletilere odaklanmanızı sağlar.
Belirtilen bir URL'deki tüm mesajları gizlemek için -url: simgesini ve ardından URL'yi yazın (ör. https://b.wal.co). Bu, negatif bir URL filtresidir.
Konsol kenar çubuğunu açarak, Kullanıcı Mesajları bölümünü genişletip odaklanmak istediğiniz mesajları içeren komut dosyasının URL'sini tıklayarak da tek bir URL'deki mesajları gösterebilirsiniz.
Farklı bağlamlardan gelen iletileri filtreleme
Sayfanızda bir reklam olduğunu varsayalım. Reklam bir <iframe> içine yerleştirilmiş ve Konsolunuzda çok fazla mesaj oluşturuyor. Bu reklam farklı bir JavaScript bağlamında olduğu için 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 filtreleme
Bu kalıpla eşleşmeyen tüm iletileri filtrelemek için Filtre metin kutusuna /[foo]\s[bar]/ gibi bir normal ifade yazın. Boşluklar desteklenmez. Bunun yerine \s kullanın. DevTools, kalıbın ileti metninde veya iletinin günlüğe kaydedilmesine neden olan komut dosyasında bulunup bulunmadığını kontrol eder.
Örneğin, aşağıdaki ifade /[gm][ta][mi]/ ile eşleşmeyen tüm mesajları filtreler.
![/[gm][ta][mi]/ ile eşleşmeyen tüm mesajları filtreleme.](https://developer.chrome.google.cn/static/docs/devtools/console/reference/image/filtering-any-messages-82d76b2bac549.png?authuser=1&hl=tr)
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.
- Çubuğa sorgunuzu yazın. Bu örnekte sorgu
legacy'tür.
İ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 ifade kullan'ı tıklayın.
- Sorgunuzu büyük/küçük harfe duyarlı hale getirmek için
- 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, Console'da JavaScript çalıştırmayla ilgili özellikler içerir. Uygulamalı bir açıklama için JavaScript çalıştırma başlıklı makaleyi inceleyin.
Dize kopyalama seçenekleri
Konsol, varsayılan olarak dizeleri geçerli JavaScript değişmez değerleri olarak gösterir. Bir çıkışı sağ tıklayın ve üç kopyalama seçeneğinden birini belirleyin:
- JavaScript değişmez değeri olarak kopyala. Uygun özel karakterleri kod dışında bırakır ve dizeyi içeriğe bağlı olarak tek tırnak, çift tırnak veya ters eğik çizgi içine alır.
- Dize içeriğini kopyala. Yeni satırlar ve diğer özel karakterler dahil olmak üzere ham dizenin tamamını panosuna kopyalar.
- JSON değişmez değeri olarak kopyala'yı seçin. Dizeyi geçerli JSON biçiminde biçimlendirir.
Geçmişteki ifadeleri yeniden çalıştırma
Konsol'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ı ifadelerle bir ifadenin değerini anlık olarak izleyin
Console'da aynı JavaScript ifadesini tekrar tekrar yazdığınızı fark ederseniz canlı ifade oluşturmak daha kolay olabilir. Canlı İfadeler ile bir ifadeyi bir kez yazıp Console'unuzun üst kısmına sabitleyebilirsiniz. İfadenin değeri neredeyse gerçek zamanlı olarak güncellenir. Canlı İfadeler ile JavaScript ifade değerlerini gerçek zamanlı olarak izleme başlıklı makaleyi inceleyin.
Eager değerlendirmeyi devre dışı bırakma
Konsola JavaScript ifadeleri yazarken Eager Değerlendirme, bu ifadenin döndürülen değerinin önizlemesini gösterir. Döndürülen değer önizlemelerini devre dışı bırakmak için Konsol ayarlarını açın ve Eager Evaluation (Acele Değerlendirme) onay kutusunu devre dışı bırakın.
Değerlendirmeyle kullanıcı etkinleştirmesini tetikleme
Kullanıcı etkinleştirme, kullanıcı işlemlerine bağlı olarak bir tarama oturumunun durumudur. "Etkin" durum, kullanıcının şu anda sayfayla etkileşimde olduğu veya sayfa yüklendikten sonra etkileşimde bulunduğu anlamına gelir.
Kullanıcı etkinleştirmesini herhangi bir değerlendirmeyle tetiklemek için Console ayarlarını açın ve 
Kod değerlendirmesini, kullanıcı işlemi olarak kabul et seçeneğini işaretleyin.
Otomatik tamamlamada geçmiş kullanılmasını devre dışı bırakma
Bir ifadeyi yazarken Console'un otomatik tamamlama pop-up'ında daha önce çalıştırdığınız ifadeler gösterilir. Bu ifadelere > karakteri eklenir. Aşağıdaki örnekte, DevTools daha önce document.querySelector('a') ve document.querySelector('img') öğelerini değerlendirmiştir.
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ını 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 olduğunu varsayalım. Reklamın DOM'sini düzenlemek için
JavaScript çalıştırmak istiyorsunuz. Bunun için öncelikle JavaScript Bağlamı açılır menüsünden reklamın tarama bağlamını seçmeniz gerekir.
Nesne özelliklerini inceleme
Console, belirttiğiniz bir JavaScript nesnesinin özelliklerinin etkileşimli bir listesini gösterebilir.
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.
Kendi mülkleri ve devralınan mülkleri tespit etme
Console, kendi nesne özelliklerini önce sıralar ve kalın yazı tipiyle vurgular.
Prototip zincirinden devralınan özellikler normal yazı tipindedir. Console, yerleşik nesnelerin ilgili doğal erişim araçlarını değerlendirerek bunları nesnenin üzerinde gösterir.
Özel erişim araçlarını değerlendirme
Geliştirici Araçları, varsayılan olarak oluşturduğunuz erişimcileri değerlendirmez.
Bir nesnenin özel erişimini değerlendirmek için (...) simgesini tıklayın.
Listelenebilir ve listelenemeyen özellikleri tespit etme
Listelenebilir özellikler parlak renktedir. Numaralandırılamayan özellikler sessize alınmıştır.
Listelenebilen özellikler, for … in döngüsü veya Object.keys() yöntemi ile iterlenebilir.
Sınıf örneklerinin gizli mülklerini bulma
Konsol, sınıf örneklerinin özel mülklerini # önekiyle belirtir.
Console, özel özellikleri sınıf kapsamı dışında değerlendirdiğinizde bile otomatik olarak tamamlayabilir.
Dahili JavaScript özelliklerini inceleme
ECMAScript notasyonunu kullanan Konsol, JavaScript'in dahili bazı özelliklerini çift köşeli parantez içine alır. Kodunuzda bu tür mülklerle etkileşim kuramazsınız. Ancak, bunları incelemek yararlı olabilir.
Farklı nesnelerde aşağıdaki dahili özellikleri görebilirsiniz:
- Her nesnenin bir
[[Prototype]]öğesi vardır.
- Temel sarmalayıcıların bir
[[PrimitiveValue]]özelliği vardır.
ArrayBuffernesneleri aşağıdaki özelliklere sahiptir:WebAssembly.Memorynesneleri,ArrayBuffer'ye özgü özelliklere ek olarak bir[[WebAssemblyMemory]]özelliğine de sahiptir.
- Anahtarlanmış koleksiyonlar (haritalar ve kümeler), anahtarlanmış girişlerini içeren bir
[[Entries]]mülküne sahiptir.
Promisenesne aşağıdaki özelliklere sahiptir:[[PromiseState]]: beklemede, karşılandı veya reddedildi[[PromiseResult]]: Beklemedeyseundefined, karşılandıysa<value>, reddedildiyse<reason>
Proxynesneleri şu özelliklere sahiptir:[[Handler]]nesnesi,[[Target]]nesnesi ve[[isRevoked]](kapalı veya açık).
İşlevleri inceleme
JavaScript'te, işlevler aynı zamanda özelliklere sahip nesnelerdir. Ancak Konsol'a bir işlev adı yazarsanız DevTools, işlevin özelliklerini göstermek yerine işlevi çağırır.
JavaScript'e özgü 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ın bulunduğu 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 başlıklı makaleyi inceleyin.- Bağlı işlevler aşağıdaki özelliklere sahiptir:
[[TargetFunction]].bind()öğesinin hedefi.[[BoundThis]].thisdeğerini belirtir.[[BoundArgs]]. İşlev bağımsız değişkenleri dizisi.
- Oluşturucu işlevler
[[IsGenerator]]: trueözelliğiyle işaretlenir.
- Oluşturucular, iteratör nesneleri döndürür ve aşağıdaki özelliklere sahiptir:
[[GeneratorLocation]]. Kaynak dosyada jeneratör tanımını içeren bir satırın bağlantısı.[[GeneratorState]]:suspended,closedveyarunning.[[GeneratorFunction]]. Nesneyi döndüren oluşturma aracı.[[GeneratorReceiver]]. Değeri alan bir nesne.
Konsolu temizleme
Console'u temizlemek için aşağıdaki iş akışlarından herhangi birini kullanabilirsiniz:
- Konsolu Temizle'yi tıklayın
. - Bir iletiyi sağ tıklayın, ardından Konsolu Temizle'yi seçin.
- Konsola
clear()yazıp Enter tuşuna basın. - Web sayfanızın JavaScript'inden
console.clear()numarasını arayın. - Konsol odaktayken Denet+L tuşlarına basın.