[google-chrome] Chrome에서 XPath를 얻는 방법이 있습니까?

Chrome은 기본 제공되는 ” Chrome DevTools ” 라는 기본 제공 디버깅 도구를 제공합니다. 여기에는 타사 확장 프로그램없이 XPath / CSS 선택기를 평가하거나 확인할 수있는 편리한 기능이 포함되어 있습니다.

이것은 두 가지 접근 방식으로 수행 할 수 있습니다.

요소 패널에서 검색 기능을 사용하여 XPath / CSS 선택기를 평가하고 DOM에서 일치하는 노드를 강조 표시하십시오. 콘솔 패널에서 $ x ( “some_xpath”) 또는 $$ ( “css-selectors”) 토큰을 실행하면 평가 및 유효성 검사가 모두 수행됩니다.

요소 패널에서

1. F12를 눌러 Chrome DevTools를 엽니 다.

2. 요소 패널은 기본적으로 열려 있어야합니다.

3. 패널에서 DOM 검색을 사용하려면 Ctrl + F를 누르십시오.

4. 평가할 XPath 또는 CSS 선택기를 입력하십시오.

5. 일치하는 요소가 있으면 DOM에서 강조 표시됩니다. 그러나 DOM 내에 일치하는 문자열이 있으면 유효한 결과로 간주됩니다. 예를 들어 CSS 선택기 헤더는 요소 만 일치하는 대신 단어 헤더를 포함하는 모든 (인라인 CSS, 스크립트 등)과 일치해야합니다.

콘솔 패널에서

1. F12를 눌러 Chrome DevTools를 엽니 다.

2. 콘솔 패널로 전환하십시오.

3. $x(".//header")평가하고 확인하려는 XPath를 입력하십시오 .

4. $$("header")평가하고 확인하려는 CSS 선택기를 입력하십시오 .

5. 콘솔 실행에서 반환 된 결과를 확인하십시오.

요소가 일치하면 목록에 반환됩니다. 그렇지 않으면 빈 목록 []이 표시됩니다.

$x(".//article")
[<article class="unit-article layout-post">…</article>]

$x(".//not-a-tag")
[ ]

XPath 또는 CSS 선택기가 유효하지 않은 경우 예외는 빨간색 텍스트로 표시됩니다. 예를 들면 다음과 같습니다.

$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.

---

답변