Chrome 개발자 도구 또는 Firefox의 Firebug에서 XPath 표현식을 확인하는 방법은 무엇입니까?
답변:
크롬
이 세 가지 서로 다른 접근 방식 (내 블로그 문서를 참조에 의해 달성 될 수있다 여기에서 자세한 내용을) :
Elements아래와 같은 패널 에서 검색- 실행
$x()과$$()에Console패널로 로렌스의에 표시된 대답 - 타사 확장 (대부분의 경우 실제로 필요하지는 않지만 과잉 일 수 있음)
Elements패널 에서 XPath를 검색하는 방법은 다음과 같습니다 .
- F12Chrome 개발자 도구를 열려면 누릅니다.
- '요소'패널에서 Ctrl+를 누릅니다.F
- 검색 상자에 XPath 또는 CSS 선택기를 입력하고 요소가 있으면 노란색으로 강조 표시됩니다.
Firefox (버전 75부터)
FF 75부터는 평가 xpath 표현식없이 원시 xpath 쿼리를 사용할 수 있습니다 . 자세한 정보는 문서 를 참조하십시오.
Firefox (이전 버전 75)
- Firefox 메뉴 (또는 메뉴 막대를 표시하거나 Mac OS X에있는 경우 도구 메뉴)의 웹 개발자 하위 메뉴에서 "웹 콘솔"을 선택
하거나 Ctrl+ Shift+ K( OS X의 경우 Command+ Option+ K) 키보드 단축키를 누르십시오. 하단의 명령 줄에서 다음을 사용하십시오.
$(): 일치하는 첫 번째 요소를 반환합니다. 등가로document.querySelector()또는 호출$이 존재하는 경우, 페이지에있는 기능.$$(): 일치하는 DOM 노드의 배열을 반환합니다. 이것은와 비슷document.querySelectorAll()하지만 대신 배열을 반환합니다NodeList.$x(): XPath 표현식을 평가하고 일치하는 노드의 배열을 리턴합니다.
Firefox (이전 버전 49)
- Firebug 설치
- Firepath 설치
- F12Firebug를 열려면 누르 십시오
FirePath패널로 전환- 드롭 다운에서 XPathor CSS를 선택하십시오.
- 입력하여 찾을 수 있습니다
$("//div")
CTRL+IWindows (또는 CMD+IMac)에서는 Chrome에서 DevTools를 열고 Firefox에서는 F12(을 사용하여 Console탭 을 선택한 후 )를 입력하고을 입력하여 XPath를 확인할 수 $x("your_xpath_here")있습니다.
일치하는 값의 배열이 반환됩니다. 비어 있으면 페이지에 일치하는 것이 없다는 것을 알 수 있습니다.
Firefox v66 (2019 년 4 월) :
Chrome v69 (2019 년 4 월) :
$x("//input[@name='q']")I 있어요VM251:1 Uncaught TypeError: $x is not a function at <anonymous>:1:1
크롬 또는 오페라를 사용하여
단일 XPath 구문 문자를 작성하지 않고 플러그인없이
- 필요한 요소를 마우스 오른쪽 버튼으로 클릭 한 다음 "검사"
- 강조 표시된 요소 태그를 마우스 오른쪽 단추로 클릭하고 복사> Xpath 복사를 선택하십시오.
;)
다음은 FirePath와 비교하여 많은 고급 기능이있는 Chrome 용 ChroPath 확장 프로그램입니다. 아래 단계를 따르십시오.
- devtools 패널을여십시오.
- 웹 페이지의 아무 곳이나 마우스 오른쪽 버튼으로 클릭하십시오.
- 검사를 클릭하십시오.
- 요소 탭의 오른쪽에서 ChroPath 탭을 클릭하십시오.
여기에서 XPath / CSS를 얻을 수 있으며 편집하고 평가할 수도 있습니다.
WebSync Chrome 확장 프로그램을 사용하여 XPath 및 Css 선택기를 확인 합니다 .
요소 속성을 클릭하여 선택기를 확인하고 선택기를 생성 / 수정할 수 있습니다.
https://chrome.google.com/webstore/detail/natu-websync/aohpgnblncapofbobbilnlfliihianac
