如何在新版Firefox开发者工具中验证XPath或CSS选择器？

方法一：利用控制台直接执行选择器命令 #

• 打开Firefox开发者工具（快捷键F12或Ctrl+Shift+I），切换到控制台标签页
• 使用快捷命令获取匹配元素：
  • CSS选择器：输入 $$("你的CSS选择器")，回车后返回所有匹配的DOM元素数组，展开结果可查看单个元素详情，通过$$("你的CSS选择器").length能快速确认匹配数量
  • XPath表达式：输入 $x("你的XPath路径")，同样返回匹配元素列表，支持查看总数和单个元素属性

方法二：通过元素面板搜索功能筛选 #

• 打开开发者工具的元素标签页
• 点击面板顶部搜索框（或按Ctrl+F唤起），输入要验证的选择器：
  • CSS选择器直接回车，搜索结果会在面板下方列出所有匹配元素，顶部显示匹配总数
  • XPath需输入完整表达式（如//div[@class='target']），也可点击搜索框右侧下拉菜单，明确选择「XPath」作为搜索类型
  • 点击搜索结果条目，会自动定位到该元素在DOM树中的位置，方便确认是否符合预期

实用小技巧 #

• 控制台选中返回的元素数组后，右键选择「在元素面板中显示」，可快速定位对应元素
• 若需验证元素内容，可在控制台执行类似$$(".item").forEach(el => console.log(el.textContent))的命令，查看元素文本确认准确性

内容的提问来源于stack exchange，提问作者Karidrgn