使用 Google Chrome 开发者工具审查和验证 XPath/CSS 选择器

最近更新于 - 2017年5月30日

Google Chrome 浏览器自带了叫做 "Chrome DevTools" 前端调试工具。 它包含一系列方便的调试工具，其中包括了在不添加额外插件的前提下，直接审查和验证 XPath/CSS 选择器的功能。

这可以通过如下两种方式完成：

• 使用 Elements 面板内的搜索功能来在 DOM 中审查验证并高亮 XPath/CSS 选择器。
• 在 Console 面板中执行命令 $x("some_xpath") 或 $$("css-selectors")来审查和验证。

通过 Elements 面板

1. 键入 F12 来开启 Chrome DevTools。
2. 默认设置下 Elements 面板将会自动打开。
3. 在当前面板下键入 Ctrl + F 来启用搜索模式。
4. 输入 XPath 或 CSS selectors 选择器来进行审查和验证。
5. 如果有任何元素被成功匹配，它们将会在 DOM 中以黄色高亮。
   注意，如果任何字符串也被该 XPath 或 CSS selectors 选择器成功匹配，它们也将被认为是有效的搜索结果。 比如，CSS 选择器 header 将会匹配 DOM 中（包含 CSS 和脚本）含有 header 的任何关键字，而不仅仅是页面的元素。

通过 Console 面板

1. 键入 F12 来开启 Chrome DevTools。
2. 切换至 Console 面板。
3. 输入 XPath 选择器，如 $x(".//header") 来进行审查和验证。
4. 输入 CSS 选择器，如 $$("header") 来进行审查和验证。
5. 检测命令运行结果
   • 如果有页面元素被成功匹配，它们将会被在一个列表中返回。否则，将返回一个空列表 []。

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

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

   • 如果 XPath 或者 CSS selector 不合法，一个异常将被抛出并以红字显示。例如：

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

优点和缺点

一个方法的优点往往是另一个的缺点，或反之。