Console Utilities API, genel görevlerin gerçekleştirilmesine yönelik bir dizi kullanışlı işlev içerir: DOM öğelerini seçme ve inceleme, nesneleri sorgulama, verileri okunabilir biçimde görüntüleme, profil aracısını durdurma ve başlatma, DOM etkinliklerini ve işlev çağrılarını izleme ve daha fazlası.
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 aynı değeri içeren $_ özelliği değerlendirilir:
Sonraki örnekte, değerlendirilen ifade başlangıçta bir ad dizisi içerir. Dizinin uzunluğunu bulmak için $_.length değerlendirilir. $_ içinde depolanan değer, en son değerlendirilen ifade olacak şekilde değişir: 4:
0 $ - 4 $
$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 geçmişe dönük referans olarak çalışır. $0, en son seçilen öğeyi veya JavaScript nesnesini döndürür; $1, en son seçilen ikinci öğeyi ve bu şekilde devam eder.
Aşağıdaki örnekte Öğeler panelinde bir img öğesi seçilmiştir. Konsol çekmecesinde $0 değerlendirilmiş ve aynı öğeyi gösterir:
Aşağıdaki resimde, aynı sayfada seçilmiş 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 referansı döndürür. Bir bağımsız değişkenle çağrıldığında bu işlev, document.querySelector() işlevinin kısayoludur.
Aşağıdaki örnek, dokümandaki ilk <img> öğesine bir referans döndürür:
Döndürülen sonucu sağ tıklayın ve DOM'da bulmak için Öğe Panelinde Göster'i seçin ya da sayfada göstermek için Görünüm'e gidin.
Aşağıdaki örnek, geçerli olarak seçili öğeye bir referans döndürür ve öğenin src özelliğini görüntüler:
Bu işlev ayrıca, öğelerin aranacağı bir "öğe" veya Düğüm belirten ikinci bir parametreyi (startNode) destekler. document, bu parametrenin varsayılan değeridir.
Aşağıdaki örnek, devsite-header-background öğesinin bir alt öğesi olan ilk img öğesine bir referans döndürür ve bu öğenin src özelliğini gösterir:
$$(selector [, startNode])
Aşağıdaki örnekte $$(selector), 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
Seçilen Düğümden sonra geçerli dokümanda görünen tüm <img> öğelerinin bir dizisini oluşturmak için 
l10n-placeholder3():
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 işlem 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ğı bir öğeyi veya Düğümü belirten isteğe bağlı ikinci bir parametreye (startNode) sahiptir.
temizle()
clear(), konsolunun 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 kodda ilerleyip hata ayıklaması için Kaynaklar panelindeki işlevin içinde kesilir.
debug(getData);
İşlevde bozulmayı durdurmak için undebug(fn) işlevini 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 Kodunuzu Kesme Noktalarıyla Duraklatma bölümüne bakın.
dir(object)
dir(object), belirtilen tüm nesnenin özelliklerinin nesne tarzında bir listesini görüntüler. Bu yöntem, Console API'nin console.dir() yönteminin kısayoludur.
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(nesne)
dirxml(object), belirtilen nesnenin XML temsilini (Öğeler panelinde göründüğü gibi) 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çar ve 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 için bir işlev iletirken işlev, incelemeniz için dokümanı Kaynaklar panelinde açar.
getEventListeners(object)
getEventListeners(object), belirtilen nesnede kayıtlı etkinlik işleyicilerini döndürür. Döndürülen değer, kaydedilen her etkinlik türü (örneğin, click veya keydown) için dizi içeren bir nesnedir. Her dizinin üyeleri, her tür için kaydedilen işleyiciyi tanımlayan nesnelerdir. Örneğin, aşağıda belge nesnesine kayıtlı tüm etkinlik işleyicileri listelenmektedir:
getEventListeners(document);
Belirtilen nesnede birden fazla dinleyici kayıtlıysa dizi, her işleyici için bir üye içerir. Aşağıdaki örnekte, click etkinliği için belge öğesine kaydedilmiş iki etkinlik işleyici vardır:
Özelliklerini keşfetmek için bu nesnelerin her birini daha fazla genişletebilirsiniz:
Daha fazla bilgi için Nesne özelliklerini inceleme bölümüne bakın.
anahtarlar(nesne)
keys(object), belirtilen nesneye ait olan özelliklerin adlarını içeren bir dizi döndürür. Aynı mülklerin ilişkili değerlerini almak için values() değerini 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 işlevinin genel ad alanında tanımlandığı varsayıldığında (basitlik açısından), Konsol'a keys(player) ve values(player) yazmak aşağıdaki sonucu verir:
monitor(function)
Belirtilen işlev çağrıldığında, konsola işlev adını belirten bir mesaj kaydedilir. Mesajda, işlev çağrıldığında işleve iletilen bağımsız değişkenlerle birlikte işlev adı belirtilir.
function sum(x, y) {
return x + y;
}
monitor(sum);
İzlemeyi durdurmak için unmonitor(function) aracını kullanın.
monitorEvents(object [, events])
Belirtilen etkinliklerden biri belirtilen nesnede gerçekleştiğ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 göz atın.
Aşağıdaki özellik, pencere nesnesindeki tüm yeniden boyutlandırma etkinliklerini izler.
monitorEvents(window, "resize");
Aşağıda, pencere nesnesindeki "resize" ve "scroll" etkinliklerini izlemek üzere bir dizi tanımlanır:
monitorEvents(window, ["resize", "scroll"])
Ayrıca, kullanılabilir etkinlik "türlerinden" birini (önceden tanımlanmış etkinlik gruplarıyla eşlenen dizeler) belirtebilirsiniz. Aşağıdaki tabloda, kullanılabilir etkinlik türleri ve ilişkili etkinlik eşlemeleri listelenmiştir:
| Etkinlik türü ve ilgili eşlenmiş etkinlikler | |
|---|---|
| fare | "mousedown", "mouseup", "click", "dblclick", "mousemove", "mouseover", "mouseout", "mousewheel" |
| anahtar | "keydown", "keyup", "keypress", "textInput" |
| dokun | "touchstart", "dokunmatik taşıma", "dokunma işlemi", "dokunmatik iptal" |
| kontrol | "yeniden boyutlandır", "kaydır", "yakınlaştır", "odakla", "bulanıklaştır", "seç", "değiştir", "gönder", "sıfırla" |
Örneğin, aşağıda "key" etkinlik türü, halihazırda Öğeler panelinde seçili olan bir giriş metni alanındaki ilgili tüm önemli etkinlikleri kullanır.
monitorEvents($0, "key");
Metin alanına bir karakter yazıldıktan sonra elde edilen örnek çıktı aşağıda verilmiştir:
İzlemeyi durdurmak için unmonitorEvents(object[, events]) aracını 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 Performans > Ana kanaldaki sonuçları görmek için:
profileEnd("Profile 1")
Performans > Ana kanaldaki sonuç:
Ana parça." width="800" height="606">
Profiller iç içe de yerleştirilebilir. Örneğin, bu işlev herhangi bir sırada çalışır:
profile('A');
profile('B');
profileEnd('A');
profileEnd('B');
queryObjects(Constructor)
Belirtilen oluşturucuyla oluşturulan bir nesne dizisi 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(veriler [, sütunlar])
İsteğe bağlı sütun başlıklarıyla bir veri nesnesini geçirerek nesne verilerini tablo biçimlendirmesiyle 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);
undebug(işlev)
undebug(function), belirtilen işlevde hata ayıklama işlemini durdurur. Böylece, işlev çağrıldığında hata ayıklayıcı artık çağrılmaz. Bu öğe debug(fn) ile uyumlu olarak kullanılır.
undebug(getData);
unmonitor(function)
unmonitor(function), belirtilen işlevin izlenmesini durdurur. Bu liste, monitor(fn) ile uyumlu şekilde kullanılır.
unmonitor(getData);
unmonitorEvents(object [, events])
unmonitorEvents(object[, events]), belirtilen nesne ve etkinlikler için etkinlikleri izlemeyi durdurur. Örneğin, aşağıda pencere nesnesindeki tüm etkinlik izleme durdurulur:
unmonitorEvents(window);
Ayrıca, bir nesnedeki belirli etkinlikleri izlemeyi seçerek de durdurabilirsiniz. Örneğin, aşağıdaki kod seçili öğedeki tüm fare etkinliklerini izlemeye başlar ve ardından "mousemove" etkinliklerini izlemeyi durdurur (belki konsol çıkışındaki paraziti 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);
