Google Chrome menyediakan alat debugging internal yang disebut " Chrome DevTools " di luar kotak, yang mencakup fitur praktis yang dapat mengevaluasi atau memvalidasi pemilih XPath / CSS tanpa ekstensi pihak ketiga.
Ini dapat dilakukan dengan dua pendekatan:
Gunakan fungsi pencarian di dalam panel Elemen untuk mengevaluasi pemilih XPath / CSS dan menyorot titik yang cocok di DOM. Jalankan token $ x ("some_xpath") atau $$ ("css-selectors") di panel Console, yang akan mengevaluasi dan memvalidasi.
Dari panel Elemen
Tekan F12 untuk membuka Chrome DevTools.
Panel elemen harus dibuka secara default.
Tekan Ctrl + F untuk mengaktifkan pencarian DOM di panel.
Ketik pemilih XPath atau CSS untuk mengevaluasi.
Jika ada elemen yang cocok, mereka akan disorot dalam DOM. Namun, jika ada string yang cocok di dalam DOM, mereka akan dianggap sebagai hasil yang valid juga. Misalnya, tajuk pemilih CSS harus cocok dengan semua (CSS sebaris, skrip, dll.) Yang berisi tajuk kata, alih-alih mencocokkan elemen saja.
Dari panel Konsol
Tekan F12 untuk membuka Chrome DevTools.
Beralih ke panel Konsol.
Ketik XPath suka $x(".//header")
mengevaluasi dan memvalidasi.
Ketik pemilih CSS suka $$("header")
mengevaluasi dan memvalidasi.
Periksa hasil yang dikembalikan dari eksekusi konsol.
Jika elemen dicocokkan, mereka akan dikembalikan dalam daftar. Kalau tidak, daftar kosong [] ditampilkan.
$x(".//article")
[<article class="unit-article layout-post">…</article>]
$x(".//not-a-tag")
[ ]
Jika pemilih XPath atau CSS tidak valid, pengecualian akan ditampilkan dalam teks merah. Sebagai contoh:
$x(".//header/")
SyntaxError: Failed to execute 'evaluate' on 'Document': The string './/header/' is not a valid XPath expression.
$$("header[id=]")
SyntaxError: Failed to execute 'querySelectorAll' on 'Document': 'header[id=]' is not a valid selector.