scrapy使用浏览器的开发者工具进行抓取

以下是有关如何使用浏览器的开发人员工具来简化抓取过程的一般指南。今天几乎所有浏览器都内置了开发人员工具，虽然我们将在本指南中使用Firefox，但这些概念适用于任何其他浏览器。

在本文中，我们将通过抓取quotes.toscrape.com介绍浏览器的开发人员工具中使用的基本工具。

由于开发人员工具在实时浏览器DOM上运行，因此在检查页面源时您实际看到的不是原始HTML，而是在应用某些浏览器清理并执行Javascript代码后修改的HTML。特别是Firefox <tbody>以向表格添加元素而闻名。另一方面，Scrapy不会修改原始页面HTML，因此如果<tbody>在XPath表达式中使用，则无法提取任何数据。

因此，您应该记住以下事项：

1. 在检查DOM时禁用Javascript，寻找要在Scrapy中使用的XPath（在Developer Tools设置中单击Disable JavaScript）
2. 从不使用完整的XPath路径，使用基于属性相对和巧妙的人（如id，class，width等），或任何识别特征等 。contains(@href, 'image')
3. <tbody>除非你真的知道自己在做什么，否则永远不要在XPath表达式中包含元素

到目前为止，开发人员工具最方便的功能是Inspector 功能，它允许您检查任何网页的基础HTML代码。为了演示Inspector，让我们看一下 quotes.toscrape.com -site。

在网站上，我们总共有十个来自不同作者的具有特定标签的引用，以及十大标签。假设我们想要提取此页面上的所有引号，而不包含有关作者，标签等的任何元信息。

我们只需右键单击引号并选择，即可打开Inspector，而不是查看页面的完整源代码。你应该看到这样的东西：Inspect Element (Q)

 

对我们来说有趣的部分是：

<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标记，我们将看到我们点击的引用文本。该检查可以让您复制的XPath到选定的元素。让我们试一试：右键单击 标签，选择并将其粘贴到scrapy shell中，如下所示：class= "text"spanCopy > XPath

 

$ scrapy shell "http://quotes.toscrape.com/"
(...)
>>> response.xpath('/html/body/div/div[2]/div[1]/div[1]/span[1]/text()').getall()
['"The world as we have created it is a process of our thinking. It cannot be changed without changing our thinking.”]

最后添加text()我们能够使用此基本选择器提取第一个引号。但是这个XPath并不是那么聪明。它所做的就是从源代码开始沿着所需的路径开始html。那么让我们看看我们是否可以改进我们的XPath：

如果我们再次检查Inspector，我们会在扩展div标记的正下方看到我们有九个相同的div标记，每个标记都与第一个标记具有相同的属性。如果我们扩展它们中的任何一个，我们将看到与我们的第一个引用相同的结构：两个span标签和一个div标签。我们可以使用span标签class="text"内部扩展每个标签，div并查看每个引用：

<div class="quote" itemscope="" itemtype="http://schema.org/CreativeWork">
  <span class="text" itemprop="text">
    “The world as we have created it is a process of our thinking. It cannot be changed without changing our thinking.”
  </span>
  <span>(...)</span>
  <div class="tags">(...)</div>
</div>

有了这些知识，我们可以改进我们的XPath：我们只需使用has-class-extension选择所有span标签，而不是要遵循的路径：class="text" 

 >>> response.xpath('//span[has-class("text")]/text()').getall()
['"The world as we have created it is a process of our thinking. It cannot be changed without changing our thinking.”,
 '“It is our choices, Harry, that show what we truly are, far more than our abilities.”',
 '“There are only two ways to live your life. One is as though nothing is a miracle. The other is as though everything is a miracle.”',
 (...)]

通过一个简单，更聪明的XPath，我们可以从页面中提取所有引号。我们可以在我们的第一个XPath上构建一个循环来增加最后一个XPath的数量div，但是这会不必要地复杂化，只需构建一个XPath has-class("text") 就可以在一行中提取所有引号。

所述检查有很多其它有用的功能，例如在源代码中搜索或直接滚动到你选择的一种元素。让我们演示一个用例：

假设您要Next在页面上找到该按钮。键入InspectorNext右上角的搜索栏。你应该得到两个结果。第一个是标签，第二个是标签的文本。右键单击标签并选择。如果将鼠标悬停在代码上，则会看到突出显示的按钮。从这里我们可以轻松创建一个链接提取器来跟随分页。在诸如此类的简单站点上，可能不需要在视觉上找到元素，但该功能在复杂的站点上非常有用。liclass="text"aaScroll into ViewScroll into View

请注意，搜索栏也可用于搜索和测试CSS选择器。例如，您可以搜索span.text以查找所有报价文本。这不是全文搜索，而是在页面中搜索与span标签完全相同的标签class="text"。