这是我参与「第四届青训营 」笔记创作活动的第9天

引言

调试技巧，在任何一项技术研发中都可谓是必不可少的技能。编写完代码后，我们需要通过调试检查代码中的一些问题：拼写是否有误、是否触发了正确响应、逻辑中是否有错误等。通过检查代码可以快速排查问题，保证代码正常运行。

1、前端Debug特点

• 多平台
  浏览器、nodejs、小程序、桌面应用…
• 多环境
  本地开发环境、线上环境
• 多工具
  chrome、devTools、Charles、Spy-Debugger、vConsole…
• 多技巧
  Console、BreakPoint、sourceMap、代理…

2、console 调试

前端开发经常需要进行JS调试，而JS调试主要用到console的相关方法，其结合浏览器的控制台（比如Google）进行，能够让你快速定位、解决问题。

一般情况下我们用来输入信息的方法主要是用到如下四个：

1、console.log 用于输出普通信息

2、console.info 用于输出提示性信息

3、console.error用于输出错误信息

4、console.warn用于输出警示信息

在微信小程序的测试，我会经常使用console.log 去打印一些关键信息，查看代码究竟卡在了哪一步，然后进行逐行调试。通过这个小技巧，可以快速排查问题，查看代码中的一些关键信息。

3、浏览器断点

在浏览中断点其实是一种比较好的方式，可以省去删除代码中bedugger的方式，首先需要有项目源代码的soureceMap，webpack打包工具里面会默认开启sourceMap的配置，可以直接在浏览器里面断点，在行数的地方可以直接加上断点，F8可以直接跳转到下一个断点，F10可以单步骤调试，F11可以直接进入方法，也相当于单步调试了。

总结

今天介绍了前端必须知道的开发调试知识，针对不同的场景要选择合适的调试方法。选择合适的调试工具，耐心寻找问题，早日调试成功吧！一起调试学习吧！！！

烟火向星辰，所愿皆成真！