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 DOM öğeleri dizisini döndürür.

Örneğin, aşağıdakiler 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, öğeleri aramak için kullanılacak bir öğeyi veya Node'u 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 gösterimini 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 ilerleyebilir ve kodda hata ayıklayabilirsiniz.
debug(getData);



Fonksiyonda kesme işlemini durdurmak için undebug(fn) tuşunu 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 tarzı bir listesini gösterir. Bu yöntem, Console API'nin console.dir() yöntemi için bir kısayoldur.

Aşağıdaki örnekte, document.body öğesini 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(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), belirtilen öğeyi veya nesneyi uygun panelde açıp seçer: DOM öğeleri için Nesneler paneli, JavaScript yığın nesneleri için ise Profiller paneli.

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



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

getEventListeners(object)

getEventListeners(object), belirtilen nesneye kaydedilen etkinlik işleyicilerini 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 kaydedilen 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 öğesine kayıtlı iki etkinlik işleyici vardır:



Özelliklerini incelemek 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() 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ın genel ad alanında tanımlandığını varsayarsak (basitlik için), Console'da keys(player) ve values(player) yazıldığında aşağıdaki sonuçlar elde edilir:



monitor(işlev)

Belirtilen işlev çağrıldığında, işlev adı ve çağrıldığında işleve aktarılan bağımsız değişkenleri 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 nesnede 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ş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ğıdaki kod, pencere nesnesindeki hem "yeniden boyutlandırma" hem de "kaydırma" etkinliklerini izlemek için bir dizi tanımlar:
monitorEvents(window, ["resize", &quot;scroll"])

Ayrıca, kullanılabilir etkinlik "türlerinden" birini de belirtebilirsiniz. Bu türler, önceden tanımlanmış etkinlik kümeleriyle eşlenen dizelerdir. 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ğıdakiler Öğeler panelinde şu anda seçili olan bir giriş metni alanındaki tüm ilgili önemli etkinlikler için "key" etkinlik türünü kullanır.
monitorEvents($0, "key");

Aşağıda, metin alanına karakterler yazıldıktan sonraki örnek çıktı verilmiştir:



İzlemeyi durdurmak için unmonitorEvents(object[, events]) simgesini kullanı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 ve sonuçları Performans > Ana parçada gösterir.



Profil oluşturmayı başlatmak için:
profile("Profile 1")

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

Performans > Ana parçadaki sonuç:



Profiller iç içe de yerleştirilebilir. Örneğin, bu işlem herhangi bir sırada çalışır:
profile('A');
profile('B');
profileEnd('A&#39;);
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 öğ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ı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 nesnesi ileterek tablo biçimlendirmesiyle nesne verilerini günlüğe kaydedin.
Bu, console.table() için bir kısayoldur.

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



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

Ayrıca, bir nesnedeki belirli etkinliklerin izlenmesini seçerek 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 (örneğin, konsol çıkışındaki gürültüyü azaltmak için):
monitorEvents($0, "mouse");
unmonitorEvents($0, &quot;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);