网页源代码抓取工具(关于如何使用浏览器的开发人员工具进行抓取过程的一般指南)

　　网页源代码抓取工具(关于如何使用浏览器的开发人员工具进行抓取过程的一般指南)

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

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

　　在本指南中，我们将通过从浏览器抓取的方式介绍开发者工具中使用的基本工具。

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

　　由于开发者工具运行在一个活跃的浏览器 DOM 上，当您查看页面源代码时，您实际看到的不是原创 HTML，而是在应用一些浏览器清理和执行 javascript 代码后修改后的 HTML。尤其是 Firefox，可以将元素添加到表格中。另一方面，scrapy 不会修改原创页面 html，因此如果在 xpath 表达式中使用。

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

　　查看网站

　　到目前为止，开发者工具最方便的功能是检查器功能，它允许您检查任何网页的底层 HTML 代码。为了演示 Inspector，让我们看一下该站点。

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

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

　　

　　我们感兴趣的是：

　　

(...)

(...)

(...)

　　如果您将鼠标悬停在屏幕截图中突出显示的 span 标签上方的第一个 div 上，您将看到网页的相应部分也将突出显示。现在我们有一个部分，但我们无法在任何地方找到引用文本。

　　Inspector 的优点 自动展开和折叠网页的部分和标签，大大提高了可读性。您可以通过单击标签前面的箭头或直接双击标签来展开和折叠标签。如果我们使用标签 class="text" 扩展跨度，我们将看到我们单击的引用文本。此检查器允许您将 xpath 复制到所选元素。让我们试试吧。

　　首先在终端：

　　$ scrapy shell "http://quotes.toscrape.com/"

　　然后，返回到 Web 浏览器，右键单击 span，选择标记 Copy> XPath，然后将其粘贴到这个损坏的 shell 中：

　　>>> 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 标签。我们可以在我们的内部 div 标签中使用标签 class="text" 扩展每个跨度并查看每个引用：

　　

“The world as we have created it is a process of our thinking. It cannot be changed without changing our thinking.”

(...)

(...)

　　有了这些知识，我们可以改进我们的 xpath：我们只需要使用以下方法选择 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，但这会不必要地复杂，只需使用 has-class("text") 我们就可以在一行中提取所有引号。

　　此 Inspector 具有许多其他有用的功能，例如在源代码中搜索或直接滚动到您选择的元素。让我们演示一个用例：

　　假设您想在下一页上找到按钮。在搜索栏的右上角键入 Next Inspector。你应该得到两个结果。第一个是带有标签 class="next" 的 li，第二个是一个标签。右键单击 a 标记并选择滚动到视图。如果将鼠标悬停在标签上，您将看到突出显示的按钮。从这里我们可以轻松创建一个后续页面。在这样一个简单的网站上，您可能不需要直观地查找元素，但滚动到视图功能在复杂的网站上非常有用。

　　请注意，搜索栏还可用于搜索和测试 CSS 选择器。例如，您可以搜索 span.text 以查找所有引用文本。这将搜索页面中带有标签 class="text" 的跨度，而不是全文搜索。

　　网络工具

　　在爬取过程中，您可能会遇到动态网页，其中部分页面是通过多次请求动态加载的。尽管这很棘手，但开发人员工具中的 Network-tool 极大地促进了这项任务。为了演示网络工具，让我们看一下页面 /scroll。

　　该页面与基本页面非常相似——第一页，但不是上面提到的下一步按钮，当你滚动到底部时，页面会自动加载新的报价。我们可以直接尝试不同的 xpath，但我们将从 Scrapy shell 中检查另一个非常有用的命令：

　　$ scrapy shell "quotes.toscrape.com/scroll"

(...)

>>> view(response)

　　浏览器窗口应该与网页一起打开，但有一个关键区别：我们看到一个带有单词的绿色条，而不是引用。加载中....

　　

　　这个 view(response) 命令允许我们查看 shell 或稍后蜘蛛从服务器收到的响应。在这里我们看到加载了一些基本模板，包括标题、登录按钮和页脚，但缺少引号。这告诉我们引号是从不同的请求加载的，而不是quotes.toscrape/scroll。

　　如果单击“网络”选项卡，您可能只会看到两个条目。我们需要做的第一件事是单击 Persist Logs。如果禁用此选项，则每次导航到不同页面时都会自动清除日志。启用此选项是一个很好的默认设置，因为它允许我们控制何时清除日志。

　　如果我们现在重新加载页面，您将看到日志中充满了六个新请求。

　　

　　在这里，我们可以看到页面重新加载时发出的每个请求，并可以检查每个请求及其响应。那么让我们找出我们的报价来自哪里：

　　首先单击带有名称的请求滚动条。在右侧，您现在可以检查请求。在 Headers 中，您将找到有关请求标头的详细信息，例如 URL、方法、IP 地址等。我们将忽略其他选项卡并直接单击 Response。

　　您应该在预览窗格中看到的是呈现的 HTML 代码，这就是我们在 优采云 中所说的视图（响应）。相应地，类型日志中的请求为html。其他类型的请求如下 css 或 js 但我们对quotes?page=1 和类型 json 的请求感兴趣。

　　如果我们点击这个请求，我们会看到请求的 URL 是响应是一个收录我们引号的 JSON 对象。我们还可以右键单击请求并打开在新选项卡中打开以获得更好的概览。

　　

　　有了这个响应，我们现在可以轻松解析 JSON 对象并请求每个页面以获取站点上的每个引用：

　　import scrapy

import json

class QuoteSpider(scrapy.Spider):

name = 'quote'

allowed_domains = ['quotes.toscrape.com']

page = 1

start_urls = ['http://quotes.toscrape.com/api/quotes?page=1']

def parse(self, response):

data = json.loads(response.text)

for quote in data["quotes"]:

yield {"quote": quote["text"]}

if data["has_next"]:

self.page += 1

url = f"http://quotes.toscrape.com/api/quotes?page={self.page}"

yield scrapy.Request(url=url, callback=self.parse)

　　这个蜘蛛程序从 QuotesAPI 的第一页开始。对于每个响应，我们分析 response.text 并将其分配给数据。这允许我们像在 Python 字典上一样操作 JSON 对象。我们迭代引号并打印出quote["text"]。如果方便的话，has_next 元素为真（尝试在浏览器中加载 /api/quotes?page=10 或大于 10 的页码，我们增加 page 属性并产生一个新的 Request 将增加的页码插入到网址。

　　在更复杂的 网站 中，可能很难轻松重现请求，因为我们可能需要添加标头或 cookie 才能使其工作。在这些情况下，您可以通过在 Web 工具中右键单击每个请求，然后使用 from_curl() 方法生成等效请求，将请求导出为 cURL 格式：

　　from scrapy import Request

request = Request.from_curl(

"curl 'http://quotes.toscrape.com/api/quotes?page=1' -H 'User-Agent: Mozil"

"la/5.0 (X11; Linux x86_64; rv:67.0) Gecko/20100101 Firefox/67.0' -H 'Acce"

"pt: */*' -H 'Accept-Language: ca,en-US;q=0.7,en;q=0.3' --compressed -H 'X"

"-Requested-With: XMLHttpRequest' -H 'Proxy-Authorization: Basic QFRLLTAzM"

"zEwZTAxLTk5MWUtNDFiNC1iZWRmLTJjNGI4M2ZiNDBmNDpAVEstMDMzMTBlMDEtOTkxZS00MW"

"I0LWJlZGYtMmM0YjgzZmI0MGY0' -H 'Connection: keep-alive' -H 'Referer: http"

"://quotes.toscrape.com/scroll' -H 'Cache-Control: max-age=0'")

　　或者，如果您想知道重新创建请求所需的参数，可以使用该函数获取具有等效参数的字典：

　　scrapy.utils.curl.curl_to_request_kwargs(curl_command:, ignore_unknown_options: = True) →

　　将 cURL 命令语法转换为请求 kwargs。

　　范围

　　返回

　　请求字典

　　请注意，要将 cURL 命令转换为 Scrapy 请求，您可以使用 curl2scrapy。

　　如您所见，在 Network-Tools 中，我们可以轻松复制页面滚动功能的动态请求。抓取动态页面可能非常困难，页面可能非常复杂，但（主要）归结为识别正确的请求并将其复制到蜘蛛中。