+ +
뷰포트 너비
DOM 깊이
Chrome 확장 프로그램

정밀 XPath
셀렉터 도구

|

한 번의 제스처로 XPath 셀렉터를 생성, 검증, 복사할 수 있습니다. Shift+호버로 모든 요소를 지정하세요. DOM 트리로 사고하는 개발자와 QA 엔지니어를 위해 제작되었습니다.

Chrome 웹 스토어에서 설치 → 기술 사양 보기 →
상태 무료 및 오픈소스
개인정보 데이터 수집 없음
설치 1분 안에 설치 가능
//nav
섹션 01

기능 주석

현대적인 웹 요소 검사 및 XPath 생성을 위한 6가지 정밀 설계 기능.

+

Shift + 호버

Shift를 누른 채 커서를 이동하세요. 포인터 아래의 모든 요소에 대해 XPath 셀렉터가 즉시 생성됩니다.

</>

실시간 편집

셀렉터를 실시간으로 수정하세요. 일치하는 요소가 페이지에서 즉시 강조 표시됩니다.

#

다중 셀렉터

모든 요소에 대해 여러 대안 XPath 표현식을 제공합니다. 가장 견고한 옵션을 선택하세요.

○

테마 전환

라이트와 다크 인터페이스 테마 간 전환. 작업 환경에 맞게 적응합니다.

A

설정 없이 바로 사용

설치하고 Shift 를 누른 채 바로 검사할 수 있습니다. 계정도, 온보딩도, 원격 의존성도 없습니다.

⇒

클립보드 복사

클릭 한 번으로 클립보드에 복사. 테스트 스크립트나 브라우저 콘솔에 바로 붙여넣기.

섹션 02

라이브 회로도

인스펙터가 DOM 요소를 스캔할 때 XPath 생성을 실시간으로 관찰하세요.

XPath 인스펙터 — 라이브 미리보기 스캔 중
소스 문서
<div class="app">
  <nav id="main-nav">
    <ul class="nav-list">
      <li><a href="/docs">Docs</a></li>
      <li><a href="/api">API</a></li>
    </ul>
  </nav>
</div>
생성 결과
기본 셀렉터
//nav[@id='main-nav']//a[@href='/docs']
대안
//ul[@class='nav-list']/li[1]/a
//a[contains(text(),'Docs')]
Shift + 호버로 모든 요소에 대해 XPath를 즉시 생성하세요. 셀렉터를 라이브로 편집하고 일치 강조 표시를 확인하세요.
기술 스택
React
TypeScript
Vite
Chrome API
i18next
섹션 03

기술 사양

설치 전 알아야 할 모든 것. 확장 프로그램 하나, 설정 제로.

XPath Tools

Chrome 확장 프로그램 — 설치 가이드
유형 Chrome 브라우저 확장 프로그램
플랫폼 Chromium 기반 브라우저
프레임워크 React + TypeScript + Vite
버전 0.7.0
업데이트 2026년 3월 28일
크기 624KiB
언어 영어(미국)
활성화 모든 DOM 요소에서 Shift + 호버
가격 무료 & 오픈 소스
개인정보 데이터 수집 없음 · 오프라인 동작
설치 1. Chrome 웹 스토어 열기 → 2. Chrome에 추가 → 3. Shift+호버
Chrome 웹 스토어에서 설치 → 1분 안에 설치할 수 있습니다.
Chrome 에 설치