爬虫必备工具 —— Chrome 开发者工具

题图:by thefolkpr0ject from Instagram

阅读文本大概需要 4 分钟。

在《论语》中,孔子提倡“学而不思则罔,思而不学则殆”的学习方法。我们再往深层面挖掘,“思”究竟是在思考什么?个人理解是思考并总结出一些共性的东西,即“套路”。有套路了,我们学习或工作会更加有效率。

当我们爬取不同的网站是,每个网站页面的实现方式各不相同,我们需要对每个网站都进行分析。那是否有一些通用的分析方法?我分享下自己爬取分析的“套路”。在某个网站上,分析页面以及抓取数据,我用得最多的工具是 Chrome 开发者工具

Chrome 开发者工具是一套内置于 Google Chrome 中的 Web 开发和调试工具,可用来对网站进行迭代、调试和分析。因为国内很多浏览器内核都是基于 Chrome 内核,所以国产浏览器也带有这个功能。例如:UC 浏览器、QQ 浏览器、360 浏览器等。

接下来,我们来看看 Chrome 开发者工具一些比较牛逼的功能。

01

元素面板

通过元素(Element)面板,我们能查看到想抓取页面渲染内容所在的标签、使用什么 CSS 属性(例如:class="middle")等内容。例如我想要抓取我知乎主页中的动态标题,在网页页面所在处上右击鼠标,选择“检查”,可进入 Chrome 开发者工具的元素面板

通过这种方法,我们能快速定位出页面某个DOM 节点,然后可以提取出相关的解析语句。鼠标移动到节点,然后右击鼠标,选择 “Copy”,能快速复制出 Xpath 、CSS elector 等内容解析库的解析语句。

02

网络面板

网络(Network)面板记录页面上每个网络操作的相关信息,包括详细的耗时数据、HTTP 请求与响应标头和 Cookie,等等。这就是我们通常说的抓包。

其中的 Filters 窗格,我经常使用其来过滤出一些 HTTP 请求,例如过滤出使用 Ajax 发起的异步请求、图片、视频等。

最大的窗格叫 Requests Table,此表格会列出了检索的每一个 HTTP 请求。 默认情况下,此表格按时间顺序排序,最早的资源在顶部。点击资源的名称可以显示更多信息。

  • Headers 是显示 HTTP 请求的 Headers,我们通过这个能看到请求的方式,以及携带的请求参数等。
  • Preview 是请求结果的预览。一般用来查看请求到的图片,对于抓取图片网站比较给力。
  • Response 是请求返回的结果。一般的内容是整个网站的源代码。如果该请求是异步请求,返回的结果内容一般是 Json 文本数据。
  • Cookies 能看到请求携带的 Cookies 以及服务器返回的 Cookies。有时候是需要使用到 Response 的 Cookies。例如,某个页面必须登录才能看到。

原文发布于微信公众号 - 极客猴(Geek_monkey)

原文发表时间:2018-11-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏影子

Ionic如何实现单选二级菜单切换

3699
来自专栏Coding迪斯尼

Reactjs+BootStrap开发自制编程语言Monkey的编译器:创建简易的页面IDE

1682
来自专栏程序员互动联盟

【编程入门】互联网的本质技术

首先要知道网站访问大概是什么个过程: 假设你在浏览器地址栏输入这个问题的地址 http://www.zhihu.com/question/22689579 访问...

46211
来自专栏黑泽君的专栏

Mark Down Pad2在 windows 10 下的安装注册以及 Mark Down Pad2 报错分析

  Mark Down Pad是Windows下的一个多功能Makrdown编辑器。即时看到你的Makrdown文件,当你创建它们的时候,看起来就像是在HTML...

931
来自专栏weixuqin 的专栏

利用 pyspider 框架抓取猫途鹰酒店信息

4887
来自专栏菩提树下的杨过

诡异的【session丢失】和【<img src="">标签】

     项目发布到服务器上面了,但是客户在使用的时候发现,只要进入新增页面和修改页面。再进行操作就会自动跳转到登陆页面(我设置了session保存用户登陆信息...

2465
来自专栏互联网杂技

Angular 1 vs. Angular 2 深度比较

AngularJS 2 尽管还在Alpha阶段,但主要功能和文档已经发布。让我我们了解下Angular 1 和 2 的区别,以及新的设计目标将如何实现。 Ang...

34010
来自专栏韩东吉的Unity杂货铺

零基础入门 3: 窗口介绍(一)

前两篇介绍了Unity的环境布置,破解,平台切换。如果哪里有所遗忘可以翻看历史消息重新巩固下。

1103
来自专栏程序员的诗和远方

React Native 实现二维码扫描

最近刚好在学习 React Native 想搞个扫描条形码,二维码的小应用,因为涉及硬件接口,而且自己本身并没有原生开发背景,踩了几个坑,记录一下。 扫描...

5708
来自专栏BestSDK

一文读懂Xcode 9 所有更新:全新模拟器,兼容Swift低版本等

代码重构功能增强 这次 Xcode 9 对代码重构功能有较大的提升,首先是重命名功能,在编辑器中点击类名,然后选择 Refactor -> Rename: ?...

4267

扫码关注云+社区

领取腾讯云代金券