如何在Webstorm中调试Vue代码

如何在Webstorm中调试Vue代码

1. 在vue.config.js文件中添加devtool设置：

```
module.exports = {
 configureWebpack: {
   devtool: 'source-map'
 }
}
```

2. 添加配置项

2.1 点击Edit Configurations

2.2 点击“+”，选择JavaScript Debug，添加一个JavaScript Debug配置项

2.3 为配置项命名，这里命名为Debug；URL：填写待调试项目运行时的域名和端口号，我这里使用的是81端口，具体根据实际情况修改；Browser：选择调试运行的浏览器，默认即可，然后点击Apply和OK保存配置项。

3. 调试项目

3.1 运行待调试项目，一般是通过：npm run dev 或者npm run serve；成功运行后，会提示项目访问URL，这个要和前文提到的Debug配置项里面URL保持一致。

![2022-03-22-14-35-37-image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3153379678524e16b3b1dbc617f28c4c~tplv-k3u1fbpfcp-watermark.image?)

3.2 使用Debug模式运行前文配置好的Debug配置项

3.3 webstorm会打开浏览器，并访问http://localhost:81/ 页面

3.4 现在可以在webstorm中设置断点，开启你的调试之旅了。