Referensi Console Utilities API

Sofia Emelianova
Sofia Emelianova

Console Utilitas API berisi kumpulan fungsi kemudahan untuk melakukan tugas: memilih dan memeriksa elemen DOM, membuat kueri objek, menampilkan data dalam format yang dapat dibaca, menghentikan, dan memulai profiler, memantau peristiwa DOM dan panggilan fungsi, dan masih banyak lagi.

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

$_

$_ 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 mula-mula berisi susunan nama. Mengevaluasi $_.length untuk menemukan panjang array, nilai yang disimpan dalam $_ akan berubah menjadi nilai terbaru ekspresi yang dievaluasi, 4:

$_ berubah saat perintah baru dievaluasi.

$0 - $4

Perintah $0, $1, $2, $3, dan $4 berfungsi sebagai referensi historis untuk lima DOM terakhir yang diperiksa dalam panel Elements atau lima objek heap JavaScript terakhir yang dipilih di panel {i>Profile<i}. $0 menampilkan elemen atau objek JavaScript yang terakhir dipilih, $1 mengembalikan yang 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:

Contoh $0.

Gambar di bawah ini menunjukkan elemen berbeda yang dipilih pada halaman yang sama. $0 sekarang merujuk ke elemen yang dipilih, sementara $1 menampilkan elemen yang dipilih sebelumnya:

Contoh $1.

$(selector [, startNode])

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

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

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

Klik kanan hasil yang ditampilkan, lalu pilih Perlihatkan di Panel Elemen untuk menemukannya di DOM, atau Scroll ke Lihat untuk menampilkannya di halaman.

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

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

Fungsi ini juga mendukung parameter kedua, startNode, yang menetapkan 'elemen' atau Node dari yang mencari 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 $(&#39;img&#39;, div).src.

$$(selector [, startNode])

$$(pemilih) menampilkan array elemen yang cocok dengan pemilih CSS yang diberikan. Perintah ini adalah 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=&lt;img&gt; elemen 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 tertentu dalam dokumen dan menampilkan sumbernya.

$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 penggunaan pemilih XPath.

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

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

Contoh penggunaan pemilih XPath yang lebih rumit.

Serupa dengan fungsi pemilih lainnya, $x(path) memiliki parameter kedua opsional, yaitu startNode, yang menetapkan elemen atau {i>Node<i} untuk mencari elemen.

Contoh penggunaan pemilih XPath dengan startNode.

clear()

clear() akan menghapus historinya di 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 memungkinkan Anda menelusuri kode dan men-debug-nya.

debug(getData);

Membuka bagian dalam fungsi dengan debug().

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 untuk 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 dalam command line, dan menggunakan dir() untuk menampilkan elemen yang sama:

document.body;
dir(document.body);

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

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

dirxml(objek)

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) akan membuka dan memilih elemen atau objek yang ditentukan dalam panel: baik panel Elements untuk elemen DOM atau panel Profil 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 Sumber untuk Anda untuk diperiksa.

getEventListeners(object)

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

getEventListeners(document);

Output penggunaan getEventListeners().

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:

Beberapa pemroses.

Anda dapat meluaskan setiap objek ini untuk menjelajahi propertinya:

Tampilan objek pemroses diperluas.

Untuk informasi selengkapnya, lihat Memeriksa properti objek.

key(objek)

keys(object) menampilkan array yang berisi nama properti dari properti 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 (untuk kemudahan), mengetik keys(player) dan values(player) di Konsol menghasilkan hal berikut:

Contoh metode keys() dan values().

monitor(fungsi)

Ketika fungsi yang telah ditetapkan 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 menghentikan pemantauan.

monitorEvents(object [, events])

Bila salah satu peristiwa yang ditentukan terjadi pada objek yang ditentukan, objek Event akan dicatat ke dalam log konsol. Anda dapat menentukan satu peristiwa untuk dipantau, array peristiwa, atau salah satu peristiwa umum "jenis" dipetakan ke kumpulan peristiwa yang telah ditetapkan sebelumnya. Lihat contohnya di bawah.

Berikut ini memantau semua peristiwa ubah ukuran pada objek jendela.

monitorEvents(window, "resize");

Memantau peristiwa pengubahan ukuran jendela.

Yang berikut ini mendefinisikan array untuk memantau "mengubah ukuran" dan "scroll" pada objek window:

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

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

Jenis acara & 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 "key" semua peristiwa tombol yang sesuai pada teks input yang saat ini dipilih di panel Elements.

monitorEvents($0, "key");

Berikut adalah contoh output setelah mengetik karakter dalam kolom teks:

Memantau peristiwa utama.

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

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

profile() memulai sesi pembuatan profil CPU JavaScript dengan nama opsional. profileEnd() melengkapi profil dan menampilkan hasilnya di Performa > Trek utama.

Untuk memulai pembuatan profil:

profile("Profile 1")

Untuk menghentikan pembuatan profil dan melihat hasilnya di bagian Performance > Trek utama:

profileEnd("Profile 1")

Hasil dalam Performa > Trek utama:

Profil 1 di Jalur utama Performa.

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 sebagai nama class. Menampilkan semua objek yang dibuat instance-nya melalui new foo().

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

tabel(data [, kolom])

Buat log data objek dengan pemformatan tabel dengan meneruskan objek data menggunakan 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);

Contoh metode table().

undebug(fungsi)

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

undebug(getData);

unmonitor(fungsi)

unmonitor(function) menghentikan pemantauan fungsi yang ditentukan. Hal ini digunakan bersamaan dengan monitor(fn).

unmonitor(getData);

unmonitorEvents(object [, events])

unmonitorEvents(object[, events]) berhenti memantau peristiwa untuk objek dan peristiwa yang ditentukan. Sebagai contoh berikut, perintah berikut akan menghentikan semua pemantauan peristiwa pada objek jendela:

unmonitorEvents(window);

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

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

values(objek)

values(object) menampilkan array yang berisi nilai semua properti yang dimiliki oleh properti yang ditentukan .

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

values(player);

Hasil nilai(pemain).