Console Utility API berisi kumpulan fungsi praktis untuk melakukan tugas umum: memilih dan memeriksa elemen DOM, membuat kueri objek, menampilkan data dalam format yang dapat dibaca, menghentikan dan memulai profiler, memantau peristiwa DOM serta panggilan fungsi, dan lainnya.
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:
Pada contoh berikutnya, ekspresi yang dievaluasi awalnya berisi array nama. Dengan mengevaluasi
$_.length
untuk menemukan panjang array, nilai yang disimpan dalam $_
akan berubah menjadi ekspresi
yang dievaluasi terbaru, 4:
Rp0 - Rp40.000
Perintah $0
, $1
, $2
, $3
, dan $4
berfungsi sebagai referensi historis ke lima elemen DOM terakhir
yang diperiksa dalam panel Elements atau lima objek heap JavaScript terakhir yang dipilih di
panel Profil. $0
menampilkan elemen atau objek JavaScript yang terakhir dipilih, $1
menampilkan elemen atau objek JavaScript kedua yang terakhir dipilih, dan seterusnya.
Pada contoh berikut, elemen img
dipilih di panel Elements. Di panel samping Konsol,
$0
telah dievaluasi dan menampilkan elemen yang sama:
Gambar di bawah menunjukkan elemen lain yang dipilih pada halaman yang sama. $0
sekarang merujuk ke elemen yang baru
dipilih, sedangkan $1
menampilkan elemen yang dipilih sebelumnya:
$(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:
Klik kanan hasil yang ditampilkan, lalu 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
-nya:
Fungsi ini juga mendukung parameter kedua, startNode
, yang menentukan 'elemen' atau Node yang digunakan 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
-nya:
$$(selector [, startNode])
Contoh berikut menggunakan $$(pemilih) menampilkan array elemen yang cocok dengan pemilih CSS tertentu. Perintah ini
sama dengan memanggil
Array.from(document.querySelectorAll())
.
$$()
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);
}
l10n-placeholder3() untuk membuat array dari semua 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, perintah 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 mencari elemen.
clear()
clear()
menghapus histori konsol.
clear();
salin(objek)
copy(object)
menyalin representasi string dari objek yang ditentukan ke papan klip.
copy($0);
debug(fungsi)
Saat fungsi yang ditentukan dipanggil, debugger akan dipanggil dan berhenti di dalam fungsi pada panel Sources yang memungkinkan untuk menelusuri kode dan melakukan debug.
debug(getData);
Gunakan undebug(fn)
untuk menghentikan gangguan 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 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
langsung di
command line, dan menggunakan dir()
untuk menampilkan elemen yang sama:
document.body;
dir(document.body);
Untuk informasi selengkapnya, lihat entri console.dir()
di Console API.
dirxml(objek)
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)
akan terbuka 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 tersebut akan membuka dokumen di panel Sources 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 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 didaftarkan 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 meluaskan setiap objek ini untuk mempelajari propertinya:
Untuk mengetahui informasi selengkapnya, lihat Memeriksa properti objek.
kunci(objek)
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 mendefinisikan objek berikut:
let player = {
"name": "Parzival",
"number": 1,
"state": "ready",
"easterEggs": 3
};
Dengan asumsi player
ditentukan dalam namespace global (agar lebih mudah), mengetik keys(player)
dan
values(player)
dalam Console akan menghasilkan hal berikut:
monitor(function)
Saat fungsi yang ditentukan dipanggil, pesan akan dicatat ke konsol yang menunjukkan nama fungsi beserta argumen yang diteruskan ke fungsi tersebut saat fungsi tersebut dipanggil.
function sum(x, y) {
return x + y;
}
monitor(sum);
Gunakan unmonitor(function)
untuk menghentikan pemantauan.
monitorEvents(object [, events])
Jika salah satu peristiwa yang ditentukan terjadi pada objek yang ditentukan, objek Peristiwa dicatat ke dalam log ke konsol. Anda dapat menentukan satu peristiwa yang akan dipantau, array peristiwa, atau salah satu "jenis" peristiwa umum yang dipetakan ke kumpulan peristiwa standar. Lihat contohnya di bawah.
Yang berikut ini memantau semua peristiwa resize pada objek window.
monitorEvents(window, "resize");
Yang berikut ini mendefinisikan 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 memetakan ke kumpulan peristiwa yang telah ditetapkan. Tabel di bawah mencantumkan jenis peristiwa yang tersedia dan pemetaan peristiwa yang terkait:
Jenis peristiwa & Peristiwa terkait yang dipetakan | |
---|---|
tikus | "mousedown", "mouseup", "klik", "dblclick", "mousemove", "mouseover", "mouseout", "mousewheel" |
key | "keydown", "keyup", "keypress", "textInput" |
sentuh | "touchstart", "touchmove", "touchend", "touchcancel" |
kontrol | "ubah ukuran", "scroll", "zoom", "fokus", "buram", "pilih", "ubah", "kirim", "reset" |
Misalnya, string berikut menggunakan jenis peristiwa "kunci" dari semua peristiwa tombol terkait di kolom teks input yang saat ini dipilih di panel Elemen.
monitorEvents($0, "key");
Di bawah ini 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()
melengkapi profil dan menampilkan hasilnya di jalur Performance > Utama.
Untuk memulai pembuatan profil:
profile("Profile 1")
Untuk menghentikan pembuatan profil dan melihat hasilnya dalam jalur Performance > Main:
profileEnd("Profile 1")
Menghasilkan jalur Performa > Utama:
Trek utama." width="800" height="606">
Profil juga bisa 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 instancePromise
.queryObjects(HTMLElement)
. Menampilkan semua elemen HTML.queryObjects(foo)
, denganfoo
sebagai nama class. Menampilkan semua objek yang dibuat instance-nya melaluinew foo()
.
Cakupan queryObjects()
adalah konteks eksekusi yang saat ini dipilih di konsol.
tabel(data [, kolom])
Mencatat data objek ke dalam log menggunakan pemformatan tabel dengan meneruskan objek data menggunakan heading kolom opsional.
Ini adalah pintasan untuk console.table()
.
Misalnya, untuk menampilkan daftar nama menggunakan tabel di konsol, Anda 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
dipanggil, debugger tidak lagi dipanggil. Ini digunakan bersama debug(fn)
.
undebug(getData);
batalkan pemantauan(fungsi)
unmonitor(function)
menghentikan pemantauan fungsi yang ditentukan. Hal ini digunakan bersama dengan
monitor(fn)
.
unmonitor(getData);
unmonitorEvents(object [, events])
unmonitorEvents(object[, events])
berhenti memantau peristiwa untuk objek dan peristiwa yang ditentukan. Misalnya, hal berikut akan menghentikan semua pemantauan peristiwa pada objek jendela:
unmonitorEvents(window);
Anda juga dapat secara selektif berhenti memantau peristiwa tertentu pada 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");
nilai(objek)
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);