这是我参与「第五届青训营」伴学笔记创作活动的第 11 天
一、本堂课重点内容：
- 调试概述
- PC 端调试
- Elements
- Console
- Source
- Network
- Performance
二、详细知识点介绍：
前端调试概述
写程序的时候Bug几乎无法避免，要想完全不写bug，除非你不写代码。
前端领域调试与四个特点
| 多平台 | 浏览器、Hybrid、NodeJs、小程序、桌面应用等 |
|---|---|
| 多环境 | 本地开发环境、线上环境 |
| 多工具 | Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole .. |
| 多技巧 | Console、BreakPoint、sourceMap、代理等 |
PC端调试
Elements
Element代表网页的元素和样式
这里可以动态修改样式
强制激活伪类
然后就可以修改样式了
或者还可以在这里
可以在这里搜索样式，免得一个一个去找
console
consle在前端就是用来展示日志的
不同的打日志的方法浏览器显示的效果不一样
注意不同类型的值输出的样式不一样
console.table可以更加方便展示数组，比如说直接console.log数组是这样的
用了console.table就是这样的
console.dir可以展示元素的各种属性
Source
Break Point 和 Watch
可以在源代码里面想要断点调试的地方加上debugger
可以在浏览器上直接打上断点
在调试状态下鼠标移动可以直接查看变量的值
可以在这里添加想要观测的变量
这里展示了所有断点
Scope 与 Call Stack
这个可以控制发送网络请求的时候进入断点
压缩后的代码如何调试
这个可以用SourceMap，原理就是把混淆之后的代码和源代码进行一个映射。
但是这玩意体积很大，要是直接部署上去那就很影响性能，但是你又不能没有这个东西，因为你不能保证你后面不会优化。
所以这个时候一般都会把sourcemap一起打包，然后把打包之后的项目里面的sourcemap删掉，而是把sourcemap上传到一个监控平台。这样子浏览器看出来的是混淆之后的代码，但是如果出错，那么监控平台就会用sourcemap映射出源代码
Network
在这里可以查看各种请求
这里可以模拟弱网环境
在定位问题的时候，首先要搞清是前端问题还是后端问题。前端这边排查就是找到有问题的接口，然后查看请求信息和响应信息是不是都符合预期。
Application
Performance
Performance使用的例子
查看FPS
正常浏览器的fps为60左右，所以这里丢帧了+
右上角有红色小标代表有性能瓶颈
为了更方便地查看性能指标
：Lighthouse
三、课后个人总结：
- 三分写，七分改，调试是个累活也是个精细活，更是一个很重要的活。
- 当然还是平时要练出来能不出bug尽量就不要出bug。
