web爬虫第二弹 chrome开发者工具

chrome开发者工具文档

中文：http://shouce.jb51.net/chrome/ 英文：
https://developers.google.com/web/tools/chrome-devtools/

chrome开发者工具打开方式

1- 在Chrome菜单中选择 更多工具 > 开发者工具
2- 在页面元素上右键点击， 选择“检查”
3- 使用快捷键Ctrl+Shift+i（mac: cmd+opt+i）
4- F12 (mca不支持F12)

note: 在我们后续的爬虫中有可能会碰到无法打开开发者工具的情况。 其原理是使用js禁用了鼠标键盘操作。
但是无法通过js禁用chrome右上角的 更多工具>开发者工具

Chrome开发工具的使用

chrome开发者工具选项卡包含以下几个部分， 我们一个个查看。

1- 元素面板 （Elements）

part1部分修改开发者工具的展示位置。
part2部分是页面加载的css选择器。
part3部分即为页面最终的展示代码。

这里有必要说一句，元素面板中展示的代码是通过css和js加载渲染过后的代码。 和url对应的响应源码有出入，所以元素面板不适合用于页面分析。

作用多用于元素定位和暂时修改页面元素： 使用元素面板可以自由的操控DOM和CSS 来迭代布局和设计页面
1- 检查和调整页面
2- 编辑样式
3- 调试xpath

note：元素面板实际上呈现出的是已经经过js和css渲染完成之后的页面， 而非原始页面。而在元素面板中的修改只是暂时的， 刷新会重置

2- 控制台 （console）

控制台在开发期间， 可以使用控制台面板记录诊断信息， 或者使用它作为shell在页面上与JavaScript交互。
1- 使用控制台面板
2- 命令行交互

控制台面板特性
1- 消息堆叠
可以再setting中，打开showtimestamps
2- 可调试js并且进行日志追踪
3- 消除控制台信息/console sidebar
4- top执行环境
5- 过滤器Filter
6- console所有设置及说明

3- 源代码面板source （console）

在源代码面板中设置断点来调试javascript， 或者通过workspaces（工作区）链接本地文件来使用开发者工具的实时编辑器。
1-断点调试 script 断点
2- 调试迅销代码
3- 使用开发者工具的workspace（工作区）进行持久化保存

我们以图为例

1- 为客户端从浏览器请求到的所有资源
2.1- 为我们针对资源中的js代码开始打断点
2.2- 为控制台， 可以再断点调试时打印交互
4- 调试时的对象状态
. … watch中可以添加一个监控变量， 断点调试时实时关注变量的变化
5- 断点
6- 堆栈
…call stack为堆栈，我们在调试js脚本时， 会提是堆栈层级
7- xhr请求
…异步监听
8- DOM断点
9- 事件
…事件监听

note:这几个调试按钮尤为常用。
第一个为跳过本次断点；
第二个为逐步调试但是不进入函数内部；
第三个为逐步调试， 遇到函数进入函数内部继续单步调试；
第四个为返回上层。

**4- DevTool - network **
**network是浏览器自带的抓包工具。**其界面如下：

从我们打开开发者工具那一刻开始， network就开始抓包。抓到的包全部显示在途中标注为4的 part4 中
part1： 可以在part4中抓到的所有的包中搜索内容
part2： 为搜索到的结果， 点击后可以在右侧找到相应的包
part3，part4：为抓到的包的展示
part5： 每一个包都有相应的功能选项
…5.1: Header:查看请求头中的数据
…5.2: Payload: 请求发送时需要携带的参数
…5.3: preview： 预览， 可以查看渲染的效果（如查看页面中图片展示效果）
…5.4: response： 获取到的相应结果
…5.5: 请求堆叠， 请求的先后顺序和调用关系
…5.6: 计时器
part6： 单个包中Header选项下， 常规参数
part7： 这个包response相应中的参数
part8： 获取这个包发送的request请求中的参数

5- application

Aplication中包含了很多策略

1- 其中最主要的为cookies中的cookie缓存， 有些网址添加了cookie缓存后， 会优先校验浏览器中的缓存， 如存在cookie则不会再次发包。此时network中就无法获取该页面的请求响应包。需要在这里清除缓存后再次刷新抓包。

2- 浏览器数据库也可以在此查看。浏览器数据库也可作为网页加密的一种策略。
3- 其他策略。（本地策略， 缓存， session等）