Don't forget the Chrome Dev Summit, starting Monday at 10:00am (Pacific) and streaming live on YouTube. Schedule.

Mengevaluasi Ekspresi

Mempelajari status item di laman dari konsol DevTools dengan menggunakan kemampuan evaluasinya.

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.

Ekspresi sederhana di konsol.

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.