在某个网站上,分析和抓取数据,我们用的最多的工具就是 Chrome 开发者工具

01 元素面板

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

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

02网络面板

  网络(Network)面板记录页面上每个网络操作的相关信息。包括详细的好事数据、HTTP 请i去与响应报头和 Cookie 等等。这就是我们所说的抓包。

  

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

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

Headers:是显示 HTTP 请求的 Headers, 我们通过这个能看到请求的方式,以及携带的请求参数等。

Preview:是请求结果的预览,一般用来查看请求到的图片。对于抓取图片网站比较给力。

Response:是请求返回的结果。一般的内容是整个网站的源代码,如果该请求是异步请求,返回的结果内容一般是 json 文本数据。

Cookies:能看到请求携带的 Cookie 以及服务器返回的 Cookies。有时候需要使用到 Response 的 Cookies, 例如, 某个页面必须登录才能看到。

爬虫必备工具-chrome 开发者工具的更多相关文章

  1. 前端开发必备之Chrome开发者工具(下篇)

    本文介绍的 Chrome 开发者工具基于 Chrome 65版本,如果你的 Chrome 开发者工具没有下文提到的那些内容,请检查下 Chrome 的版本 本文是 前端开发必备之Chrome开发者工具 ...

  2. 前端开发必备之Chrome开发者工具(一)

    本文介绍的 Chrome 开发者工具基于 Chrome 65版本,如果你的 Chrome 开发者工具没有下文提到的那些内容,请检查下 Chrome 的版本 简介 Chrome 开发者工具是一套内置于 ...

  3. 前端开发必备之Chrome开发者工具(上篇)

    本文介绍的 Chrome 开发者工具基于 Chrome 65版本,如果你的 Chrome 开发者工具没有下文提到的那些内容,请检查下 Chrome 的版本 简介 Chrome 开发者工具是一套内置于 ...

  4. Chrome开发者工具关于网络请求的一个隐藏技能

    这个隐藏技能的背景是,最近出于学习目的,我写了一个百度贴吧的网络爬虫,专门爬取一些指定主题的贴吧帖子. 抓取帖子用的JavaScript函数如下: function getPostByAJAX(req ...

  5. Chrome开发者工具不完全指南:(三、性能篇)

    卤煮在前面已经向大家介绍了Chrome开发者工具的一些功能面板,其中包括Elements.Network.Resources基础功能部分和Sources进阶功能部分,对于一般的网站项目来说,其实就是需 ...

  6. Chrome开发者工具不完全指南(四、性能进阶篇)

    前言 Profiles面板功能的作用主要是监控网页中各种方法执行时间和内存的变化,简单来说它就是Timeline的数字化版本.它的功能选项卡不是很多(只有三个),操作起来比较前面的几块功能版本来说简单 ...

  7. Chrome开发者工具不完全指南(五、移动篇)

    前面介绍了Chrome开发者工具的大部分内容工具,现在介绍最后两块功能Audits和Console面板.一.Audits Audits面板会针对目前网页提出若干条优化的建议,这些建议分为两大类,一类是 ...

  8. Chrome开发者工具详解(5)-Application、Security、Audits面板

    Chrome开发者工具详解(5)-Application.Security.Audits面板 这篇文章是Chrome开发者工具详解这一系列的最后一篇,介绍DevTools最后的三个面板功能-Appli ...

  9. Chrome开发者工具不完全指南(六、插件篇)

    本篇是Chrome开发者工具的结尾篇,最后为大家介绍几款功能强大的插件.在chrome商店里面有很多插件,没事建议大家去逛逛.不过需要FQ,所以诸位请自备神器.一.皮肤插件 首先是大家期盼已久,翘首以 ...

随机推荐

  1. js splice()

    //arrayObject.splice(index,howmany,item1,.....,itemX) 语法 //测试代码let array;array = ['George','John','T ...

  2. torchvision的理解和学习 加载常用数据集,对主流模型的调用.md

    torchvision的理解和学习 加载常用数据集,对主流模型的调用 https://blog.csdn.net/tsq292978891/article/details/79403617 加载常用数 ...

  3. java中一个类中的 this. 是什么作用

    2)this代表的是本类的实例对象,不是什么调用本类的方法的对象.当你用new创建一个对象的时候,对象就已经在内存了.(具体的你的血jvm和反射).构造方法只是为了给对象里的属性赋值.在类里任何地方出 ...

  4. 【转载】C++面试题(1-50)

    转自http://www.jobui.com/mianshiti/it/cpp/5017/ 1.    面向对象的程序设计思想是什么? 答:把数据结构和对数据结构进行操作的方法封装形成一个个的对象. ...

  5. 机器学习(ML)十六之目标检测基础

    目标检测和边界框 在图像分类任务里,我们假设图像里只有一个主体目标,并关注如何识别该目标的类别.然而,很多时候图像里有多个我们感兴趣的目标,我们不仅想知道它们的类别,还想得到它们在图像中的具体位置.在 ...

  6. vue中父组件向子组件传值问题

    问题:当父组件传值给子组件echarts时,发现子组件获取的props为空,刚开始以为是钩子函数放错了地方,后来发现从mounted和created都不行.当在父组件data定义传递的数据的时候子组件 ...

  7. 用synchronized实现互斥锁

    package seday10;/** * @author xingsir * 互斥锁 * 当使用synchronized锁定多个代码片段,并且他们指定的同步监视器对象是同一个时,那么这些代码片段之间 ...

  8. android如何让checkbox实现互斥以及android验证端cession登录注意事项

    1.CheckBox有一个监听器OnChangedListener,每次选择checkbox都会触发这个事件, 里边有一个参数isChecked,就是判断checkbox是否已经选上了的,可以在这判断 ...

  9. opencv:图像噪声

    常见噪声的类型: 椒盐噪声 高斯噪声 其他噪声...... 手动生成图像噪声: #include <opencv2/opencv.hpp> #include <iostream> ...

  10. 【StarUML】时序图

    时序图是可视化地展示对象与对象之间的联系的图,与其他的图相比,它跟侧重于表现为了完成一个用例,对象之间是怎么协同工作的. 之前学习的组件图.用例图都能表现对象之间的联系,侧重的是"有哪些联系 ...