Chrome 개발자 도구에서 XPath 또는 CSS 선택기를 사용하여 DOM 요소를 검색하는 방법은 무엇입니까?

116

http://code.google.com/chrome/devtools/docs/elements.html 문서 는 XPath 또는 CSS 선택기를 지원한다고 말했지만 시도했을 때 작동하지 않는 것 같습니다.

아무도 그것을 사용하는 방법을 알고 있습니까?

dom google-chrome google-chrome-devtools

— 보보
소스

답변:

263

$xChrome 자바 스크립트 콘솔에서 사용할 수 있습니다 . 확장이 필요하지 않습니다.

전의: $x("//img")

— 매트 폴리 토
소스

이것은 유용한 답변입니다. 여기에 추가하기 위해 $ x 함수는 두 번째 선택적 인수 인 context를 허용합니다. $ x (xpath, context) 예를 들어 특정 iframe 콘텐츠를 선택하고 이에 대해 xpath 쿼리를 실행할 수 있습니다. 따라서 첫 번째 iframe의 경우 : myframe = document.getElementsByTagName ( "iframe") [0] .contentWindow.document.body; # 테이블 셀에 대한 iframe을 xpath 쿼리 : $ x ( "// td", myframe);

— Adolph Trudeau

CSS 선택

— 기가

더 많은 명령은 여기에서 찾을 수 있습니다. developers.google.com/chrome-developer-tools/docs/…

— Dmitry Polushkin

거의 2 년 후에이 질문으로 돌아 오면이 질문이 더 좋습니다.

— Bobo

XPath 디버깅에 아주 좋습니다! 그런데이 $x()기능은 Safari 명령 줄 API에서도 작동합니다.

— Otto G

검색 창에 xpath 표현식을 입력하기 만하면됩니다. 그것은 나무 끝에서 나를 위해 작동합니다.

이 기능은 Chrome 11에서 손상된 것 같습니다. http://crbug.com/79716 에 버그를 신고했습니다 .

— 유리 세미 카츠키
소스

당신이 옳습니다. 작동하지만 강조 표시 기능이 손상되었습니다. Mac OS X에서 크롬 10.0. *을 사용하고 있습니다.

— Bobo

아래 Mark Polito의 더 나은 답변.

— FGM

Chrome 32에서 작동합니다. devtool의 Element 탭으로 이동하고 CTRL + S를 누르고 xpath를 검색합니다.

— eeezyy

@eeezyy 당신은 ctrl + f를 의미합니까?

— Box

xpath 검색의 경우 $x('xpathSelector'). CSS 선택기의 경우 $('cssSelector').

그러나이 마지막 선택기는 첫 번째 일치 요소 만 반환합니다. 일치하는 모든 요소를 보려면$$('cssSelector')

— 참
소스