这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天
重点内容： 🍱Debug🍱 🍚Chrome dev🍚
🍠前言🍠
开发过程中，难免会遇到一些bug或者技术性问题，有时候错误很难排除的时候，调试工具就能起到非常好的作用~
🍜Debug 特点🍜
- 多平台：浏览器、Hybrid、NodeJs、小程序、桌面应用等
- 多环境：本地开发环境、线上环境
- 多工具：Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole ...
- 多技巧：Console、BreakPoint、sourceMap、代理等
🍛Chrome devTools🍛
动态修改元素和样式
在
filter筛选器中点击 .cls 开启动态修改元素，输入字符串可以动态的给元素添加类名，勾选或取消类名可以动态的查看类名生效效果，点击具体的样式值(如字号、颜色、宽度高度等)可以进行编辑，比如修改颜色字体大小浏览器的内容区域将能够看到实时预览效果，方便开发者进行调试。
computed 下搜索想要修改的样式信息，点击样式里的箭头可以跳转到 styles面板中的 css 规则直接进行修改，省去一个个去找的麻烦。
补充：强制激活伪类的方式
- 选中具有伪类的元素，点击: hov
- DOM 树右键菜单，选择 Force State
Console
正如它的字面意思，是一个控制台。在编程中的Console常用命令都可以在Console中使用。
- 不同类型的数据Console打印出来的字体效果是不一样的；
- Console.table可以具象化的展示JSON和数组数据；
- console.dir通过类似文件树的方式展示对象的属性；
Source Tab
Break Point 与 Watch
在debug模式中，鼠标移动到某个变量的位置即可查看变量的信息，这些信息也会在Watch观测界面中展现。BreakPoints界面会展示所有断点。
Scope与Call Stack
Scope可以查看作用域列表，列表中包含闭包的内容，Call Stack 可以查看当前JS代码的调用栈。
Source Map
Source Map可以映射源码，将压缩后的代码关系进行映射。在工程上线前，会将生成的Source Map上传到对应的监控平台，然后将压缩后的代码上传到网络上，这样即使别人拿到了你的代码也看不懂里面的内容。如果代码出现了问题，Source Map也可以通过映射关系定位到代码出错的地方，方便进行修改。
Network
这个相对比较熟悉，点击不同的按钮可以显示出不同的文件信息。比如Fetch/XHR就是显示所有接口请求，也就是动态加载信息。
Application
浏览器存储相关的数据，比如Local Storage，Session storage等。
Performance
和网页性能相关，也是开发者比较关心的问题，可以看出网页的完整加载过程的所有信息，方便开发者进行性能的优化。
例如如果页面出现卡顿情况，就去查看FPS指标，然后寻找影响这些指标的性能瓶颈，最后寻找合适的方法去优化代码，解决卡顿的问题。
Lighthouse
显示网页的性能分析结果，给定一个指标。查看每一个指标可以看出影响分数的详细信息，同时也会给出一些建议和优化手段，来为开发者提供参考方案以进行性能的针对性优化。
🍣总结🍣
本节课主要学习了前端开发调试的相关工具，这些工具的使用才是关键，日常生活中，调试往往比编程本身更重要。所以要熟练使用调试工具！
