jhipster with vue配置vscode debugg

最近在配置vscode debugger，使用vscode调试vue页面。项目是jhipster搭的，前端部分目录结构大致如下：

- config
- node_modules
- webpack
- package.json
- src
  - main
    - webapp
      - app
        - app.vue
        - main.ts
        ...
      - index.html
      ...
    ...
...

在配置vscode debugger时遇到了一些问题。

1. 首先需要在vscode扩展中安装debugger for microsoft edge
2. 之后点击侧边栏debugger图标，编辑launch.json。关于launch.json的配置可参考如下文档：vscode官方文档、在 VS Code 中调试 — Vue.js (vuejs.org)
3. jhipster项目的launch.json里的webRoot配置，最后我在stackoverflow上找到了如下：google chrome - Debug JHipster Frontend with Visual Studio Code - Stack Overflow

最后我的launch.json部分内容如下：

...
{
      "type": "edge",
      "request": "launch",
      "name": "vuejs: edge",
      "url": "http://localhost:9000",
      "webRoot": "${workspaceFolder}",
      "breakOnLoad": true,
...

到这一步，vscode中的断点已经生效了，当进入到相应的页面时，vscode中的断点会由空心圆圈变为红色。如果你的断点仍然提示not bound，说明webRoot配置的不对。
此时虽然说断点已经生效，但实际断点行数和你打断点的行数不符。我一直以为是launch.json中的webRoot和sourceMapPathOverrides配置不对，在这两个配置上折腾好久，最后发现，实际上是webpack的source-map配置问题：webpack 的 sourse-map 中 eval、cheap、inline 和 module 各是什么意思？ - 卤蛋实验室 - 博客园 (cnblogs.com)
webpack-dev-server的deltools默认配置为cheap-module-eval-source-map，但是eval参数可能会导致行映射不准，在chrome/edge debugger中没有问题，但是在debugger for microsoft edge中会导致行映射不准的问题。
知道问题之后解决方法也比较简单，修改dev环境的devtools为cheap-module-source-map。参考：Breakpoints in files in chrome not being hit when using webpack sourcemaps - Stack Overflow
到此，问题全部解决。不过vscode-debugger感觉做的还不够完善，比如看network还得到浏览器的console里去看(-. -||)