Zengin Çıktı

Web konsolu nesneleri yazdırdığında, sadece nesnenin adından daha zengin bir bilgi kümesi içerir. Bilhassa:

  • belirli tipler için ek bilgi sağlar
  • nesnenin özelliklerinin detaylı incelenmesini sağlar
  • DOM öğeleri için daha zengin bilgiler sağlar ve bunları Denetçi'de seçmenize olanak tanır

Türe Özgü Zengin Çıktı

Web konsolu aşağıdakiler dahil birçok nesne türü için zengin çıktı sağlar:

Object
Array
Date
Promise

RegExp
Window
Document
Element
Event

Nesne Özelliklerini İnceleme

Bir nesne konsolda günlüğe kaydedildiğinde yanında genişletilebileceğini belirten dik bir üçgen bulunur. Üçgene tıkladığınızda nesne içeriğini gösterecek şekilde genişletecektir:

Firefox 67'den başlayarak (şu anda Firefox geliştirici'de kullanılabilir) konsolda görüntülenen nesnelerde gezinmek için klavyenizdeki ok tuşlarını kullanabilirsiniz. Sağ ok tuşu bir nesnenin ayrıntılarını açar ve sol ok tuşu açık nesneleri kapatır.

İstek ayrıntılarının incelenmesi

Nesne ayrıntılarını incelemeye benzer şekilde, you can see the details about a network request directly in the console. İsteğin yanındaki oka tıklayın; Ağ İzleyicisi aracındaki Başlıklar paneline eşdeğer olan bir detay paneli açılacaktır.

Çıktıyı panoya aktar

Konsol penceresinde çıktı aldığınızda, çıktıyı sağ tıklayıp Görünür mesajları panoya aktar seçeneğini seçerek panoya kaydedebilirsiniz:

Bu çıktının tümünü panoya kopyalar. Sonrasında bir belgeye yapıştırabilirsiniz. Çıktı şöyle görünecektir:

console.log(todoList)
Array(4) [ {…}, {…}, {…}, {…} ]
debugger eval code:1:9
undefined

Diziler gibi nesneleri de genişletirseniz, biraz farklı içerik elde edersiniz. Örneğin, yukarıdaki listedeki diziyi genişleterek aşağıdakileri alıyorum:

console.log(todoList)
(4) […]
​
0: Object { status: "Done", description: "Morning Pages", dateCreated: 1552404478137 }
​
1: Object { status: "In Progress", description: "Refactor styles", dateCreated: 1552404493169 }
​
2: Object { status: "To Do", description: "Create feedback form", dateCreated: 1552404512630 }
​
3: Object { status: "To Do", description: "Normalize table", dateCreated: 1552404533790 }
​
length: 4
​
<prototype>: Array []
debugger eval code:1:9
undefined

DOM düğümlerini vurgulama ve inceleme

Fareyi konsol çıktısındaki herhangi bir DOM öğesinin üzerine getirdiğinizde sayfada vurgulanır:

Yukarıdaki ekran görüntüsünde, konsol çıktısındaki düğümün yanında mavi renkli bir "hedef" simgesi göreceksiniz: seçili düğümü seçerek denetçiye geçmek için tıklayın.