每个网站抓取的代码各不相同,不过背后的原理是相通的。对于绝大部分网站来说,抓取的套路就那么一些。今天这篇文章不谈任何具体网站的抓取,只来说一个共性的东西:
如何通过 Chrome 开发者工具寻找一个网站上特定数据的抓取方式。
(我这里演示的是 Mac 上的英文版 Chrome,Windows 中文版的使用方法是一样的。) > 查看网页源代码在网页上右击鼠标,选择“查看网页源代码”(View Page Source),就会在新标签页中显示这个 URL 对应的 HTML 代码文本。
此功能并不算是“开发者工具”一部分,但也很常用。这个内容和你直接通过代码向此 URL 发送 GET 请求得到的结果是一样的(不考虑权限问题)。如果在这个源代码页面上可以搜索到你要内容,则可以按照其规则,通过正则、bs4、xpath 等方式对文本中的数据进行提取。
不过,对于很多异步加载数据的网站,从这个页面上并不能搜到你要的东西。或者因为权限、验证等限制,代码中获取到的结果和页面显示不一致。这些情况我们就需要更强大的开发者工具来帮忙了。 > Elements在网页上右击鼠标,选择“审查元素”(Inspect),可进入 Chrome 开发者工具的元素选择器。在工具中是 Elements 标签页。
Elements 有几个功能:
选择元素:通过鼠标去选择页面上某个元素,并定位其在代码中的位置。
模拟器:模拟不同设备的显示效果,且可以模拟带宽。
代码区:显示页面代码,以及选中元素对应的路径
样式区:显示选中元素所受的 CSS 样式影响
从 Elements 工具里定位数据比我们前面直接在源代码中搜索要方便,因为你可以清楚看到它所处的元素结构。但这边特别提醒的是: Elements 里看到的代码不等于请求网址拿到的返回值。
它是网页经过浏览器渲染后最终呈现出的效果,包含了异步请求数据,以及浏览器自身对于代码的优化改动。所以,你并不能完全按照 Elements 里显示的结构来获取元素,那样的话很可能得不到正确的结果。 > Network在开发者工具里选择 Network 标签页就进入了网络监控功能,也就是常说的“抓包”。
这是爬虫所用到的最重要功能。它主要解决两个问题: