这是我参与「第四届青训营 」笔记创作活动的的第8天
前言
调试是项目开发中非常重要的环节。掌握一些调试技巧，不仅能帮助我们定位到问题，还能提升我们的开发效率，部分演示图是Edge上的，我觉得大差不差
Chrome Devtools
Chrome 开发者工具 (Chrome DevTools) 是一套内置于 Google Chrome 中的 Web 开发和调试工具，可用来对网站进行迭代、调试和分析。
怎么打开Dev tools？ 可以右击-->检查 ， 也可以使用快捷键：F12
1、动态修改元素和 样式
Elements 也就是元素样式调试
通过检查我们可以在浏览器里找到需要调试的内容，并进行改动，也可以在要调试的方块上直接右击检查，并调试 （ 因为我用的浏览器是Edge所以是中文，大同小异，一通则通 ）
比如把方块一的背景划掉：
亦可以处添加一个新类名：
伪类或者说状态不同的怎么调试呢？在要调试的地方右键即可~
怎么样，是不是感觉很简单，如果项目较大，类名较多，还可以搜索，等等等， 就不过多介绍
2、Console
字面意思可以知道他是一个控制台
它可以打字，展示日志，等等.比如：
console.log
console.warn
console.error
console.debug
console.info
还可以给日志添加样式，可以突出重要的信息
%S:字符串占位符; %0: 对象占位符; %C:样式占位符， %d:数字占
位符
日志左侧有分类
不同类型的值在日志里输出的颜色不一样
console.table 具像化的展示JSON和数组数据
console.dir 通过类似文件树的方式展示对象的属性
3、Sorce Tab
可以使用
debugger 或使用断点让代码运行到该处暂停，经过排查就会比较容易发现代码的问题出现的位置，并解决掉它~
debugger：
断点：
3.1、Break point与Watch
可以把鼠标移到需要观测的值上直接观测
也可以在区域4的watch里输入要观测的值
显示断点
3.2、Scope 与 Call Stack
展开Scope可以查看作用域列表包含闭包
展开Call Stack可以查看当前javaScript代码的调用栈
3.3、压缩代码调试
前端代码天生具有“开源"属性，出于安全考虑， 上线之前JavaScript代码通常会被压缩，压缩后的代码只有一行，变量使用'a'、 'b' 等替换，整体变得不可阅读。
3.4、Source Map
我们线上的代码一般都是经过打包的，如果线上代码报错了，基本无法调试，所以这个时候， Source Map 的作用就来了， Webpack 构建代码中，开启 Source Map需要注意的是：Source Map 并不是 Webpack 特有的，其他打包工具同样支持 Source Map ，打包工具只是将 Source Map 这项技术通过配置化的方式引入进来，各种主流前端任务管理工具，打包工具都支持生成 Source Map 。
然后重新执行构建，再次打开浏览器就可以成功定位到具体的报错位置了
4、NetWork
大致布局
表示正常记录网络的请求状况，点击，当图标变成
时，代表停止记录请求状况,此时页面上不会对后续请求进行记录(保留点击前的记录)。
其中可以在过滤面板的Fetch/XHR里查看各种接口请求与对应的返回结果，等
- Headers（标头）选项卡可以检查HTTP标头
- Perview（预览）选项卡可以预览这个资源，比如图片什么的
- Response（响应）选项卡也是就是基于本资源请求后，服务器的响应
还可以模拟低网络下的加载情况
点击右侧设置图标后会出现几个选项
5、Performance
- 区域1:控制面板
- 区域2:概览面板
- FPS:每秒帧数
- CPU:处理各个任务花费的时间
- NET:各个请求花费时间
- 区域3:线程面板
- Frames:帧线程
- Main:主线程，负责执行Javascripl,
- 解析HTML/CSS,完成绘制
- Raster: Raster线程， 负责完成某个e'zlayer或者某些块(ile)的绘制。
- 区域4:
- 统计面板
Performance较为复杂，就不过多讲解
6、Lighthouse
Lighthouse 和Performance也是与性能有关，不过相对简单，开始分析后会有相应分数，以及一些优化建议
性能有核心web指标，如下图
总结
这次大致讲了前端的浏览器调试，如何运用调试工具去帮助我们查找bug，优化，等等。对什么是前端调试有，为啥要调试有了认识
