本文围绕前端开发中所遇见的 BUG 出发，讲解作为一名合格的前端开发人员，你应该掌握哪些开发调试知识。
前端Debug特点
- 多平台（浏览器、App、小程序、pc端）
- 多环境（本地、云上）
- 多工具（Chrome devTools、Charles、Spy-Debugger、 Vhistle、vConsole等）
- 多技巧（Console、BreakPoint、sourceMap、代理等）
下面本文将以不同平台为例，总结梳理各个平台的Debug工具的使用方法
一、Chrome devTools
1.动态修改元素和样式
- 点击.cls开启动态修改元素的class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值（字号、颜色、宽度高度等）
- 可以进行编辑，浏览器内容区域实时预览
- Computed下点击样式里的箭头可以跳转到styles 面板中的css规则
2.Console
- console.log
- console.warn
- console.error
- console.debug
- console.info
- console.table
- console.table 具象化的展示JSON和数组数据
- console.dir 通过类似文件树的方式展示对象的属性
- 占位符 给日志添加样式，可以突出重要的信息： %s:字符串占位符；%o：对象占位符；%c:样式占位符；%d:数字占位符
3.Source Tab
- 区域1：页面资源文件目录树
- 区域2：代码预览区域
- 区域3：Debug工具栏 从左到右依次为： 暂停（继续） 单步跳过 进入函数 跳出函数 单步执行 激活（关闭）所有断点 代码执行异常处自动
- 区域四：断点调试器
4.BreakPoint与Watch
- 使用关键字debugger或代码 预览区域的行号可以设置断点 执行到断点处时代码暂停执行
- 展开Breakpoints列表可以查 看断点列表，勾选取消可以激 活/禁用对应断点
- 暂停状态下，鼠标hover变量 可以查看变量的值
- 在调试器Watch右侧点击+可 以添加对变量的监控，查看该 变量的值
5.Scope与Call Stack
- 展开Scope可以查看作用域列 表（包含闭包） 闭包可以参考 developer.mozilla.org/en- US/docs/Web/JavaScript/Closures 8579
- 展开Call Stack可以查看当前 javaScript代码的调用栈 关于调用栈可以参考 developer.mozilla.org/en- US/docs/Glossary/Call_stack
6.压缩后的代码调试
可以使用SouceMap的映射
7.其他
- Network面板
- Application面板
- Performance面板
- Lighthouse面板
二、移动端H5测试
1.真机调试
ios
1.使用Lightning数据线将iPhone与Mac相连
2.iPhone开启Web检查器（设置->Safari->高 级->开启Web检查器
3.iPhone使用Safari浏览器打开要调试的页面
4.Mac打开Safari浏览器调试（菜单栏一>开发 ->iPhone设备名->选择调试页面)
5.在弹出的Safari Developer Tools中调试
Android
1.使用USB数据线将手机与电脑相连（或直接扫码登陆）
2.手机进入开发者模式，勾选USB调试，并允许调试
3.电脑打开Chrome浏览器，在地址栏输入： chrome://inspect/#devices并勾选Discover USB devices选项
4.手机允许远程调试，并访问调试页面 访客
5.电脑点击inspect按纽
6.进入调试界面
2.使用代理工具调试
常用工具：
- Charles
- Fiddler
- whistle
三、Nodejs调试
1.Inspector Protocol + Chrome Devtool
2.Inspector Protocol + vscode
我的理解与建议：
- 前端需要不断学习和实践。前端技术日新月异，不断学习和实践是保持竞争力的重要途径。参与开源项目、阅读优秀的博客和文章、参加技术交流活动等都可以帮助你不断提升自己的前端开发调试技术。
- 学会阅读文档和搜索引擎的使用也很有帮助
- 多实践和尝试：在实际开发中，多实践和尝试是提升调试能力的关键。通过不断尝试和调试，你会积累经验并逐渐提升自己的调试技巧。
