Chrome 复制 XPath 的风险与谨慎使用建议

时间：10-28 神话故事提交错误

本篇文章给大家谈谈Chrome 复制 XPath 的风险与谨慎使用建议，以及对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。

但我希望你不要过于依赖这个功能。因为它给出的结果仅供参考，有时它不允许你提取数据。让我们看一个例子。

图片这是一个非常简单的HTML 页面。页面中有一个表，表中有一个名为phone的列。我现在想提取这里的5 个电话。如果我们直接使用Chrome的复制XPath功能，我们可以得到如下XPath：

/html/body/div/table/tbody/tr[3]/td[4] 这个其实对应的是刘小三线路的电话字段。然后，如果我们删除tr 后面的数字，似乎我们可以覆盖所有行：

在XPath Helper 上运行/html/body/div/table/tbody/tr/td[4]/text() 查看效果。确实提取了所有电话号码，如下图：

但如果你用requests爬取这个网页，然后用XPath提取电话号码，你会发现什么也提取不出来，如下图所示：

对于图片，你可能会认为这应该是异步加载导致的问题。表中的数据是通过Ajax在后台加载的，并不在网页的源代码中。

然后我们打印看一下网页的源代码：

从图中可以看到，数据在网页源代码中，那么为什么我们在Chrome上通过XPath Helper可以提取数据，而使用请求却无法提取数据呢？

事实上，如果你仔细观察从Chrome复制过来的XPath，你会发现里面有一个tbody节点。但是我们的网页源码中没有这个节点。

这是关于Chrome开发者工具中显示的HTML代码与网页真实源代码之间的差异。很多人分不清两者的区别，因此他们写的XPath无法与数据匹配。

当我们谈论网页源代码时，我们指的是在网页上右键单击并选择“显示网页源代码”按钮可以查看的HTML代码，如下图所示：

查看源代码的页面是这样的：

请注意图片的地址栏以view-source:开头。这是网页的真正源代码。

Chrome开发者工具中Element标签显示的源代码如下所示：

图像中这两个地方的HTML代码可能是是不同的，并且在现代网站中，这两个地方的HTML代码大概率是不一样的是不同的。当我们使用requests或者Scrapy的时候，我们得到的是第一种情况的源码，也就是网页的真实源码。开发者工具中的HTML代码是经过Chrome浏览器修改甚至大幅添加或删除的HTML代码。当网站异步加载时，JavaScript 可以轻松地在此处添加和删除大量内容。即使网站没有异步加载，如果网站原始HTML代码不够规范或者存在一些错误和遗漏，Chrome浏览器也会自动纠正和调整错误。

以本文的例子为例，在HTML的官方规范中，表格的正文文本确实应该用标签包裹起来。但现在大多数情况下，前端开发者都会省略这个标签，所以真正的源码中是没有这个标签的。 Chrome会自动识别这种情况，并自动添加这个标签，所以你在开发者工具中看到的HTML代码都会有这个标签。

当你编写爬虫时，不仅Chrome开发者工具中复制的XPath仅供参考，甚至开发者工具中显示的HTML代码也仅供参考。你应该首先检查你需要的数据是否在真正的源代码中，然后决定是写XPath还是抓取接口。如果您正在编写XPath，那么应该以真正的源代码为准，而不是开发人员工具中的HTML 代码。