Referensi Console Utilities API

let images = $$('img');
for (let each of images) {
  console.log(each.src);
}

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





$x(jalur [, 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 berikut menampilkan semua elemen <p> yang berisi elemen <a>:
$x("//p[a]")



Serupa dengan fungsi pemilih lainnya, $x(path) memiliki parameter kedua opsional, startNode,
yang menentukan elemen atau Node tempat elemen akan ditelusuri.



clear()

clear() akan menghapus historinya di konsol.
clear();

copy(object)

copy(object) menyalin representasi string objek yang ditentukan ke papan klip.
copy($0);

debug(function)

Saat fungsi yang ditentukan dipanggil, debugger akan dipanggil dan berhenti sebentar di dalam fungsi pada panel Sources sehingga memungkinkan penyusuran kode dan melakukan debug.
debug(getData);



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

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

dir(object)

dir(object) menampilkan daftar bergaya 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
baris perintah, dan menggunakan dir() untuk menampilkan elemen yang sama:
document.body;
dir(document.body);



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

dirxml(object)

dirxml(object) mencetak representasi XML 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: baik di panel Elements untuk elemen DOM maupun panel Profil untuk objek heap JavaScript.

Contoh berikut membuka document.body di panel Elements:
inspect(document.body);



Saat meneruskan fungsi untuk diperiksa, fungsi akan membuka dokumen di panel Sumber untuk Anda
periksa.

getEventListeners(object)

getEventListeners(object) menampilkan pemroses peristiwa yang terdaftar pada 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 mendeskripsikan pemroses yang terdaftar
untuk setiap jenis. Misalnya, kode berikut mencantumkan semua pemroses peristiwa yang terdaftar di objek dokumen:
getEventListeners(document);



Jika lebih dari satu pemroses didaftarkan pada 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:



Anda dapat meluaskan lebih jauh setiap objek ini untuk mempelajari propertinya:



Untuk mengetahui informasi selengkapnya, lihat Memeriksa properti objek.

keys(object)

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

Misalnya, anggaplah aplikasi Anda mendefinisikan objek berikut:
let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

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



monitor(fungsi)

Saat fungsi yang ditentukan dipanggil, pesan akan dicatat ke dalam log di konsol yang menunjukkan nama fungsi beserta argumen yang diteruskan ke fungsi saat dipanggil.
function sum(x, y) {
  return x + y;
}
monitor(sum);



Gunakan unmonitor(function) untuk menghentikan pemantauan.

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 yang akan dipantau, array peristiwa, atau salah satu "jenis" peristiwa umum yang dipetakan ke kumpulan peristiwa yang telah ditentukan sebelumnya. Lihat contohnya di bawah.

Berikut ini memantau semua peristiwa ubah ukuran pada objek jendela.
monitorEvents(window, "resize");



Berikut ini 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 ditetapkan sebelumnya. Tabel di bawah ini mencantumkan jenis peristiwa yang tersedia dan pemetaan peristiwa terkaitnya:

Jenis peristiwa & Peristiwa terkait yang dipetakan
tikus
"mousedown", "mouseup", "klik", "dblclick", "mousemove", "mouseover", "mouseout", "mousewheel"
kunci
"keydown", "keyup", "keypress", "textInput"
sentuh
"touchstart", "touchmove", "touchend", "touchcancel"
kontrol
"resize", "scroll", "zoom", "focus", "blur", "select", "change", "submit", "reset"

Misalnya, kode berikut menggunakan jenis peristiwa "key" dari semua peristiwa key yang sesuai pada kolom teks input
yang saat ini dipilih di panel Elements.
monitorEvents($0, "key");

Berikut adalah contoh output setelah mengetik karakter dalam kolom teks:



Gunakan unmonitorEvents(object[, events]) untuk menghentikan pemantauan.

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

profile() memulai sesi pembuatan profil CPU JavaScript dengan nama opsional. profileEnd()
menyelesaikan profil dan menampilkan hasilnya di jalur Performa > Utama.



Untuk memulai pembuatan profil:
profile("Profile 1")

Untuk menghentikan pembuatan profil dan melihat hasilnya di jalur Performa > Utama:
profileEnd("Profile 1")

Hasil di jalur Performa > Utama:



Profil juga dapat disusun 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])

Me-log data objek dengan pemformatan tabel dengan meneruskan objek data dalam heading kolom opsional.
Ini adalah pintasan untuk console.table().

Misalnya, untuk menampilkan daftar nama menggunakan tabel di konsol, Anda akan melakukan:
let names = [
  { firstName: "John", lastName: "Smith" },
  { firstName: "Jane", lastName: "Doe" },
];
table(names);



undebug(fungsi)

undebug(function) menghentikan proses debug atas fungsi yang ditentukan sehingga saat fungsi tersebut
dipanggil, debugger tidak lagi dipanggil. Ini digunakan bersama dengan debug(fn).
undebug(getData);

unmonitor(function)

unmonitor(function) menghentikan pemantauan fungsi yang ditentukan. Metode ini digunakan bersama
monitor(fn).
unmonitor(getData);

unmonitorEvents(object [, events])

unmonitorEvents(object[, events]) berhenti memantau peristiwa untuk objek dan peristiwa yang ditentukan. Misalnya, yang berikut ini akan menghentikan semua pemantauan peristiwa pada objek window:
unmonitorEvents(window);

Anda juga dapat secara selektif menghentikan pemantauan peristiwa tertentu pada sebuah objek. Misalnya, kode berikut
mulai memantau semua peristiwa mouse pada elemen yang saat ini dipilih, lalu berhenti memantau
peristiwa "mousemove" (mungkin untuk mengurangi derau di output konsol):
monitorEvents($0, "mouse");
unmonitorEvents($0, "mousemove");

values(object)

values(object) menampilkan array yang berisi nilai semua properti yang dimiliki oleh objek yang ditentukan.
let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

values(player);