这是我参与「第四届青训营」笔记创作活动的的第7天
作为一名前端工程师，我们不仅要拥有编码开发能力，还要拥有良好的调试能力，确保代码的正确性与性能的良好性，所以我们今天学习一写基本但又十分重要的调试知识吧！
bug与debug
bug:无处不在
debug: 多平台；多环；境多工具；多技巧
Chrome DevTools
动态修改元素和样式
Console
- console.table：具象化的展示JSON和数组数据
- console.dir:通过类似文件树的方式展示对象的属性
- 占位符：给日志添加样式，可以突出重要的信息 %S：字符串占位符；%o：对象占位符；%c：样式占位符；%d：数字占位符
Sorce Tab
Break point与watch
scope与call stack
- scope：可以查看作用域列表，包括闭包
- call stack:可以查看JavaScript代码的调用栈
source Map
mappdings字段存储了源文件和Source Map的映射
- 英文：表示源码及压缩代码的位置关联
- 逗号：分割一行代码中的内容
- 分号：代表换行
NetWork
Application
Application展示与本地存储相关的信息
- Local Storage
- Session Storage
- IndexedDB
- Web SQL
- Cookie
performance
lighthouse
移动端H5 调试
真机调试
VConsole
使用代理工具调试
NodejS调试
Inspector Protocol+Chrome DevTool
Inspector Protocol +VS Code
常用开发调试技巧
线上即时修改Overrides
利用代理解决开发阶段的跨域问题
启用本地Source Map
线上不存在SourceMap即可以使用MapLocal网络映射功能来访问本地的Source Map文件
