javascript-debugging

Debug JavaScript Applications

我平时调试的时候，基本都是以打log的方式实现的，也就是用console.log一顿输出，这种方式简单粗暴，但是确实比较费时，还是要掌握正统的调试方法。现在步骤记录如下。

1. 启动项目
2. 来到项目所在的网页，按下F12打开开发者工具。
3. 找到source tab, 然后找到以webpack://开头的源码。
4. 依次展开目录，找到自己的代码，单击代码行左边的行号，就可以添加断点，然后按下F5，刷新页面，这时如果触发到断点，就会停下来。

如果你的项目比较新，使用的是ESBuild + Vite来构建的，那么源文件如下图所示：

Set breakpoint in code

如果觉得以上办法设置断点太麻烦，也可以在代码里面设置，找到对应的代码行数，在前面加一行叫做 debugger,待项目热更新完毕，页面就会停在断点处。十分的方便。

是不是很方便呢？