javascript 使用Vue.js在WebStorm中调试

wpx232ag 于 2023-03-16 发布在 Java

关注(0)|答案(2)|浏览(189)

我正在调试一个Nuxt + Vue.js应用程序，需要查看传递给组件方法之一的对象的描述，我还想单步调试该方法，看看它有什么问题。
我正在使用WebStorm，并已从here阅读了以下内容：

我按照上面的指示做了，运行“npm run dev”，然后在WebStorm中点击debug，我的页面加载到Chrome中，但我设置的断点从未被点击。
我知道我的方法被击中了，因为我可以在Chrome中运行的Vue应用程序中看到它的错误结果。
我也试过在Chrome中使用DevVue工具，这很棒，但是没有提供我想要的单步执行功能，或者如果有，我也不知道。
下面是我的Javascript调试配置：

这是否与Vue项目加载到浏览器中的顺序有关？我对Vue.js还是个新手，所以任何帮助都将不胜感激。

JavaScript

来源：https://stackoverflow.com/questions/59889196/debugging-in-webstorm-with-vue-js

2条答案

按热度按时间

5ktev3wc1#

我建议将Nuxt设置为使用devtool = 'source-map'生成源Map（例如，请参见https://nuxtjs.org/api/configuration-build/#extend），以使源Map更准确。

赞(0）回复(0）举报 2023-03-16

nafvub8i2#

这个解决方案对我很有效：https://blog.ostorlab.co/nuxt-debug-webstorm.html

build: {
    extend(config, ctx) {
      // config.devtool = 'eval-source-map'
      if (ctx.isDev && ctx.isClient) {
        config.devtool = 'eval-source-map'
      }
    }
  }

赞(0）回复(0）举报 2023-03-16

我来回答

javascript 使用Vue.js在WebStorm中调试

2条答案

相关问题

热门标签

最新问答