- 之前开发前端一直使用是在控制台使用打印的log内容，来调试以及解决bug，然后再删除自己用于调试而写的console.log()，非常麻烦。
虽然也听说过浏览器自带的打断点的方法,但是一直没时间实践学习一下。- 后来做了一部分后端工作后，发现后端的调试方法非常方便，并且还可以跟着调试的节奏一步一步的理解代码的逻辑，非常方便。
- 用过好的debug方法，就基本无法再使用以前
那么蠢的方式了。如果前端也有像后端一样的断点调试方法就好了，答案是肯定的，今天就总结下直接使用web浏览器(以edge为例)对前端源代码进行debug。(无需安装任何插件，完全使用web浏览器自带的工具)
1. 运行本地代码
- 运行
localhost环境下的本地代码, 打开F12浏览器检查工具。
2. 源代码
点击
源代码(sources)-> 选择此Tab下的工作区(workspace)-> 点击添加文件夹(add folder)-> 选择运行在这个localhost的前端代码的文件夹 -> 选择相关代码的文件，然后在自己需要调试的地方打断点debug
3. 查看调试结果
- 只要在本地运行的代码上打了断点，就可以一步一步的查看，前端代码运行的逻辑，但是有时候也需要查看相关代码的数据的变化。
- 检查工具右侧的
监视(Watch)中，添加我们需要监听的变量，然后就可以在断点debug中,一步一步观察出变量数据的变化，从而帮助我们快速缩小bug的范围和理解代码的运行逻辑。
4. 总结
使用web 浏览器，自带的调试工具，打
断点debug调试。
- 可以方便快速的定位bug位置。
- 方便理解前端代码的运行逻辑。
- 不需要频繁写log，来判断数据的变化，省去了之后还要删除的麻烦。
- 也无需频繁启动，代码减少内存占用，有效防止浏览器死机的风险。
