Pada konsol DevTools, Anda dapat mengetahui status item di laman dengan cara khusus. Anda dapat mengevaluasi ekspresi apa saja dengan memadukan pengetahuan tentang JavaScript dan sejumlah fitur yang didukungnya.
TL;DR
- Mengevaluasi suatu ekspresi cukup dengan mengetikkannya.
- Memilih elemen menggunakan pintasan.
- Memeriksa elemen DOM dan objek heap JavaScript menggunakan
inspect(). - Mengakses elemen dan objek yang baru saja dipilih dengan menggunakan $0 - 4.
Menelusuri ekspresi
Konsol mengevaluasi setiap ekspresi JavaScript yang diberikan saat menekan Enter. Saat Anda mengetikkan suatu ekspresi, saran nama properti akan muncul; konsol juga menyediakan pelengkapan otomatis dan pelengkapan tab.
Jika ada beberapa saran, gunakan ↑ dan ↓ untuk menelusurinya. Tekan → untuk memilih saran yang sedang disorot. Jika hanya ada satu saran, tekan Tab untuk memilihnya.
Memilih elemen
Gunakan pintasan berikut untuk memilih elemen:
| Pintasan & Keterangan | |
|---|---|
| $() | Mengembalikan elemen pertama yang cocok dengan pemilih CSS yang ditetapkan. Pintasan untuk document.querySelector(). |
| $$() | Mengembalikan larik semua elemen yang cocok dengan pemilih CSS yang ditetapkan. Alias untuk document.querySelectorAll(). |
| $x() | Mengembalikan larik elemen yang cocok dengan XPath yang ditetapkan. |
Contoh pemilihan target:
$('code') // Returns the first code element in the document.
$$('figure') // Returns an array of all figure elements in the document.
$x('html/body/p') // Returns an array of all paragraphs in the document body.
Memeriksa elemen DOM dan objek heap JavaScript
Fungsi inspect() menggunakan elemen DOM atau referensi JavaScript
sebagai parameter.
Jika Anda memberikan elemen DOM,
DevTools akan pindah ke panel Elements dan menampilkan elemen itu.
Jika Anda memberikan JavaScript,
DevTools akan pindah ke panel Profile.
Bila kode ini dieksekusi di konsol pada laman ini,
DevTools akan mengambil nilai ini dan menampilkannya pada panel Elements.
DevTools memanfaatkan properti $_
untuk mendapatkan keluaran ekspresi yang terakhir dievaluasi.
$('[data-target="inspecting-dom-elements-example"]')
inspect($_)
Mengakses elemen dan objek yang baru saja dipilih
Konsol menyimpan lima elemen dan objek yang terakhir digunakan dalam variabel agar mudah diakses. Gunakan $0 - 4, untuk mengakses elemen-elemen ini dari dalam konsol. Ingat, komputer mulai menghitung dari 0; ini berarti item terakhir adalah $0 dan item paling lama adalah $4.