WebStorm调试Vue3工程


问题

在WebStorm中调试Vue工程。

步骤

浏览器中启用显示源代码

这里使用的Vue CLI 3工程：

1
2
3
4
5
module.exports = {<!-- -->
  configureWebpack: {<!-- -->
    devtool: 'source-map'
  }
}

WebStorm运行vue

npm运行
在菜单栏View→Tool Windows→npm，选择serve进行运行。

WebStorm运行调试进程

WebStorm调试
按住Command+shift，点击控制台http请求路径，即自动打开一个浏览器调试进程，进行vue断点调试。

参考

  • Debugging in VS Code
  • Vue.js