Konsol özellikleri referansı

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 (?) bulunan console.* ç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:

1. Konsol ayarlarını açın.
2. 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:

1. Konsol ayarlarını açın.
2. 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 TypeError ile 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:

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

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. Ç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.
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, 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.
• ArrayBuffer nesneleri aşağıdaki özelliklere sahiptir:
  • [[Int8Array]], [[Uint8Array]], [[Int16Array]], [[Int32Array]]
  • [[ArrayBufferByteLength]], [[ArrayBufferData]]
• WebAssembly.Memory nesneleri, 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.
• Promise nesne aşağıdaki özelliklere sahiptir:
  • [[PromiseState]]: beklemede, karşılandı veya reddedildi
  • [[PromiseResult]]: Beklemedeyse undefined, karşılandıysa <value>, reddedildiyse <reason>
• Proxy nesneleri ş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]]. this değ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, closed veya running.
  • [[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.