Console Utilities API referansı

let images = $$('img');
for (let each of images) {
  console.log(each.src);
}

Seçilen düğümden sonra geçerli dokümanda görünen <img> öğeleri:
let images = $$('img', document.querySelector('.devsite-header-background'));
for (let each of images) {
  console.log(each.src);
}





$x(path [, startNode])

$x(path), belirtilen XPath ifadesiyle eşleşen bir DOM öğeleri dizisi döndürür.

Örneğin, aşağıdaki kod, sayfadaki tüm <p> öğelerini döndürür:
$x("//p")



Aşağıdaki örnekte, <a> öğeleri içeren tüm <p> öğeleri döndürülür:
$x("//p[a]")



Diğer seçici işlevlerine benzer şekilde $x(path), öğe aranacak bir öğeyi veya düğümü belirten isteğe bağlı ikinci bir parametreye (startNode) sahiptir.



clear()

clear(), konsolun geçmişini temizler.
clear();

kopyala(nesne)

copy(object), belirtilen nesnenin dize temsilini panoya kopyalar.
copy($0);

debug(işlev)

Belirtilen işlev çağrıldığında, hata ayıklayıcı çağrılır ve Kaynaklar panelindeki işlevin içinde ara vererek kodda ilerleyip hata ayıklamaya olanak tanır.
debug(getData);



İşlevde durma işlemini durdurmak için undebug(fn) simgesini veya tüm kesme noktalarını devre dışı bırakmak için kullanıcı arayüzünü kullanın.

Kesme noktaları hakkında daha fazla bilgi için Kırma Noktaları ile Kodunuzu Duraklatma bölümüne bakın.

dir(nesne)

dir(object), belirtilen nesnenin tüm özelliklerinin nesne stilinde bir listesini gösterir. Bu yöntem, Console API'nin console.dir() yönteminin bir kısayoludur.

Aşağıdaki örnekte, document.body değerini doğrudan komut satırında değerlendirme ile aynı öğeyi görüntülemek için dir() kullanma arasındaki fark gösterilmektedir:
document.body;
dir(document.body);



Daha fazla bilgi için Console API'deki console.dir() girişine bakın.

dirxml(nesne)

dirxml(object), Öğeler panelinde görüldüğü gibi, belirtilen nesnenin XML gösterimini yazdırır.
Bu yöntem, console.dirxml() yöntemine eşdeğerdir.

denetleme(nesne/işlev)

inspect(object/function), uygun panelde (DOM öğeleri için Öğeler paneli veya JavaScript yığın nesneleri için Profiller paneli) belirtilen öğeyi ya da nesneyi açar ve seçer.

Aşağıdaki örnek, Öğeler panelinde document.body öğesini açar:
inspect(document.body);



İncelenecek bir işlev iletirken işlev, dokümanı incelemeniz için Kaynaklar panelinde açar.

getEventListeners(object)

getEventListeners(object), belirtilen nesneye kaydedilen etkinlik işleyicilerini döndürür. Döndürülen değer, kayıtlı her etkinlik türü için bir dizi içeren bir nesnedir (ör. click veya keydown). Her dizinin üyeleri, her tür için kaydedilen işleyiciyi tanımlayan nesnelerdir. Örneğin, aşağıdaki örnekte document nesnesine kayıtlı tüm etkinlik dinleyicileri listelenmektedir:
getEventListeners(document);



Belirtilen nesneye birden fazla dinleyici kaydedilmişse dizi her dinleyici için bir üye içerir. Aşağıdaki örnekte, click etkinliği için belge öğesine kayıtlı iki etkinlik işleyici bulunmaktadır:



Bu nesnelerin her birini genişleterek özelliklerini keşfedebilirsiniz:



Daha fazla bilgi için Nesne özelliklerini inceleme başlıklı makaleyi inceleyin.

keys(nesne)

keys(object), belirtilen nesneye ait özelliklerin adlarını içeren bir dizi döndürür. Aynı özelliklerin ilişkili değerlerini almak için values() öğesini kullanın.

Örneğin, uygulamanızın aşağıdaki nesneyi tanımladığını varsayalım:
let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

player'ün küresel ad alanında tanımlandığı varsayıldığında (basitlik için), Konsol'da keys(player) ve values(player) yazıldığında aşağıdaki sonuç elde edilir:



monitor(işlev)

Belirtilen işlev çağrıldığında, çağrıldığı sırada işleve iletilen bağımsız değişkenlerle birlikte işlev adını belirten bir mesaj konsola kaydedilir.
function sum(x, y) {
  return x + y;
}
monitor(sum);



İzlemeyi durdurmak için unmonitor(function) simgesini kullanın.

monitorEvents(object [, events])

Belirtilen nesne üzerinde belirtilen etkinliklerden biri gerçekleştiğinde etkinlik nesnesi konsola kaydedilir. İzlenecek tek bir etkinlik, bir etkinlik dizisi veya önceden tanımlanmış bir etkinlik koleksiyonuyla eşlenen genel etkinlik "türlerinden" birini belirtebilirsiniz. Aşağıdaki örneklere bakın.

Aşağıdaki kod, pencere nesnesinde gerçekleşen tüm yeniden boyutlandırma etkinliklerini izler.
monitorEvents(window, "resize");



Aşağıda, pencere nesnesinde hem "yeniden boyutlandır" hem de "kaydırma" etkinliklerini izleyecek bir dizi tanımlanmaktadır:
monitorEvents(window, ["resize", "scroll"])

Kullanılabilir etkinlik "türlerinden" birini de belirtebilirsiniz. Bunlar, önceden tanımlanmış etkinlik kümeleriyle eşlenen dizelerdir. Aşağıdaki tabloda, kullanılabilir etkinlik türleri ve ilişkili etkinlik eşlemeleri listelenmiştir:

Etkinlik türü ve eşleştirilen karşılık gelen etkinlikler
fare
"mousedown", "mouseup", "click", "dblclick", "mousemove", "mouseover", "mouseout", "mousewheel"
anahtar
"keydown", "keyup", "keypress", "textInput"
dokun
"touchstart", "touchmove", "touchend", "touchcancel"
kontrol
"yeniden boyutlandır", "kaydır", "yakınlaştır", "odak", "bulanık", "seç", "değiştir", "gönder", "sıfır"

Örneğin, aşağıdaki ifadede "anahtar" etkinlik türü kullanılmaktadır. Bu tür, şu anda Öğeler panelinde seçili olan bir giriş metin alanındaki tüm ilgili önemli etkinlikleri ifade eder.
monitorEvents($0, "key");

Metin alanına bir karakter yazdıktan sonra gösterilen örnek çıktıyı aşağıda görebilirsiniz:



İzlemeyi durdurmak için unmonitorEvents(object[, events]) simgesini kullanın.

profile([ad]) ve profileEnd([ad])

profile(), isteğe bağlı bir adla JavaScript CPU profili oluşturma oturumu başlatır. profileEnd()
profili tamamlar ve sonuçları Performans > Ana kanalda gösterir.



Profil oluşturmaya başlamak için:
profile("Profile 1")

Profil oluşturmayı durdurmak ve sonuçları Performans > Ana kanalda görmek için:
profileEnd("Profile 1")

Performans > Ana kanalında sonuç:



Profiller iç içe yerleştirilebilir. Örneğin, aşağıdakiler herhangi bir sırada kullanılabilir:
profile('A');
profile('B');
profileEnd('A');
profileEnd('B');



queryObjects(Constructor)

Belirtilen kurucu işleviyle oluşturulan bir nesne dizisi döndürmek için konsoldan queryObjects(Constructor) işlevini çağırın. Örneğin:


queryObjects(Promise). Promise öğesinin tüm örneklerini döndürür.
queryObjects(HTMLElement). Tüm HTML öğelerini döndürür.
queryObjects(foo). Burada foo bir sınıf adıdır. new foo() aracılığıyla oluşturulan tüm nesneleri döndürür.


queryObjects()'ün kapsamı, konsolda şu anda seçili olan yürütme bağlamıdır.

table(data [, columns])

İsteğe bağlı sütun başlıklarıyla bir veri nesnesini iletip tablo biçimlendirmesiyle nesne verilerini günlüğe kaydedin.
Bu, console.table() için bir kısayoldur.

Örneğin, konsolda bir tablo kullanarak adların listesini görüntülemek için şunları yapmanız gerekir:
let names = [
  { firstName: "John", lastName: "Smith" },
  { firstName: "Jane", lastName: "Doe" },
];
table(names);



undebug(function)

undebug(function), belirtilen işlevin hata ayıklama işlemini durdurur. Böylece işlev çağrıldığında hata ayıklayıcı artık çağrılmaz. Bu, debug(fn) ile birlikte kullanılır.
undebug(getData);

unmonitor(işlev)

unmonitor(function), belirtilen işlevin izlenmesini durdurur. Bu, monitor(fn) ile birlikte kullanılır.
unmonitor(getData);

unmonitorEvents(object [, events])

unmonitorEvents(object[, events]), belirtilen nesne ve etkinlikler için etkinliklerin izlenmesini durdurur. Örneğin, aşağıdaki kod, pencere nesnesinde tüm etkinlik izlemeyi durdurur:
unmonitorEvents(window);

Ayrıca, bir nesnenin belirli etkinliklerini seçerek izlemeyi durdurabilirsiniz. Örneğin, aşağıdaki kod şu anda seçili öğedeki tüm fare etkinliklerini izlemeye başlar ve ardından "mousemove" etkinliklerini izlemeyi durdurur (belki de konsol çıkışındaki gürültüyü azaltmak için):
monitorEvents($0, "mouse");
unmonitorEvents($0, "mousemove");

değerler(nesne)

values(object), belirtilen nesneye ait tüm özelliklerin değerlerini içeren bir dizi döndürür.
let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

values(player);