浏览器开发者工具
2024年12月21日大约 3 分钟
这是天天打交道的工具，怎么能不系统学一遍呢
浏览器开发者工具大体功能
元素界面：dom页面
控制台
- 可以进行过滤操作
- 选择log标准输出流到控制台的级别
- 清空控制台
- 这个是交互式页面
源代码的左侧栏目
片段
可以存放个人写的脚本
页面
查看网站的资源
覆盖
每次修改代码后刷新都会被服务器上传的代码覆盖
在这里的内容就会覆盖服务器上传的文件
内容脚本
这里展示一些下载的第三方插件
源代码
右侧栏目
顶栏：
调试选项
用于激活断点调试功能，一定要保持途中这个状态，才能进行断点调试
执行代码一直到下一个断点
单步跳过下一个函数执行，直接执行下一个函数(不会进入到函数内部，也就是直接会的函数的返回值)
单步执行，会进入函数内部，展示过程
跳出当前函数，会直接跳出当前当前正在执行的函数
内容部分栏目：
线程
--
监视
在代码中添加监视断点后，可以在这里监视它的输出结果
例如在这里添加变量名，就可以监控变量内容的变化
断点
打的断点会在这里显示
作用域
在进行debug调试时，输出的debug信息，一般可以看到对象或变量
调用堆栈
从下往上看，执行下一个堆栈，会返回上一个堆栈的地址，一步一步执行
XHR断点/提取断点
DOM断点
在DOM界面右键设置断点
在页面执行对应html标签的修改子树/修改属性/删除节点时，会进行中断
全局侦听器
事件侦听器
在对应时间被触发时，会进行中断
网络
顶栏
打开这个才能进行网络监听
在这里可以搜索接口
搜索，尽在本栏中进行搜索
会保留标准输出流的数据，之前的数据不会清除而是会叠加
网站上的信息回缓存在浏览器内，于是便不会再向服务器要了罢，只是禁止后方能在这里截获完整的数据了
接口栏目
筛选各种接口信息
其他就很好理解了字面意思