Console Utilities API referansı

Kayce Baskler
Kayce Baskçalar
Twitter GitHub Glitch
Sofya Emelianova
Sofya Emelianova
GitHub

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:

$_ en son değerlendirilen ifadedir.

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:

Yeni komutlar değerlendirildiğinde $_ değişir.

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:

0 ABD doları örneği.

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:

$1 örneği.

$(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:

$(&#39;img&#39;).

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:

$(&#39;img&#39;).src örneği.

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:

$(&#39;img&#39;, div).src örneği.

$$(selector [, startNode])

$$(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.

Aşağıdaki örnekte $$() 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 <span class= kullanımı örneğil10n-placeholder3():


let images = $$('img', document.querySelector('.devsite-header-background'));
for (let each of images) {
  console.log(each.src);
}



Belgede Select div öğesinden sonra görünen tüm resimleri seçmek için $() ve bu resimlerin kaynaklarını göstermeyi gösteren örnek.





$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")



XPath seçici kullanımını gösteren örnek.



Aşağıdaki örnek, <a> öğelerini içeren tüm <p> öğelerini döndürür:


$x("//p[a]")



Daha karmaşık bir XPath seçici kullanmayı gösteren örnek.



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.



startNode ile bir XPath seçicinin kullanımını gösteren örnek.



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



Debugger() ile bir işlevin içinde bozulma.



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



dir() işleviyle ve olmadan document.body kaydı yapılıyor.



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



Bir öğeyi inspect() ile inceleme.



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



getEventListeners() kullanma çıktısı.



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:



Birden fazla dinleyici.



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



İşleyici nesnesinin genişletilmiş görünümü.



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:



Keys() ve value() yöntemlerine örnek.



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



Monitoring() yöntemi örneği.



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



İzleme penceresi yeniden boyutlandırma etkinlikleri.



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:



Önemli etkinlikleri izleme.



İ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üm Promise ö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 ö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);



table() yöntemi örneği.



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



Değerlerin sonucu(oynatıcı).