这是我参与「第五届青训营 」笔记创作活动的第15天
一、重点内容介绍：
1、Bug和Debug
2、Chrome DevTools
3、移动端H5调试
4、Node.js调试
5、常用开发调试技巧
二、详细知识点
1、Bug和Debug
BUG的产生
- 第一个bug的产生：bug原意本来为昆虫的意思。
- 因为第一个bug是继电器中的一只飞蛾而得名。
- 如果调试是去除软件错误的过程，那么编程一定是把它们放进去的过程。
前端Debug的特点
- 1.多平台：浏览器、Hybrid、Nodejs、小程序、桌面应用等
- 2.多环境：本地来开发环境、线上环境
- 3.多工具：Chrome devTools、Charles、Spy-Debuger
- 4.多技巧：Console、BreakPoint、sourceMap、代理等
2、Chrome DevTools
- 动态修改元素和样式：可以选择样式生效与否，预览修改等
- Console：查看日志等级，日志分类，动态调试
- Source Tab：页面资源+代码预览+debug工具+断点调试器
-
- Break Point与Watch
-
- Scope与Call Stack
- Source Map：用于调试压缩后的代码
- NetWork：控制，过滤，概览，总结，请求
- Application：展示与本地存储相关的信息
- Performance：控制，概览，线程，统计
- Lighthouse：web指标
3、移动端H5调试
真机调试
- IOS：需要mac
- 安卓：win，mac都可以
VConsole
- 日志，网络，节点，存储，自定义插件等
代理工具调试
- 电脑作为代理服务器，手机通过HTTP代理连接到电脑，手机上的请求都经过代理服务器。
- 常用代理工具
Charles：适合查看、控制网络请求，分析数据
Fiddler：与Charles类似，适合windows平台
spy-debugger：远程调试手机页面、抓包
Whistle：基于Node实现的跨平台Web调试代理工具
4、Node.js调试
- Inspector Protocol + Chrome Devtool
- Inspector Protocol + VS Code
5、常用开发调试技巧
- 线上及时修改Overrides
- 利用代理解决开发阶段的跨域问题
- 启用本地Source Map：
线上不存在 Source Map 时可以使用 Map Local 网络映射功能来访问本地的 SourceMap 文件。 - 使用代理工具Mock数据
- 小黄鸭调试大法：
传说中程序大师随身携带一只小黄鸭，在调试代码的时候会在桌上放上这只小黄鸭，然后详细地向鸭子解释每行代码，然后很快就将问题定位修复了。《程序员修炼之道》
小结
通过今天课程的学习，我了解了以上这些日常开发中常用的前端调试工具。
他们涵盖多个平台，包含多个工具和使用的技巧，我感觉收获到了很多的新知识。
