使用浏览器的开发人员工具进行抓取

检查实时浏览器DOM时的注意事项¶

由于开发人员工具在一个活动的浏览器DOM上运行，所以在检查页面源代码时，您实际上看到的不是原始的HTML，而是应用了一些浏览器清理和执行javascript代码后修改的HTML。尤其是火狐，以添加 <tbody> 元素到表。另一方面，scrapy不修改原始页面html，因此如果使用 <tbody> 在xpath表达式中。

因此，您应该记住以下几点：

• 检查DOM以查找要在Scrapy中使用的xpaths时禁用javascript（在“开发人员工具”设置中，单击 Disable JavaScript ）

• 不要使用完整的xpath路径，使用基于属性的相对路径和智能路径（例如 id ， class ， width 或任何识别特征，如 contains(@href, 'image') .

• 从不包括 <tbody> xpath表达式中的元素，除非您真正知道自己在做什么

查看网站¶

到目前为止，开发人员工具最方便的特性是 Inspector feature, which allows you to inspect the underlying HTML code of any webpage. To demonstrate the Inspector, let's look at the quotes.toscrape.com 现场。

在这个网站上，我们总共有来自不同作者的十个引用，其中有特定的标签，还有前十个标签。假设我们想要提取这个页面上的所有引用，而不需要任何关于作者、标签等的元信息。

我们不必查看页面的整个源代码，只需右键单击一个报价并选择 Inspect Element (Q) 打开了 Inspector . 在里面你应该看到这样的东西：

我们感兴趣的是：

<div class="quote" itemscope="" itemtype="http://schema.org/CreativeWork">
  <span class="text" itemprop="text">(...)</span>
  <span>(...)</span>
  <div class="tags">(...)</div>
</div>

如果你在第一个上面徘徊 div 正上方 span 在屏幕截图中突出显示的标签，您将看到网页的相应部分也会突出显示。现在我们有了一个部分，但是我们在任何地方都找不到报价文本。

的优势 Inspector 它自动展开和折叠网页的部分和标签，大大提高了可读性。您可以通过单击标签前面的箭头或直接双击标签来展开和折叠标签。如果我们扩大 span 带标签 class= "text" 我们将看到我们单击的报价文本。这个 Inspector 允许您将xpath复制到选定的元素。让我们试试看。