使用Vue.js在WebStorm中调试

Question

我正在调试Nuxt + Vue.js应用程序，需要查看传递给我的组件方法之一的对象的描述。我还想逐步介绍该方法，以了解问题所在。

我正在使用WebStorm，并已从here中阅读以下内容：

我按照上面的指示进行了操作，然后运行“ npm run dev”，然后在WebStorm中进行调试，我的页面在Chrome中加载，但是我设置的断点从未被实现。

我知道我的方法受到打击，因为我可以在运行于Chrome的Vue应用中看到错误的结果。

我也尝试过在Chrome中使用Vue Devtools，这很棒，但没有提供我想要的逐步功能。否则，我不知道。

这是我的Javascript调试配置：

这与将Vue项目加载到浏览器中的顺序有关吗？我对Vue.js还是很陌生，因此可以提供任何帮助。

Answer 1

[我建议设置Nuxt以使用devtool = 'source-map'生成源地图（例如，请参见https://nuxtjs.org/api/configuration-build/#extend），以使源地图更准确。对我来说很好：