Console Utilities API referansı

let images = $$('img');
for (let each of images) {
  console.log(each.src);
}
 kullanılmaktadır.
Seçili düğümden sonra mevcut 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 DOM öğelerinden oluşan bir dizi 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> öğelerini içeren tüm <p> öğeleri döndürülür:
$x("//p[a]")



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



clear()

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

copy(object)

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

debug(function)

Belirtilen işlev çağrıldığında hata ayıklayıcı başlatılır ve Kaynaklar panelindeki işlevin içinde duraklatılır. Bu sayede kodda adım adım ilerleyip kodda hata ayıklayabilirsiniz.
debug(getData);



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

Kesme noktaları hakkında daha fazla bilgi için Pause Your Code With Breakpoints (Kesme noktalarıyla kodunuzu duraklatma) başlıklı makaleyi inceleyin.

dir(object)

dir(object), belirtilen nesnenin tüm özelliklerinin nesne stili listesini gösterir. Bu yöntem, Console API'nin console.dir() yöntemi için bir kısayoldur.

Aşağıdaki örnekte, document.body öğesinin doğrudan komut satırında değerlendirilmesi ile aynı öğeyi görüntülemek için dir() kullanılması 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(object)

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.

inspect(object/function)

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

Aşağıdaki örnekte, Öğeler panelinde document.body açılır:
inspect(document.body);



İncelenecek bir işlev geçirildiğinde, işlev dokümanı incelemeniz için Kaynaklar panelinde açar.

getEventListeners(object)

getEventListeners(object), belirtilen nesneye kayıtlı etkinlik işleyicileri döndürür. Dönüş değeri, her kayıtlı etkinlik türü için bir dizi içeren bir nesnedir (ör. click veya keydown). Her dizinin üyeleri, her tür için kayıtlı dinleyiciyi açıklayan nesnelerdir. Örneğin, aşağıda document nesnesine kaydedilen tüm etkinlik işleyiciler listelenmiştir:
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 öğesinde kayıtlı iki etkinlik işleyici vardır:



Özelliklerini keşfetmek için bu nesnelerin her birini daha da genişletebilirsiniz:



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

keys(object)

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() yöntemini 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 öğesinin global ad alanında tanımlandığını varsayarsak (basitlik açısından) 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, konsola işlev adını ve çağrıldığında işleve iletilen bağımsız değişkenleri gösteren bir mesaj kaydedilir.
function sum(x, y) {
  return x + y;
}
monitor(sum);



İzlemeyi durdurmak için unmonitor(function) tuşlarına basın.

monitorEvents(object [, events])

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

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



Aşağıda, pencere nesnesindeki hem "resize" hem de "scroll" etkinliklerini izlemek için bir dizi tanımlanmıştır:
monitorEvents(window, ["resize", "scroll"])

Ayrıca, önceden tanımlanmış etkinlik gruplarıyla eşlenen dizeler olan mevcut etkinlik "türlerinden" birini de belirtebilirsiniz. Aşağıdaki tabloda, kullanılabilen etkinlik türleri ve bunlarla ilişkili etkinlik eşlemeleri listelenmiştir:

Etkinlik türü ve karşılık gelen eşlenmiş etkinlikler
fare
"mousedown", "mouseup", "click", "dblclick", "mousemove", "mouseover", "mouseout", "mousewheel"
anahtar
"keydown", "keyup", "keypress", "textInput"
dokun
"touchstart", "touchmove", "touchend", "touchcancel"
kontrol
"resize", "scroll", "zoom", "focus", "blur", "select", "change", "submit", "reset"

Örneğin, aşağıda Öğeler panelinde şu anda seçili olan bir giriş metni alanındaki tüm ilgili önemli etkinlikler için "key" etkinlik türü kullanılmaktadır.
monitorEvents($0, "key");

Metin alanına karakter yazıldıktan sonraki örnek çıkış aşağıda verilmiştir:



İzlemeyi durdurmak için unmonitorEvents(object[, events]) tuşlarına basın.

profile([name]) ve profileEnd([name])

profile(), isteğe bağlı bir adla JavaScript CPU profili oluşturma oturumu başlatır. profileEnd()
Profili tamamlar, Performans panelini otomatik olarak açar ve sonuçları Ana parçada gösterir.



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

Profillendirmeyi durdurmak ve sonuçları Performans > Ana izinde görmek için:
profileEnd("Profile 1")

Performans > Ana parçada sonuç:



Profiller iç içe de yerleştirilebilir. Örneğin, aşağıdaki komutlar herhangi bir sırayla çalışır:
profile('A');
profile('B');
profileEnd('A');
profileEnd('B');



queryObjects(Constructor)

Belirtilen oluşturucuyla oluşturulan nesneler dizisini döndürmek için konsoldan queryObjects(Constructor) işlevini çağırın. Örneğin:


queryObjects(Promise). Promise dizesinin tüm örneklerini döndürür.
queryObjects(HTMLElement): Tüm HTML öğelerini döndürür.
queryObjects(foo) (foo, sınıf adıdır). new foo() aracılığıyla örneklendirilen tüm nesneleri döndürür.


queryObjects() 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 birlikte bir veri nesnesi ileterek nesne verilerini tablo biçimlendirmesiyle günlüğe kaydedin.
Bu, console.table() için bir kısayoldur.

Örneğin, konsoldaki bir tabloyu kullanarak ad listesi görüntülemek için şunları yaparsınız:
let names = [
  { firstName: "John", lastName: "Smith" },
  { firstName: "Jane", lastName: "Doe" },
];
table(names);



Günlüğe kaydedilmiş bir tabloyu biçimlendirilmiş Markdown tablosu veya CSV verileri olarak panonuza kopyalamak için Konsol'daki tabloyu sağ tıklayın ve bağlam menüsünden ilgili kopyalama seçeneğini belirleyin.

undebug(function)

undebug(function), belirtilen işlevin hata ayıklamasını 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(function)

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 etkinlikleri izlemeyi durdurur. Örneğin, aşağıdaki kod pencere nesnesindeki tüm etkinlik izlemeyi durdurur:
unmonitorEvents(window);

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

values(object)

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);