概述

在实际抓取网页内容的时候，需要实时的调试xpath，查看它的捕获结果是否准备。
下面是三种方式，可以根据需要自行使用。

方式1：自带搜索框执行XPath表达式

  1. 按F12打开调试窗口
  2. 按CTRL+F打开搜索窗口
  3. 输入xpath表达式，即可开始定位元素

image.png

优点：简单方便
缺点：如上图所示，xpath表达式同样会被当作字符串进行搜索。
只要含有和xpath表达式一样的字符串，也会被搜索到。

方式2：Console命令执行XPath表达式（推荐）

  1. 按F12打开控制台
  2. 执行下面的命令，运行xpath表达式：

$x("//div[@class='user-info ']")
image.png

如果要使用css表达式搜索，则命令为：$$(“head”)

这种方式个人比较喜欢，因为能一次性看到所有的匹配结果，而且方便再次通过js过滤。

语法

**$x(path [, startNode])**

startNode是可选参数，如果没有的话，就会从根节点开始搜索。 有的话，则从startNode开始搜索。

参考：
Chrome XPath官方文档介绍
XPath queries in Google Chrome console

方式3：通过插件调试（不推荐）

下载地址

https://chrome.google.com/webstore/detail/xpath-helper/hgimnogjllphhhkhlmebbmlgjoejdpjl

直接使用chrome和谐安装的时候总是失败，后面改用edge安装了这款插件。

使用方式

  1. 点击浏览器右上角的image.png按钮，可以调出xpath的界面。

以淘宝网举例，如下所示：
image.png

  1. 输入xpath表达式，可以在右边看到结果：

    这里需要注意的是，如果xpath的结果不包含文本，则不会显示出内容，只显示获取到结果结果！！！

image.png

参考

Evaluate and validate XPath/CSS selectors in Chrome Developer Tools

前两种方式都是整理自这篇文章，我自己原先用的是插件这种方式，惭愧！