Referensi Console Utilities API

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

Console Utilities API berisi kumpulan fungsi praktis untuk melakukan tugas umum: memilih dan memeriksa elemen DOM, membuat kueri objek, menampilkan data dalam format yang mudah dibaca, menghentikan dan memulai profiler, memantau peristiwa DOM dan panggilan fungsi, dan lainnya.

Mencari console.log(), console.error(), dan fungsi console.* lainnya? Lihat Referensi Console API.

$_

$_ menampilkan nilai ekspresi yang paling baru dievaluasi.

Dalam contoh berikut, ekspresi sederhana (2 + 2) dievaluasi. Properti $_ kemudian dievaluasi, yang berisi nilai yang sama:

$_ adalah ekspresi yang terakhir dievaluasi.

Dalam contoh berikutnya, ekspresi yang dievaluasi awalnya berisi array nama. Mengevaluasi $_.length untuk menemukan panjang array, nilai yang disimpan dalam $_ berubah menjadi ekspresi yang dievaluasi terbaru, 4:

$_ berubah saat perintah baru dievaluasi.

$0 - $4

Perintah $0, $1, $2, $3, dan $4 berfungsi sebagai referensi historis ke lima elemen DOM terakhir (termasuk elemen semu seperti ::before atau ::after) yang diperiksa dalam panel Elements atau lima objek heap JavaScript terakhir yang dipilih di panel Profiles. $0 menampilkan elemen atau objek JavaScript yang paling baru dipilih, $1 menampilkan elemen atau objek JavaScript yang paling baru dipilih kedua, dan seterusnya.

Dalam contoh berikut, elemen img dipilih di panel Elements. Di panel Console , $0 telah dievaluasi dan menampilkan elemen yang sama:

Contoh $0.

Gambar di bawah menunjukkan elemen lain yang dipilih di halaman yang sama. $0 kini merujuk ke elemen yang baru dipilih, sedangkan $1 menampilkan elemen yang sebelumnya dipilih:

Contoh $1.

$(selector [, startNode])

$(selector) menampilkan referensi ke elemen DOM pertama dengan pemilih CSS yang ditentukan. Saat dipanggil dengan satu argumen, fungsi ini adalah pintasan untuk fungsi document.querySelector().

Contoh berikut menampilkan referensi ke elemen <img> pertama dalam dokumen:

Contoh $('img').

Klik kanan hasil yang ditampilkan dan pilih Reveal in Elements Panel untuk menemukannya di DOM, atau Scroll in to View untuk menampilkannya di halaman.

Contoh berikut menampilkan referensi ke elemen yang saat ini dipilih dan menampilkan properti src:

Contoh $('img').src.

Fungsi ini juga mendukung parameter kedua, startNode, yang menentukan 'elemen' atau Node tempat untuk menelusuri elemen. Nilai default parameter ini adalah document.

Contoh berikut menampilkan referensi ke elemen img pertama yang merupakan turunan dari devsite-header-background, dan menampilkan properti src:

Contoh $('img', div).src.

$$(selector [, startNode])

$$(selector) menampilkan array elemen yang cocok dengan pemilih CSS yang diberikan. Perintah ini setara dengan memanggil Array.from(document.querySelectorAll()).

Contoh berikut menggunakan $$() 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);
}


Contoh penggunaan<!-- notranslate l10n-placeholder: l10n-placeholder3 -->()</code> untuk membuat array dari semua <code translate=Elemen<img>
yang muncul dalam dokumen saat ini setelah Node yang dipilih:


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



Contoh penggunaan $() untuk memilih semua gambar yang muncul setelah elemen div yang dipilih dalam dokumen dan menampilkan sumbernya.





$x(path [, startNode])



$x(path) menampilkan array elemen DOM yang cocok dengan ekspresi XPath yang diberikan.



Misalnya, kode berikut menampilkan semua elemen <p> di halaman:


$x("//p")



Contoh penggunaan pemilih XPath.



Contoh berikut menampilkan semua elemen <p> yang berisi elemen <a>:


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



Contoh penggunaan pemilih XPath yang lebih rumit.



Mirip dengan fungsi pemilih lainnya, $x(path) memiliki parameter kedua opsional, startNode, yang menentukan elemen atau Node tempat untuk menelusuri elemen.



Contoh penggunaan pemilih XPath dengan startNode.



clear()



clear() menghapus histori konsol.


clear();



copy(object)



copy(object) menyalin representasi string dari objek yang ditentukan ke papan klip.


copy($0);



debug(function)



Saat fungsi yang ditentukan dipanggil, debugger akan dipanggil dan berhenti di dalam fungsi pada panel Sources yang memungkinkan Anda menelusuri kode dan melakukan debug.


debug(getData);



Berhenti di dalam fungsi dengan debug().



Gunakan undebug(fn) untuk berhenti berhenti pada fungsi, atau gunakan UI untuk menonaktifkan semua titik henti sementara.



Untuk mengetahui informasi selengkapnya tentang titik henti sementara, lihat Menjeda Kode dengan Titik Henti Sementara.



dir(object)



dir(object) menampilkan listingan gaya objek dari semua properti objek yang ditentukan. Metode ini adalah pintasan untuk metode console.dir() Console API.



Contoh berikut menunjukkan perbedaan antara mengevaluasi document.body secara langsung di command line, dan menggunakan dir() untuk menampilkan elemen yang sama:


document.body;
dir(document.body);



Mencatat document.body ke dalam log dengan dan tanpa fungsi dir().



Untuk mengetahui informasi selengkapnya, lihat entri console.dir() di Console API.



dirxml(object)



dirxml(object) mencetak representasi XML dari objek yang ditentukan, seperti yang terlihat di panel Elements.
Metode ini setara dengan metode console.dirxml().



inspect(object/function)



inspect(object/function) membuka dan memilih elemen atau objek yang ditentukan di panel yang sesuai: panel Elements untuk elemen DOM atau panel Profiles untuk objek heap JavaScript.



Contoh berikut membuka document.body di panel Elements:


inspect(document.body);



Memeriksa elemen dengan inspect().



Saat meneruskan fungsi untuk diperiksa, fungsi tersebut akan membuka dokumen di panel Sources agar Anda dapat memeriksanya.



getEventListeners(object)



getEventListeners(object) menampilkan pemroses peristiwa yang terdaftar di objek yang ditentukan. Nilai yang ditampilkan adalah objek yang berisi array untuk setiap jenis peristiwa yang terdaftar (misalnya, click atau keydown). Anggota setiap array adalah objek yang menjelaskan pemroses yang terdaftar untuk setiap jenis. Misalnya, kode berikut mencantumkan semua pemroses peristiwa yang terdaftar di objek dokumen:


getEventListeners(document);



Output penggunaan getEventListeners().



Jika lebih dari satu pemroses terdaftar di objek yang ditentukan, array akan berisi anggota untuk setiap pemroses. Dalam contoh berikut, ada dua pemroses peristiwa yang terdaftar di elemen dokumen untuk peristiwa click:



Beberapa pemroses.



Anda dapat memperluas setiap objek ini lebih lanjut untuk menjelajahi propertinya:



Tampilan objek pemroses yang diperluas.



Untuk mengetahui informasi selengkapnya, lihat Memeriksa properti objek.



keys(object)



keys(object) menampilkan array yang berisi nama properti milik objek yang ditentukan. Untuk mendapatkan nilai terkait dari properti yang sama, gunakan values().



Misalnya, aplikasi Anda menentukan objek berikut:


let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};



Dengan asumsi player ditentukan dalam namespace global (untuk mempermudah), mengetik keys(player) dan
values(player) di Console akan menghasilkan hal berikut:



Contoh metode keys() dan values().



monitor(function)



Saat fungsi yang ditentukan dipanggil, pesan akan dicatat ke konsol yang menunjukkan nama fungsi beserta argumen yang diteruskan ke fungsi saat dipanggil.


function sum(x, y) {
  return x + y;
}
monitor(sum);



Contoh metode monitor().



Gunakan unmonitor(function) untuk berhenti memantau.



monitorEvents(object [, events])



Saat salah satu peristiwa yang ditentukan terjadi pada objek yang ditentukan, objek Peristiwa akan dicatat ke konsol. Anda dapat menentukan satu peristiwa untuk dipantau, array peristiwa, atau salah satu peristiwa generik "jenis" yang dipetakan ke kumpulan peristiwa yang telah ditentukan. Lihat contohnya di bawah.



Kode berikut memantau semua peristiwa pengubahan ukuran pada objek jendela.


monitorEvents(window, "resize");



Memantau peristiwa pengubahan ukuran jendela.



Kode berikut menentukan array untuk memantau peristiwa "resize" dan "scroll" pada objek jendela:


monitorEvents(window, ["resize", "scroll"])



Anda juga dapat menentukan salah satu "jenis" peristiwa yang tersedia, string yang dipetakan ke kumpulan peristiwa yang telah ditentukan. Tabel di bawah mencantumkan jenis peristiwa yang tersedia dan pemetaan peristiwa terkait:



Jenis peristiwa &Peristiwa yang dipetakan yang sesuai
mouse"mousedown", "mouseup", "click", "dblclick", "mousemove", "mouseover", "mouseout", "mousewheel"
key"keydown", "keyup", "keypress", "textInput"
touch"touchstart", "touchmove", "touchend", "touchcancel"
control"resize", "scroll", "zoom", "focus", "blur", "select", "change", "submit", "reset"



Misalnya, kode berikut menggunakan jenis peristiwa "key" semua peristiwa tombol yang sesuai pada kolom teks input yang saat ini dipilih di panel Elements.


monitorEvents($0, "key");



Di bawah ini adalah contoh output setelah mengetik karakter di kolom teks:



Memantau peristiwa utama.



Gunakan unmonitorEvents(object[, events]) untuk berhenti memantau.



profile([name]) dan profileEnd([name])



profile() memulai sesi pembuatan profil CPU JavaScript dengan nama opsional. profileEnd()
menyelesaikan profil, otomatis membuka panel Performance, dan menampilkan hasilnya di jalur Main.





Untuk memulai pembuatan profil:


profile("Profile 1")



Untuk menghentikan pembuatan profil dan melihat hasilnya di jalur Performance > Main:


profileEnd("Profile 1")



Hasil di jalur Performance > Main:



Profil 1 di Jalur utama Performa.



Profil juga dapat dibuat bertingkat. Misalnya, kode ini akan berfungsi dalam urutan apa pun:


profile('A');
profile('B');
profileEnd('A');
profileEnd('B');





queryObjects(Constructor)



Panggil queryObjects(Constructor) dari konsol untuk menampilkan array objek yang dibuat dengan konstruktor yang ditentukan. Contoh:



    

  • queryObjects(Promise). Menampilkan semua instance Promise.
    • 

  • queryObjects(HTMLElement). Menampilkan semua elemen HTML.
    • 

  • queryObjects(foo), dengan foo adalah nama class. Menampilkan semua objek yang dibuat instance-nya melalui new foo().
    • 




Cakupan queryObjects() adalah konteks eksekusi yang saat ini dipilih di konsol.



table(data [, columns])



Catat data objek dengan format tabel dengan meneruskan objek data dengan judul kolom opsional.
Ini adalah pintasan untuk console.table().



Misalnya, untuk menampilkan daftar nama menggunakan tabel di konsol, Anda akan melakukan hal berikut:


let names = [
  { firstName: "John", lastName: "Smith" },
  { firstName: "Jane", lastName: "Doe" },
];
table(names);



Contoh metode table().



Untuk menyalin tabel yang dicatat ke papan klip sebagai tabel Markdown yang diformat atau data CSV, klik kanan tabel di Console , lalu pilih opsi salin yang sesuai dari menu konteks.



undebug(function)



undebug(function) menghentikan proses debug fungsi yang ditentukan sehingga saat fungsi dipanggil, debugger tidak lagi dipanggil. Fungsi ini digunakan bersama dengan debug(fn).


undebug(getData);



unmonitor(function)



unmonitor(function) menghentikan pemantauan fungsi yang ditentukan. Fungsi ini digunakan bersama dengan monitor(fn).


unmonitor(getData);



unmonitorEvents(object [, events])



unmonitorEvents(object[, events]) menghentikan pemantauan peristiwa untuk objek dan peristiwa yang ditentukan. Misalnya, kode berikut menghentikan semua pemantauan peristiwa pada objek jendela:


unmonitorEvents(window);



Anda juga dapat menghentikan pemantauan peristiwa tertentu pada objek secara selektif. Misalnya, kode berikut memulai pemantauan semua peristiwa mouse pada elemen yang saat ini dipilih, lalu menghentikan pemantauan peristiwa "mousemove" (mungkin untuk mengurangi gangguan dalam output konsol):


monitorEvents($0, "mouse");
unmonitorEvents($0, "mousemove");



values(object)



values(object) menampilkan array yang berisi nilai semua properti milik objek yang ditentukan.


let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

values(player);



Hasil nilai(pemain).