Halaman ini diterjemahkan oleh Cloud Translation API.

Referensi Console Utilities API

Kayce Basques

Sofia Emelianova

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 banyak lagi.

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

$_

$_ menampilkan nilai ekspresi yang terakhir dievaluasi.

Pada 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 untuk lima elemen DOM terakhir yang diperiksa dalam panel Elemen atau lima objek heap JavaScript terakhir yang dipilih dalam panel Profil. $0 menampilkan elemen atau objek JavaScript yang baru saja dipilih, $1 menampilkan elemen atau objek yang kedua baru saja dipilih, 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 sekarang 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 Tampilkan di Panel Elemen untuk menemukannya di DOM, atau Scroll untuk Melihat untuk menampilkannya di halaman.

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

Contoh $('img').src.

Fungsi ini juga mendukung parameter kedua, startNode, yang menentukan 'elemen' atau Node dari mana elemen akan dicari. 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-nya:

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

Catatan: Jika Anda menggunakan library seperti jQuery yang menggunakan $, fungsi ini akan diganti, dan $ akan sesuai dengan penerapan library tersebut.

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

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



Catatan: Tekan Shift + Enter di konsol untuk memulai
baris baru tanpa menjalankan skrip.

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



Mirip dengan fungsi pemilih lainnya, $x(path) memiliki parameter kedua opsional, startNode,
yang menentukan elemen atau Node yang akan dicari elemennya.



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, sehingga memungkinkan penelusuran kode dan men-debugnya.
debug(getData);



Gunakan undebug(fn) untuk berhenti menghentikan 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);



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



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

getEventListeners(object)

getEventListeners(object) menampilkan pemroses peristiwa yang terdaftar pada objek tertentu. Nilai
yang ditampilkan adalah objek yang berisi array untuk setiap jenis peristiwa 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 pada objek
dokumen:
getEventListeners(document);



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



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



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, anggaplah aplikasi Anda menentukan objek berikut:
let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

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



monitor(function)

Saat fungsi yang ditentukan dipanggil, pesan dicatat ke 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 dicatat ke konsol. Anda dapat menentukan satu peristiwa untuk dipantau, serangkaian peristiwa, atau salah satu "jenis" peristiwa umum yang dipetakan ke kumpulan peristiwa yang telah ditentukan sebelumnya. Lihat contohnya di bawah.

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



Berikut ini menentukan array untuk memantau peristiwa "resize" dan "scroll" pada objek window:
monitorEvents(window, ["resize", &quot;scroll"])

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

Jenis peristiwa & Peristiwa yang dipetakan yang sesuai
tikus "mousedown", "mouseup", "click", "dblclick", "mousemove", "mouseover", "mouseout", "mousewheel"
kunci "keydown", "keyup", "keypress", "textInput"
sentuh "touchstart", "touchmove", "touchend", "touchcancel"
kontrol "mengubah ukuran", "men-scroll", "melakukan zoom", "memfokuskan", "mengaburkan", "memilih", "mengubah", "mengirimkan", "mereset"

Misalnya, kode berikut menggunakan semua jenis 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 di 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.

Catatan: profile() dan profileEnd() adalah singkatan untuk console.profile() dan console.profileEnd().

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 juga dapat bertingkat. Misalnya, ini akan berfungsi dalam urutan apa pun:
profile('A');
profile('B');
profileEnd('A&#39;);
profileEnd('B');

Catatan: Beberapa profil CPU dapat beroperasi sekaligus dan Anda tidak diwajibkan untuk menutupnya dalam urutan
pembuatan.

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 di-instance
melalui new foo().


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

table(data [, columns])

Mencatat data objek dengan pemformatan 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:
let names = [
  { firstName: "John", lastName: "Smith" },
  { firstName: "Jane", lastName: "Doe" },
];
table(names);



undebug(function)

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

unmonitor(function)

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

unmonitorEvents(object [, events])

unmonitorEvents(object[, events]) berhenti memantau 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, &quot;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);

Jenis peristiwa & Peristiwa yang dipetakan yang sesuai
tikus	"mousedown", "mouseup", "click", "dblclick", "mousemove", "mouseover", "mouseout", "mousewheel"
kunci	"keydown", "keyup", "keypress", "textInput"
sentuh	"touchstart", "touchmove", "touchend", "touchcancel"
kontrol	"mengubah ukuran", "men-scroll", "melakukan zoom", "memfokuskan", "mengaburkan", "memilih", "mengubah", "mengirimkan", "mereset"

Referensi Console Utilities API Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

$_

$0 - $4

$(selector [, startNode])

$$(selector [, startNode])

$x(path [, startNode])

clear()

copy(object)

debug(function)

dir(object)

dirxml(object)

inspect(object/function)

getEventListeners(object)

keys(object)

monitor(function)

monitorEvents(object [, events])

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

queryObjects(Constructor)

table(data [, columns])

undebug(function)

unmonitor(function)

unmonitorEvents(object [, events])

values(object)

Referensi Console Utilities API