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

116

Dokumen http://code.google.com/chrome/devtools/docs/elements.html menyatakan bahwa ia mendukung pemilih XPath atau CSS, tetapi ketika saya mencobanya, tampaknya tidak berhasil untuk saya.

Ada yang tahu bagaimana cara menggunakannya?

dom google-chrome google-chrome-devtools

— Bobo
sumber

Jawaban:

263

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

ex: $x("//img")

— Matt Polito
sumber

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

untuk menemukan elemen dengan pemilih CSS, seseorang harus menggunakan fungsi konsol $$, misalnya $$ ('body')

— user907860

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

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

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