在 WebStorm 中调试 Vue.js 2

Question

问题是调试器不仅会进入正确的源文件，还会进入由 Webpack 自动生成的 app.js 文件。我怎样才能防止它这样做？

我有以下设置:

我使用 vue-cli 启动了 Vue.js 2 应用程序.我的调试配置如下所示:



我还将这一行添加到 "webpack.dev.conf.js" ; devtool: "source-map" ,

我还将 app.js 文件添加到调试器配置中的异常中:



我使用 npm run dev 启动服务器命令，然后从 WebStorm 启动调试 session 。问题依然存在。有任何想法吗 ？

Answer 1

请检查以下两点:

更改 devtool配置值'eval-source-map'或 '#eval-source-map' (我不知道在有效的 webpack 配置文件中添加 '#' 符号或不添加 '#' 符号之间的区别，但我测试了两者都可以按预期工作)。

添加调试配置就像您的相同步骤。当您在 WebStorm 中点击该调试配置时，系统会自动弹出一个窗口(Google Chrome 或 Firefox)，请确保您只在此页面进行调试，只有在此页面中触发的操作与您的 WebStorm 编辑器同步。这是非常重要的!

它现在可以在我的开发环境中使用。