Konsol özellikleri referansı

Bu sayfada, Chrome Geliştirici Araçları Konsolu ile ilgili özellikler hakkında bilgi verilmektedir. Bu dokümanda, Console'u kullanarak kaydedilen mesajları görüntüleme ve JavaScript çalıştırma konusunda bilgi sahibi olduğunuz varsayılır. Yoksa Başlangıç bölümüne bakın.

console.log() gibi işlevlerle ilgili API referansı 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çma

Konsolu panel olarak veya Çekmece'de 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 Show Console komutunu çalıştırın.

Çekmecede Konsol'u açma

Escape tuşuna basın veya Customize And Control DevTools'u (Geliştirici Araçlarını Özelleştirme ve Kontrol Etme) tıklayıp Show Console Drawer'ı (Konsol Çekmecesini Göster) seçin.

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

Komut Menüsü'nden Konsol sekmesini açmak için Console yazmaya başlayın ve ardından yanındaki Drawer rozetine sahip Show Console komutunu çalıştırın.

Konsol ayarlarını açın

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

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

• Ağı gizleme
• Günlüğü koru
• Yalnızca seçili bağlam
• Benzer mesajları konsolda gruplandırma
• Konsolda CORS hatalarını göster
• XMLHttpRequests bilgisi günlüğe kaydedilsin
• Eager evaluation (İstekli değerlendirme)
• Otomatik tamamlamada geçmiş kullanılsın

Konsol kenar çubuğunu açma

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, iletilerin konsolda gösterilme şeklini değiştiren özellikler yer alır. Uygulamalı olarak incelemek için İletileri görüntüleme başlıklı makaleyi inceleyin.

Mesaj gruplandırmayı devre dışı bırakma

Konsol ayarlarını açın ve Benzerleri gruplandır'ı devre dışı bırakarak Konsol'un varsayılan mesaj gruplandırma davranışını 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örüntüleme

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

• console.*, turuncu soru işaretiyle koşullu kesme noktalarında çağrılar ?
• Pembe iki noktalı .. Logpoint mesajları

Kaynaklar panelinde satır içi kesme noktası düzenleyicisine gitmek için kesme noktası mesajının yanındaki yer işareti 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 yol açan 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 bir hata veya uyarının yanındaki genişletme simgesini tıklayın.

Yığın izlemelerde hata nedenlerini görüntüleme

Konsol, varsa yığın izlemede hata nedenleri zincirlerini gösterebilir.

Hata ayıklamayı kolaylaştırmak için hataları yakalayıp yeniden oluştururken hata nedenlerini belirtebilirsiniz. Konsol, neden zincirinde ilerlerken her hata yığınını Caused by: önekiyle yazdırır. Böylece, orijinal hatayı bulabilirsiniz.

Eş zamansız yığın izlemeleri görüntüleme

Kullandığınız çerçeve tarafından destekleniyorsa veya tarayıcı planlama temel öğelerini (ör. setTimeout) doğrudan kullanırken Geliştirici Araçları, eş zamansız kodun her iki bölümü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 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çevelerini yığın izlemelerinden gizler.

Üçüncü taraf çerçeveleri de dahil olmak üzere tam yığın izini görüntülemek için yığın izinin alt kısmındaki N çerçeve daha göster'i tıklayın.

Her zaman tam yığın izini 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 kaydetme

Konsol ayarlarını açın ve XMLHttpRequests'i günlüğe kaydet'i etkinleştirerek tüm XMLHttpRequest ve Fetch isteklerini gerçekleşir gerçekleşmez Konsol'a kaydedin.

Yukarıdaki örnekte en üstteki mesaj, Console'un varsayılan gruplandırma davranışını gösterir. Aşağıdaki örnekte, aynı günlüğün ileti gruplandırma devre dışı bırakıldıktan sonra nasıl göründüğü gösterilmektedir.

İletileri sayfa yüklemeleri arasında kalıcı hale getirme

Varsayılan olarak, yeni bir sayfa yüklediğinizde Console temizlenir. Sayfa yüklemeleri arasında mesajların kalıcı olması için Konsol Ayarları'nı açın ve Günlüğü Sakla onay kutusunu etkinleştirin.

Ağ mesajlarını gizleme

Tarayıcı, ağ mesajlarını varsayılan olarak Konsol'a kaydeder. Örneğin, aşağıdaki örnekteki en üstteki mesaj 404 hatasını temsil eder.

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 Merkezler Arası Kaynak Paylaşımı (CORS) nedeniyle başarısız olursa Konsol'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 Ağ panelinde CORS ile ilgili bir TypeError ile isteği açın.
• simgesini tıklayarak Sorunlar sekmesinde olası bir çözüm elde edebilirsiniz.

Mesajları filtreleme

Konsoldaki mesajları filtrelemenin birçok yolu vardır.

Tarayıcı mesajlarını filtreleme

Konsol kenar çubuğunu açın ve yalnızca sayfadaki JavaScript'ten gelen mesajları göstermek için 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 yer alırken console.error(), Error grubunda yer alıyor. Console API Referansı'nda, geçerli her yöntemin önem düzeyi açıklanmaktadır.

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

Verbose, Info, Warning veya Error ileti türlerini etkinleştirmek ya da devre dışı bırakmak için Günlük Düzeyleri açılır listesini tıklayın.

Ayrıca Console kenar çubuğunu açıp Errors (Hatalar), Warnings (Uyarılar), Info (Bilgi) veya Verbose'u (Ayrıntılı) tıklayarak günlük düzeyine göre filtreleme de yapabilirsiniz.

İletileri URL'ye göre filtreleme

Yalnızca söz konusu URL'den gelen iletileri görüntülemek için url: yazıp ardından URL'yi girin. url: yazdıktan sonra Geliştirici Araçları, alakalı tüm URL'leri gösterir.

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

Belirli bir URL'den gelen tüm iletileri gizlemek için -url: yazıp URL'yi girin (örneğin, https://b.wal.co). Bu, negatif URL filtresidir.

Ayrıca, Konsol kenar çubuğunu 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 gelen mesajları da gösterebilirsiniz.

Farklı bağlamlardaki mesajları filtreleme

Sayfanızda bir reklam olduğunu varsayalım. Reklam bir <iframe> içine yerleştirilmiş ve konsolunuzda çok sayıda mesaj oluşturuyor. Bu reklam farklı bir JavaScript bağlamında olduğundan iletilerini gizlemenin bir yolu Konsol Ayarları'nı açıp Yalnızca Seçili Bağlam onay kutusunu etkinleştirmektir.

Normal ifade deseniyle eşleşmeyen mesajları filtreleme

Bu kalıpla eşleşmeyen 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 kaydedilmesine neden olan komut dosyasında bulunup bulunmadığını kontrol eder.

Örneğin, aşağıdaki filtre /[gm][ta][mi]/ ile eşleşmeyen tüm iletileri filtreler.

Günlüklerde metin arama

Günlük mesajlarında metin aramak için:

1. Yerleşik bir arama çubuğu 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. İsteğe bağlı olarak şunları yapabilirsiniz:
   • Sorgunuzun büyük/küçük harfe duyarlı olması için Büyük/Küçük Harfe Duyarlı 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 gitmek için yukarı ya da aşağı düğmesine basın.

JavaScript'i çalıştırın

Bu bölümde, Console'da JavaScript çalıştırmayla ilgili özellikler yer alır. Uygulamalı olarak incelemek için JavaScript'i Çalıştırma başlıklı makaleyi inceleyin.

Dize kopyalama seçenekleri

Konsol, dizeleri varsayılan olarak geçerli JavaScript değişmez değerleri şeklinde çıkarır. Bir çıktıyı sağ tıklayın ve üç kopyalama seçeneğinden birini belirleyin:

• JavaScript değişmez değeri olarak kopyala'yı seçin. Uygun özel karakterleri kod dışında bırakır ve içeriğe bağlı olarak dizeyi tek tırnak, çift tırnak veya ters tırnak içine alır.
• Dize içeriklerini kopyalama Yeni satırlar ve diğer özel karakterler de dahil olmak üzere tam ham dizeyi panoya kopyalar.
• JSON değişmezi olarak kopyala'yı seçin. Dizeyi geçerli JSON olarak biçimlendirir.

Önceki ifadeleri yeniden çalıştırma ve geçmişi temizleme

Konsol'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.

Konsol geçmişini temizlemek için Konsol'da boş bir alanı sağ tıklayın ve bağlam menüsünden Konsol geçmişini temizle'yi seçin.

Mesajları temizleme, kopyalama, genişletme, daraltma ve kaydetme

Konsol penceresini temizlemek için aşağıdakilerden birini yapın:

• En üstteki işlem çubuğunda block Konsolu temizle'yi tıklayın.
• Ctrl+L veya Cmd+K tuşlarına basın.
• Konsol'da boş bir alanı sağ tıklayın ve bağlam menüsünden Konsolu temizle'yi seçin.

Tüm iletileri genişletmek veya daraltmak için üstteki işlem çubuğunda genişlet Tümünü genişlet veya sıkıştır Tümünü daralt'ı tıklayın.

Bağlam menüsünden şunları da yapabilirsiniz:

• Konsolu kopyala: Önceki komutların geçmişi hariç, mevcut tüm iletileri panoya kopyalar.
• Farklı kaydet...: Mevcut tüm iletileri düz metin .log dosyasına kaydedin.

Live Expressions ile bir ifadenin değerini anlık olarak izleme

Konsol'da aynı JavaScript ifadesini tekrar tekrar yazdığınızı fark ederseniz Canlı İfade oluşturmak daha kolay olabilir. Canlı İfadeler ile bir ifadeyi bir kez yazıp Konsol'un en üstüne sabitleyebilirsiniz. İfadenin değeri neredeyse gerçek zamanlı olarak güncellenir. Watch JavaScript Expression Values In Real-Time With Live Expressions (Canlı İfadelerle JavaScript İfade Değerlerini Anlık Olarak İzleme) başlıklı makaleyi inceleyin.

İstekli değerlendirmeyi devre dışı bırakma

Konsola JavaScript ifadeleri yazarken Eager Evaluation, bu ifadenin dönüş değerinin önizlemesini gösterir. Konsol ayarlarını açın ve Eager Evaluation (İstekli Değerlendirme) onay kutusunu devre dışı bırakarak dönüş değeri önizlemelerini kapatın.

Değerlendirmeyle kullanıcı etkinleştirmesini tetikleme

Kullanıcı etkinleştirme, kullanıcının işlemlerine bağlı olan bir göz atma oturumunun durumudur. "Etkin" durum, 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ştirmesini tetiklemek için Konsol Ayarları'nı açın ve Kod değerlendirmesini, kullanıcı işlemi olarak kabul et'i işaretleyin.

Otomatik tamamlamada geçmiş kullanılmasını devre dışı bırakma

Bir ifade yazarken Console'un otomatik tamamlama pop-up'ında daha önce çalıştırdığınız ifadeler gösterilir. Bu ifadelerin önüne > karakteri eklenir. Aşağıdaki örnekte, DevTools daha önce document.querySelector('a') ve document.querySelector('img') öğelerini değerlendirmişti.

Konsol Ayarları'nı açın ve geçmişinizdeki ifadelerin gösterilmesini durdurmak için Otomatik Tamamlamada Geçmiş Kullanılsın onay kutusunun işaretini kaldırın.

JavaScript bağlamını seçin

Varsayılan olarak JavaScript Bağlamı açılır listesi, ana dokümanın göz atma bağlamını temsil eden üst olarak ayarlanır.

Sayfanızda <iframe> içine yerleştirilmiş bir reklam olduğunu varsayalım. Reklamın DOM'unu ayarlamak için JavaScript'i sırayla çalıştırmak istiyorsunuz. Bunu yapmak için öncelikle JavaScript Bağlamı açılır listesinden reklamın göz atma bağlamını seçmeniz gerekir.

Nesne özelliklerini inceleme

Konsol, belirttiğiniz bir JavaScript nesnesinin özelliklerinin etkileşimli bir listesini gösterebilir.

Listeye göz atmak için nesne adını Console'a yazıp Enter tuşuna basın.

DOM nesnelerinin özelliklerini incelemek için DOM nesnelerinin özelliklerini görüntüleme bölümündeki adımları uygulayın.

Kendi mülklerinizi ve devralınan mülkleri belirleme

Konsol, kendi nesne özelliklerini önce sıralar ve bunları kalın yazı tipiyle vurgular.

Prototip zincirinden devralınan özellikler normal yazı tipindedir. Konsol, yerleşik nesnelerin ilgili yerel erişimcilerini değerlendirerek bunları nesnenin kendisinde gösterir.

Özel erişimcileri değerlendirme

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

Numaralandırılabilir ve numaralandırılamayan özellikleri belirleme

Numaralandırılabilir özellikler parlak renktedir. Numaralandırılamayan özellikler sessize alınır. Numaralandırılabilir özellikler, for … in döngüsü veya Object.keys() yöntemiyle yinelenebilir.

Sınıf örneklerinin özel özelliklerini belirleme

Console, # önekine sahip sınıf örneklerinin özel özelliklerini belirtir.

Console, sınıf kapsamı dışında değerlendirseniz bile özel özellikleri otomatik olarak tamamlayabilir.

Dahili JavaScript özelliklerini inceleme

ECMAScript gösterimini kullanan Console, JavaScript'e özgü bazı özellikleri çift köşeli parantez içine alır. Kodunuzda bu tür özelliklerle etkileşimde bulunamazsınız. Ancak bunları incelemek yararlı olabilir.

Farklı nesnelerde aşağıdaki dahili özellikleri görebilirsiniz:

• Her nesnenin bir [[Prototype]]'si vardır.
• İlkel sarmalayıcıların [[PrimitiveValue]] özelliği vardır.
• ArrayBuffer nesneleri aşağıdaki özelliklere sahiptir:
  • [[Int8Array]], [[Uint8Array]], [[Int16Array]], [[Int32Array]]
  • [[ArrayBufferByteLength]], [[ArrayBufferData]]
• ArrayBuffer'a özgü özelliklerin yanı sıra, WebAssembly.Memory nesnelerinin [[WebAssemblyMemory]] özelliği vardır.
• Anahtarlı koleksiyonlar (haritalar ve kümeler), anahtarlı girişlerini içeren bir [[Entries]] özelliğine sahiptir.
• Promise nesneleri aşağıdaki özelliklere sahiptir:
  • [[PromiseState]]: beklemede, karşılandı veya reddedildi
  • [[PromiseResult]]: Beklemede ise undefined, yerine getirildiyse <value>, reddedildiyse <reason>
• Proxy nesneleri şu özelliklere sahiptir: [[Handler]] nesnesi, [[Target]] nesnesi ve [[isRevoked]] (açık veya kapalı).

İşlevleri inceleme

JavaScript'te işlevler de özelliklere sahip nesnelerdir. Ancak Konsol'a bir işlev adı yazarsanız DevTools, özelliklerini göstermek yerine bu işlevi çağırır.

JavaScript'e özgü işlev özelliklerini görüntülemek için console.dir() komutunu kullanın.

Fonksiyonlar aşağıdaki özelliklere sahiptir:

• [[FunctionLocation]]. Kaynak dosyadaki 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() hedefi.
  • [[BoundThis]]. this değeridir.
  • [[BoundArgs]]. İşlev bağımsız değişkenleri dizisi.
• Üretici işlevleri, [[IsGenerator]]: true özelliğiyle işaretlenir.
• Üreticiler, yineleyici nesneleri döndürür ve aşağıdaki özelliklere sahiptir:
  • [[GeneratorLocation]]. Kaynak dosyadaki jeneratör tanımını içeren 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

Konsolu 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 ve Konsolu Temizle'yi seçin.
• Konsol'a clear() yazıp Enter tuşuna basın.
• Web sayfanızın JavaScript'inden console.clear() işlevini çağırın.
• Konsol odaklanmış durumdayken Control+L tuşlarına basın.