Bagaimana cara mencari elemen DOM menggunakan pemilih XPath atau CSS di Alat Pengembang Chrome?

Jawaban:

263

Anda dapat menggunakan $xdi konsol javascript Chrome. Tidak perlu ekstensi.

ex: $x("//img")

Matt Polito
sumber
28
Ini adalah jawaban yang membantu. Untuk menambahkannya, fungsi $ x menerima argumen opsional kedua, konteks. $ x (xpath, konteks) Ini memungkinkan Anda untuk memilih konten iframe tertentu, misalnya, dan menjalankan kueri xpath terhadapnya. Jadi untuk iframe pertama: myframe = document.getElementsByTagName ("iframe") [0] .contentWindow.document.body; #to xpath query iframe itu untuk sel tabel: $ x ("// td", myframe);
Adolph Trudeau
12
untuk menemukan elemen dengan pemilih CSS, seseorang harus menggunakan fungsi konsol $$, misalnya $$ ('body')
user907860
3
Perintah lainnya dapat ditemukan di sini: developers.google.com/chrome-developer-tools/docs/…
Dmitry Polushkin
kembali ke pertanyaan ini setelah hampir 2 tahun, ya yang ini lebih bagus.
Bobo
Sangat bagus untuk men-debug XPath! Ngomong-ngomong, $x()fungsi ini juga berfungsi di API baris perintah Safari.
Otto G
15

Hanya mengetik ekspresi xpath di kotak pencarian seharusnya berfungsi. Ini bekerja untuk saya dalam membangun ujung pohon.

Fitur tersebut tampaknya rusak di Chrome 11, saya telah melaporkan bug ini: http://crbug.com/79716

Yury Semikhatsky
sumber
kamu benar. itu berfungsi tetapi fitur penyorotan rusak. Saya menggunakan chrome 10.0. * Di Mac os X.
Bobo
jawaban yang lebih baik oleh Mark Polito di bawah ini.
FGM
Ia bekerja dengan Chrome 32. Pergi ke tab Element dari devtool dan tekan CTRL + S dan cari xpath
eeezyy
@eeezyy maksudmu ctrl + f?
Kotak
3

Untuk pencarian xpath digunakan $x('xpathSelector'). Untuk penggunaan pemilih css $('cssSelector').

Namun, pemilih terakhir ini hanya mengembalikan elemen pertama yang cocok. Jika Anda ingin melihat semua elemen yang cocok, carilah$$('cssSelector')

cham
sumber