开发者工具在爬虫精进时的必知必会

Source面板的使用

Page:当前网站的资源目录面板

Filesysterm:可以加载本地的文件，可以调试编辑相当于一个idea

Overrides：将远程的资源下载到本地，然后可以在开发者工具下惊醒编辑，并且开发者工具会更新展示编辑后的文件，可以将一些请求代理到本地的文件当中

Content scripts:是Chrome插件加载的脚本

Snippets允许你存放 JavaScript 代码到 DevTools 中，方便你复用这些 JavaScript 代码块
scources面板snippets中new snippet。可以直接右键run运行也可以用[ctrl] + [enter]
Ctrl + P 打开menu。在command menu 用！+代码块名 查找预设代码块

添加条件断点

Watch监控变量

基于事件的断点

XHR/fetch Breakpoints 1.当XHR 生命周期发生改变的时候，2.url于设置的字符串相匹配的时候，才会端上该断点 

DOM Breakpoints的断点 （不常用）

基于事件监听的断点：Event Listener Breakpoints

Call Stack ：堆栈 以一个倒序排列的方式将堆栈，展示出来，列表是从当前函数起，逐级调用取追寻调用倒它的函数名，以一个反序的方式排列

Local：作用域内容，展示当前断点所在的作用域的内容，当我们没有停在断点的是时候，作用域内容是空的

Console面板的使用

console.info 向控制台输出提示信息

console.error 向控制台输出错误信息

console.warm 向控制台输出警告信息

console.assert 断言

console.table() 以表格的形式展示变量

使用copy()方法复制变量的值到粘贴板中

console 面板中 $ 变量如果未曾被定义 过就是document.querySelector的别名。
$$不仅执行 document.QuerySelectorAll 并且它返回的是：一个节点的 数组 ，而不是一个 Node list
$_ 是对控制台上次执行的结果的引用
$_ 记录最近一次console中计算的值

$x(‘’) 结合Xpath使用

doucument.cookie 查看当前网站的cookie

Network面板的使用

查看每一个请求的依赖关系
使用Shift键、鼠标悬停在某一个请求上时，可以看到红色显示的请求是依赖于当前请求的，绿色显示的是当前请求的发起者


by the way : ctrl + p 查找当前网站的资源文件
ctrl + u 查看网页源码