这是我参与「第四届青训营 」笔记创作活动的第6天
调试
重点知识点
- 开发者工具
- console命令
- 压缩代码的调试方法
- 其他模块
详细知识点介绍
课堂中使用的是谷歌浏览器的开发工具，为方便理解和阅读，我采用了自己喜欢的edge浏览器的开发者工具，二者的开发者工具风格还是比较相似的
开发者工具
通过F12打开，或者是在选项更多工具里找到开发者工具
动态修改样式调试
在样式里可以强制激活伪类或者直接右键dom节点设置强制状态，方便测试
还可以在.cls里进行动态添加类的操作，从而实现给元素添加一个新类进行样式调试
当然也可以直接选中要调试的元素，在右侧样式里进行操作，如下图
命令台console调试
console有六种分别是 :
- consolo.log
- consolo.warn
- consolo.error
- console.debug
- console.info 在控制台中可以选择等级，对日志进行分类查看
console.table 可以具现化的展示json和数组数据 cosole.dir 通过类似文件树的方式展示对象属性
常用的预置技巧：
-
可以给预置添加样式，前面是加占位符，
-
不同类型的值输出的颜色不一样：
可以在源代码区域显示完整的代码，并且可以逐行调试，给要打断点的行用鼠标在行号处点击标记，对应行会变为蓝色，或者是在要断点处加上 debugger；命令
在调试过程中，可以查看到各个变量的值，鼠标悬浮在变量上会显示
值得注意的是开发者模式的调试十分强大，我们还可以在作用域scope里看到许多东西，如闭包closure；在调用堆栈里可以查看当前JavaScript代码的调用栈
压缩代码如何调试
前端代码天生具有“开源”属性，出于安全考虑（尤其是安全相关的js代码），JavaScript的代码通常会被压缩，压缩后的代码变得难以阅读，十分紧凑，并且变量使用a和b来混淆
通过source map
使用webpack打包的代码，在webpack.prod.js文件里有着这样一行
devtool： 'source map'
当我们在源码里预留了异常抛出时，在触发这种异常时可以直接在浏览器开发者工具下看到错误信息和对应的处于源代码的行数，点击行数可以进行跳转到源代码部分，这也就是source map的应用体现
sourece map 会将压缩后的代码与源码之间形成一种映射关系，在我们压缩后的代码下面会有一行注释，表示为 //#sourceMappingURL=XXX.js.map 通过这个文件可以找到映射相关的
但是经过source map后的代码，混淆后的代码体积会增大，性能降低，并且可以映射源码仍有安全问题。source map真正的作用是监控，真正上线部署是没有source map的。
在项目打包的过程中，带上source map去build，但产物里是有source map的，但上线之前将source map上传到另一个平台（如监控平台），然后产物去掉source map，将不带source map的代码上线到平台。映射也是建立在这两个平台之间的。
网络模块 Network
在开发者工具中可以看到这样一个模块network
在这个界面可以看出许多东西，这里也是主要与网络请求有关的一个界面
- 请求的资源以及详细信息，请求的方法和返回的状态码等
- 在最下角可以看到请求的资源总数以及所用时间
- 在右侧时间线里可以分析出哪些部分是串行执行，哪些是并行执行的
在上方可以模拟出各种状态的网络
在和后端连接调试的时候，也是通过network来查看接口请求状态，根据返回状态码看是前端问题还是后端问题，以及返回的结果是否有问题
应用模块 Application
性能模块 Performance
在这一个界面中可以看到各种关于浏览器性能的指数
下面是官方提供测试的一个网站 Janky Animation (googlechrome.github.io)
一般解决卡顿的思路是：查看FPS的指标 -> 寻找性能瓶颈 -> 优化代码
light house
这里可以帮助我们做性能评分，有多个指标帮助我们去衡量站点的性能，
如下图
总结
前端的调试主要是在浏览器的开发者工具上体现的，这节课使得我对开发者工具的各个模块和对应功能有了一定了解，在未来使用中也有方向，不至于调试找不到对应模块。
