这是我参与「第五届青训营」伴学笔记创作活动的第九天
一、本堂课重点内容
- Bug 与 Debug
- Chrome DevTools
- 移动端 H5 调试
- NodeJs 调试
- 常用开发调试技巧
二、详细知识点介绍
一、前端 Debug 的特点
- 多平台：浏览器、Hybrid、NodeJs、小程序、桌面应用等。
- 多环境：本地开发环境、线上环境
- 多工具：Chrome DevTools、Charles、Spy-Debugger、Whistle、vConsole
- 多技巧：Console、BreakPoint、sourceMap、代理等
二、Chrome DevTools
- 动态修改元素和样式：强制激活伪类两种方式 1.选中具有伪类的元素，点击:hov 2.DOM树右键菜单，选择Force State
- Console：console.log、console.warm、console.error、console.debug、console.info、console.stable、console.dir。
- Sorce Tab
- Break Point 与 Watch
- Scope 与 Call Stack
- Source Map
- NetWork
- Application
- Performance
- Lighthouse
三、移动端 H5 调试
- 真机调试
- VConsole
- 使用代理工具调试
- 常用代理工具
四、NodeJs 调试
- Inspector Protocal + Chrome Devtool
- Inspector Protocol + VS Code
五、常用开发调试技巧
- 线上即时修改 Overrides
- 利用代理解决开发阶段的跨域问题
- 启用本地 source map
- 使用代理工具 Mock 数据
三、课后个人总结
知道了bug的产生，以及前端debug的特点，动态修改元素和样式，以及如何强制激活伪类的方法， console.state具象化的展示JSON和数组数据，console.dir通过类似文件树的方式展示对象的属性，占位符给日志添加样式，可以突出重要的信息，以及另外5种console的方法。
更加详细的了解了Source Tab的结构，使用关键字debugger或代码预览区域的行号可以设置断点，以及一些常见的面板工具，比如netWork,Chrome Devtool,Application等，还知道了mock数据，以及学会把自己的代码讲出来让自己更加快速的定位到错误的地方。 这让我以后在写代码的时候更加方便了，也能更舒服的去写代码，更加便捷，也更加快乐了。
