Console Utilities API, sık kullanılan görevlerin gerçekleştirilmesine yönelik kolaylık işlevlerinin bir koleksiyonunu içerir: DOM öğelerini seçip inceleme, nesneleri sorgulama, verileri okunabilir biçimde görüntüleme, profil oluşturucuyu durdurma ve başlatma, DOM etkinliklerini ve işlev çağrılarını izleme ve daha pek çok işlem.
console.log(), console.error() ve diğer console.* işlevlerini mi arıyorsunuz? Console API Referansı'nı inceleyin.
$_
$_, en son değerlendirilen ifadenin değerini döndürür.
Aşağıdaki örnekte basit bir ifade (2 + 2) değerlendirilmiştir. Daha sonra, $_ özelliği aynı değeri içeren değerlendirilir:
Sonraki örnekte, değerlendirilen ifade başlangıçta bir ad dizisi içerir. Dizinin uzunluğunu bulmak için $_.length değerlendirildiğinde, $_ içinde depolanan değer en son değerlendirilen ifade olacak şekilde değişir. 4:
0-4 TL
$0, $1, $2, $3 ve $4 komutları, Öğeler panelinde incelenen son beş DOM öğesine veya Profiller panelinde seçilen son beş JavaScript yığın nesnesine yönelik geçmişe dönük bir referans olarak çalışır. $0, en son seçilen öğeyi veya JavaScript nesnesini döndürür, $1 ise en son seçilen ikinci öğeyi veya JavaScript nesnesini döndürür ve bu şekilde devam eder.
Aşağıdaki örnekte Öğeler panelinde bir img öğesi seçilmiştir. Konsol çekmecesinde $0 değerlendirilir ve aynı öğe gösterilir:
Aşağıdaki resimde, aynı sayfada seçilmiş olan farklı bir öğe gösterilmektedir. $0 artık yeni seçilen öğeyi belirtirken $1 daha önce seçilen öğeyi döndürür:
$(seçici [, startNode])
$(selector), belirtilen CSS seçiciye sahip ilk DOM öğesine başvuruyu döndürür. Tek bağımsız değişkenle birlikte çağrıldığında bu işlev, document.querySelector() işlevinin kısayoludur.
Aşağıdaki örnek, dokümandaki ilk <img> öğesine bir başvuru döndürür:
Döndürülen sonucu sağ tıklayın ve DOM'de bulmak için Öğeler Panelinde Göster'i veya sayfada göstermek için Görünüme doğru kaydır'ı seçin.
Aşağıdaki örnek, şu anda seçili olan öğeye bir başvuru döndürür ve öğenin src özelliğini görüntüler:
Bu işlev, öğelerin aranacağı "öğe" veya düğüm belirten ikinci bir parametreyi (startNode) de destekler. Bu parametrenin varsayılan değeri document şeklindedir.
Aşağıdaki örnek, devsite-header-background alt öğesi olan ilk img öğesine bir başvuru döndürür ve bu öğenin src özelliğini görüntüler:
$$(selector [, startNode])
Aşağıdaki örnekte $$(seçici), belirtilen CSS seçiciyle eşleşen bir öğe dizisi döndürür. Bu komut, Array.from(document.querySelectorAll()) çağrısına eşdeğerdir.
$$() to create an array of all <img> elements in the current document
and displays the value of each element's src property:let images = $$('img');
for (let each of images) {
console.log(each.src);
}
kullanılmıştır
l10n-placeholder3() ile oluşturulan Düğüm'den sonra geçerli dokümanda görünen tüm <img> öğelerinden oluşan bir dizi oluşturun:
let images = $$('img', document.querySelector('.devsite-header-background'));
for (let each of images) {
console.log(each.src);
}
$x(yol [, 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 örnek, <a> öğelerini içeren tüm <p> öğelerini döndürür:
$x("//p[a]")
Diğer seçici işlevlerine benzer şekilde $x(path), öğelerin aranacağı öğeyi veya Düğümü belirten isteğe bağlı bir ikinci parametreye (startNode) sahiptir.
clear()
clear(), konsolun geçmişini temizler.
clear();
kopyala(nesne)
copy(object), belirtilen nesnenin dize gösterimini panoya kopyalar.
copy($0);
hata ayıklama(işlev)
Belirtilen işlev çağrıldığında, hata ayıklayıcı çağrılır ve Kaynaklar panelindeki işlevin içinde bozularak kodda gezinme ve hata ayıklama işlemine olanak tanır.
debug(getData);
İşlevin bozulmasını durdurmak için undebug(fn) öğesini kullanın veya tüm ayrılma 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(object)
dir(object), belirtilen tüm nesnenin özelliklerinin nesne stili listesini görüntüler. Bu yöntem, Console API'nin console.dir() yönteminin bir kısayoludur.
Aşağıdaki örnekte, doğrudan komut satırından document.body değerinin 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(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.
inspect(object/function)
inspect(object/function), belirtilen öğeyi veya nesneyi uygun panelde açıp seçer: DOM öğeleri için Öğeler paneli veya JavaScript yığın nesneleri için Profiller paneli.
Aşağıdaki örnek, Öğeler panelinde document.body öğesini açar:
inspect(document.body);
İncelemek üzere bir işlevi iletirken işlev, incelemeniz için dokümanı Kaynaklar panelinde açar.
getEventListeners(object)
getEventListeners(object), belirtilen nesnede kayıtlı etkinlik işleyicileri döndürür. Döndürülen değer, her kayıtlı etkinlik türü (örneğin, click veya keydown) için bir dizi içeren nesnedir. Her dizinin üyeleri, her tür için kaydedilen işleyiciyi tanımlayan nesnelerdir. Örneğin, aşağıda belge nesnesine kaydedilen tüm etkinlik işleyiciler listelenmektedir:
getEventListeners(document);
Belirtilen nesnede birden fazla işleyici kayıtlıysa dizi, her işleyici 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 daha fazla genişleterek özelliklerini keşfedebilirsiniz:
Daha fazla bilgi için Nesne özelliklerini inceleme konusuna bakın.
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() işlevini 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 genel ad alanında tanımlandığı varsayıldığında (basit olması için) Konsol'a keys(player) ve values(player) yazılması şu sonucu verir:
monitor(function)
Belirtilen işlev çağrıldığında, işlev adını ve çağrı çağrıldığında işleve iletilen bağımsız değişkenleri gösteren bir mesaj konsola kaydedilir.
function sum(x, y) {
return x + y;
}
monitor(sum);
İzlemeyi durdurmak için unmonitor(function) öğesini kullanın.
monitorEvents(object [, events])
Belirtilen nesnede, belirtilen etkinliklerden biri meydana geldiğinde Etkinlik nesnesi konsolda günlüğe 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ğıda, pencere nesnesindeki tüm yeniden boyutlandırma etkinlikleri izlenir.
monitorEvents(window, "resize");
Aşağıda, pencere nesnesinde hem "yeniden boyutlandırma" hem de "kaydırma" etkinliklerini izleyecek bir dizi tanımlanı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 karşılık gelen eşlenen 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ğıda şu anda Öğeler panelinde seçili olan bir giriş metni alanında karşılık gelen tüm önemli etkinlikler "anahtar" etkinlik türü kullanılmaktadır.
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]) öğesini kullanın.
profile([ad]) ve profileEnd([ad])
profile(), isteğe bağlı bir adla JavaScript CPU profil 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 kanaldaki sonuç:
Ana parça." genişlik="800" yükseklik="606">
Profiller iç içe de yerleştirilebilir. Örneğin, aşağıdaki komut herhangi bir sırada kullanılabilir:
profile('A');
profile('B');
profileEnd('A');
profileEnd('B');
queryObjects(Constructor)
Belirtilen oluşturucuyla oluşturulan bir nesne dizisini döndürmek için konsoldan queryObjects(Constructor) çağrısı yapın. Örneğin:
queryObjects(Promise). TümPromiseörneklerini döndürür.queryObjects(HTMLElement). Tüm HTML öğelerini döndürür.queryObjects(foo); buradafoobir sınıf adıdır.new foo()aracılığıyla örneklenen tüm nesneleri döndürür.
queryObjects() kapsamı, konsolda seçili olan yürütme bağlamıdır.
tablo(veri [, sütunlar])
İ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ı yaparsınız:
let names = [
{ firstName: "John", lastName: "Smith" },
{ firstName: "Jane", lastName: "Doe" },
];
table(names);
hata ayıklama(işlev)
undebug(function), işlev çağrıldığında hata ayıklayıcının artık çağrılmaması için belirtilen işlevde hata ayıklama işlemini durdurur. Bu, debug(fn) ile uyum olarak kullanılır.
undebug(getData);
unmonitor(işlev)
unmonitor(function), belirtilen işlevin izlenmesini durdurur. Bu, monitor(fn) ile uyumlu olarak kullanılır.
unmonitor(getData);
unmonitorEvents(object [, events])
unmonitorEvents(object[, events]), belirtilen nesne ve etkinlikler için etkinlikleri izlemeyi durdurur. Örneğin, aşağıdakiler pencere nesnesindeki tüm etkinlik izlemeyi durdurur:
unmonitorEvents(window);
Bir nesnedeki belirli etkinlikleri izlemeyi seçerek de durdurabilirsiniz. Örneğin, aşağıdaki kod seçili olan öğedeki tüm fare etkinliklerini izlemeye başlar ve daha sonra "mousemove" etkinliklerini izlemeyi durdurur (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);
