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

本文链接：https://blog.csdn.net/qq_21531681/article/details/108394782

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

文章目录

Source面板的使用

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

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

Overrides：将远程的资源下载到本地，然后可以在开发者工具下惊醒编辑，并且开发者工具会更新展示编辑后的文件，可以将一些请求代理到本地的文件当中
$C:\Users\ALIENWARE\AppData\Roaming\Typora\typora-user-images\image-20200829123254424.png$

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使用
在这里插入图片描述