这是我参与「第四届青训营 」笔记创作活动的的第4天
前端必须知道的开发调试知识
一、本堂课重点内容：
Bug与Debug
- 01.多平台
- 02.多环境
- 03.多工具
- 04.多技巧
二、详细知识点介绍：
Chrome DevTools
1. 动态修改元素和样式
2. Console
3. Sorce Tab
3.1 Break Point与Watch
3.2 Scope与Call Stack
3.3 压缩后的代码如何调试?
使用Source Map
4. NetWork
5. Application
6. Performance
7. Lighthouse
移动端H5调试
1. 真机调试
2. VConsole
3. 使用代理工具调试
4. 常用代理工具
NodeJs调试
常用的开发调试技巧
1. 线上即时修改Overrides
2. 利用代理解决开发阶段的跨域问题
3. 启用本地source map
4. 使用代理工具Mock数据
三、实践练习例子：
Chrome DevTools
1. 动态修改元素和样式
2. Console
3. Sorce Tab
3.1 Break Point与Watch
3.3 压缩后的代码如何调试?
使用Source Map
通常将source map打包生成的文件放在监控程序中以便进行调试
4. NetWork
5. Application
6. Performance
7. Lighthouse
四、课后个人总结：
Source Map 就是一个信息文件，里面存储了代码打包转换后的位置信息，实质是一个 json 描述文件，维护了打包前后的代码映射关系。
Webpack 构建代码中，开启 Source Map ：
