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开发者工具选项卡包含以下几个部分, 我们一个个查看。
web爬虫第二弹 chrome开发者工具_第1张图片

1- 元素面板 (Elements)

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

这里有必要说一句,元素面板中展示的代码是通过css和js加载渲染过后的代码。 和url对应的响应源码有出入,所以元素面板不适合用于页面分析。
web爬虫第二弹 chrome开发者工具_第2张图片

web爬虫第二弹 chrome开发者工具_第3张图片

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

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

2- 控制台 (console)

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

web爬虫第二弹 chrome开发者工具_第4张图片

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

3- 源代码面板source (console)

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

我们以图为例
web爬虫第二弹 chrome开发者工具_第5张图片

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

web爬虫第二弹 chrome开发者工具_第6张图片

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

**4- DevTool - network **
**network是浏览器自带的抓包工具。**其界面如下:
web爬虫第二弹 chrome开发者工具_第7张图片

从我们打开开发者工具那一刻开始, 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
web爬虫第二弹 chrome开发者工具_第8张图片
Aplication中包含了很多策略

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

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

你可能感兴趣的:(爬虫,python,自我提升,chrome,前端,爬虫)