XPath Hunter — 每个开发者都该拥有的 XPath 效率神器
XPath Hunter — 每个开发者都该拥有的 XPath 效率神器告别手动拼写 XPath 的黑暗时代用直觉交互重写你的元素定位体验。一个故事也许就是你昨天的经历下午 4:57距离上线还有 3 分钟。测试同事甩来一个 bug「登录按钮的自动化脚本又找不到元素了。」你打开 Chrome DevTools点开 Elements 面板从层层嵌套的div中艰难地找到那个深埋在 Shadow DOM 附近、class 名长得像乱码的按钮。然后你开始手动拼 XPath//div[class...]/span/div[2]/button[1]粘贴到 Console 里试。失败。改。再试。又失败。三分钟过去了你额头上开始冒汗。要是有一个工具能让你在页面上对着元素指一下就能自动生成 XPath还能立刻看到匹配了多少个元素……这就是 XPath Hunter。它是谁XPath Hunter是一款轻量级 Chrome 侧边栏扩展专为开发者、测试工程师、爬虫工程师设计。它的核心理念只有一句话所见即所得。指向哪个元素就给你哪个元素的 XPath。不需要打开 DevTools不需要手动拼 XPath不需要在 Console 里反复试错。用起来是什么感觉 直觉交互按住 Shift指哪打哪打开任意网页按住Shift键鼠标划过页面上任何元素——蓝色虚线高亮跟着你的鼠标走XPath 表达式实时生成并填入侧边栏。放手即生成。放手那一刻XPath 保留在输入框自动执行所有匹配到的元素立刻用红色高亮标记匹配结果卡片一字排开。心理机制即时反馈Instant Feedback— 这是游戏设计中最高效的奖励回路。每一次鼠标移动都有视觉反馈每一个操作都立刻看到结果。你的大脑在说“再来一次。” 多彩并联匹配一张网页上同时追踪多种元素这是 XPath Hunter 的杀手级功能。普通 XPath 工具一次只能匹配一种元素替换掉之前的结果。XPath Hunter按下 Option Shift 点击元素新 XPath 追加到当前匹配列表用不同颜色高亮区分。红色高亮 所有登录按钮蓝色高亮 所有输入框绿色高亮 所有导航链接六种颜色轮转一张页面上同时看到多种元素的分布结果卡片也标注颜色标签。你看到的不是一个 XPath 的孤岛而是一张完整的页面结构地图。心理机制分块认知Chunking— 人类工作记忆只能同时处理 4±1 个信息块。用颜色区分不同 XPath 的匹配结果将一堆散乱的高亮变成有意义的视觉分组大幅降低认知负荷。 你不知道的 XPath它替你写XPath 语法说难不难说简单也记不住。ancestor::、following-sibling::、normalize-space()……XPath Hunter 内置了智能自动补全。输入//触发建议输入contains自动补全函数体甚至光标会落在引号中间等你填内容。还提供了一键模板「所有链接」→//a「按 ID」→//*[id]「所有按钮」→//button点一下模板 ChipXPath 直接填入并执行。心理机制选择过载规避Choice Overload Avoidance— 当面对空白输入框不知道该写什么时预设模板提供启动动量。不是替你做决定而是给你一个起点。 结果卡片每一个匹配元素都值得被看见匹配结果不只是告诉你找到了几个元素。每一个结果都是一张卡片序号徽章多色模式下标记所属 XPath标签名button、div文本内容摘要一眼看到按钮上写着什么 一键滚动定位平滑滚动到元素位置闪烁动画提示 一键复制文本需要提取页面文字点一下全部复制一键复制所有匹配元素的文本爬虫工程师的最爱Hover 卡片 → 页面上的对应元素用橙色高亮向左向右滚动找你不需要。心理机制控制感Sense of Control— 用户不是在盲目地看一串结果而是在逐一检阅每一个匹配。卡片式的交互让用户感到一切尽在掌握。 你可以定义它长什么样默认的红色高亮不够低调背景太亮太刺眼卡片联动颜色不对你胃口打开设置面板精调每一项高亮线型实线/虚线/点线粗细1~8px颜色 背景透明度卡片 hover 联动颜色最大匹配数量点击应用设置立刻生效并重新渲染当前高亮——所见即所得所见即所改。心理机制宜家效应IKEA Effect— 用户对自己参与定制的事物赋予更高价值。当你亲手调出我的高亮颜色这个插件就从一个工具变成了我的工具。 暗色模式 中英双语晚上写爬虫白色侧边栏刺眼一键切换到暗色模式和你的代码编辑器保持一致。面向国际团队一键切换到英文界面。谁最需要它角色场景价值测试工程师编写 Selenium / Playwright 自动化脚本摆脱 F12 → Copy XPath 的笨重流程Shifthover 一键生成还能同时追踪多个元素的定位爬虫工程师从网页中提取结构化数据一键复制所有匹配文本多色追踪不同类型的数据节点前端开发者调试 DOM 结构、理解页面布局直观看到某个 XPath 到底命中了哪些元素不再靠猜入门学习者学习 XPath 语法鼠标指向哪个元素就看到对应的 XPath反向学习效率翻倍市场对比它做对了什么市面上的 XPath 工具有两种DevTools 内置— 右键 Copy XPath。问题是只能复制一种绝对路径/相对路径不能实时预览不能同时追踪多个元素且生成的 XPath 往往过长且脆弱。网页端 XPath 测试器— 需要把 HTML 粘贴进去脱离实际页面。XPath Hunter 卡在一个独特的生态位上它在真实的页面 DOM 中工作但提供了超越 DevTools 的交互体验。它不是 DevTools 的替代品而是你工具箱里缺失的那把钳子。立即安装安装方式访问 Chrome 应用商店 搜索「XPath Hunter」或从 GitHub Releases 下载.crx文件拖入chrome://extensions/页面安装安装后点击浏览器工具栏上的 XPath Hunter 图标侧边栏即刻展开打开任意网页按住Shift键悬停元素开始你的直觉化 XPath 体验按Option Shift 点击追加多个 XPath彩色高亮同时追踪完全免费无广告无追踪。你的页面数据从未离开你的浏览器。最后这可能是一个小工具但它解决的是一个无数开发者每天都在默默忍受的痛点。XPath 不需要成为你的拦路虎。如果你每天至少写一次 XPathXPath Hunter 每天至少为你节省 10 分钟。一年下来它帮你省了整整 40 个小时。安装它试一下。你会奇怪为什么之前没有它。XPath Hunter — 让元素定位回归直觉。Made with ❤️ for developers who deserve better tools.