Làm cách nào để tìm kiếm các phần tử DOM bằng bộ chọn XPath hoặc CSS trong Công cụ nhà phát triển Chrome?

116

Tài liệu http://code.google.com/chrome/devtools/docs/elements.html cho biết nó hỗ trợ bộ chọn XPath hoặc CSS, nhưng khi tôi thử, dường như không hiệu quả với tôi.

Bất kỳ ai biết làm thế nào để sử dụng nó?

dom google-chrome google-chrome-devtools

— Bobo
nguồn

Câu trả lời:

263

Bạn có thể sử dụng $xtrong bảng điều khiển javascript của Chrome. Không cần phần mở rộng.

Ví dụ: $x("//img")

— Matt Polito
nguồn

Đây là một câu trả lời hữu ích. Để thêm vào nó, hàm $ x chấp nhận một đối số tùy chọn thứ hai, ngữ cảnh. $ x (xpath, context) Ví dụ: cho phép bạn chọn một nội dung iframe cụ thể và chạy một truy vấn xpath đối với nó. Vì vậy, đối với iframe đầu tiên: myframe = document.getElementsByTagName ("iframe") [0] .contentWindow.document.body; #to xpath truy vấn iframe cho các ô trong bảng: $ x ("// td", myframe);

— Adolph Trudeau

để tìm một phần tử có bộ chọn CSS, một phần tử phải sử dụng hàm $$ console, ví dụ: $$ ('body')

— user907860

Nhiều lệnh có thể được tìm thấy ở đây: developers.google.com/chrome-developer-tools/docs/...

— Dmitry Polushkin

quay lại câu hỏi này sau gần 2 năm, vâng, câu này hay hơn.

— Bobo

Rất tốt để gỡ lỗi XPaths! Nhân tiện, $x()chức năng này cũng hoạt động trong API dòng lệnh Safari.

— Otto G

Chỉ cần nhập biểu thức xpath vào hộp tìm kiếm sẽ hoạt động. Nó hoạt động đối với tôi trong xây dựng ngọn cây.

Tuy nhiên, tính năng này dường như bị hỏng trong Chrome 11, tôi đã gửi một lỗi về điều này: http://crbug.com/79716

— Yury Semikhatsky
nguồn

bạn đúng rồi. nó đang hoạt động nhưng tính năng đánh dấu bị hỏng. Tôi đang sử dụng chrome 10.0. * Trên Mac os X.

— Bobo

câu trả lời tốt hơn của Mark Polito dưới đây.

— FGM

Nó hoạt động với Chrome 32. Chuyển đến tab Phần tử của devtool và nhấn CTRL + S và tìm kiếm xpath

— eeezyy

@eeezyy ý bạn là ctrl + f?

— Hộp

Để sử dụng tìm kiếm xpath $x('xpathSelector'). Để sử dụng bộ chọn css $('cssSelector').

Tuy nhiên, bộ chọn cuối cùng này chỉ trả về phần tử phù hợp đầu tiên. Nếu bạn muốn xem tất cả các phần tử phù hợp, hãy$$('cssSelector')

— cham
nguồn