使用 Visual Studio Code 调试 JHipster 前端

Question

我已经为 VS Code 安装了 Debugger for Chrome 扩展。如何调出在调试模式下使用 webpack 的 JHipster Angular 应用程序？

JHipster Angular 在<application>/src/main/webapp/app 下，webpack 配置在<application>/webpack/webpack.dev.js 下。

谢谢。

Answer 1

提出的步骤

1. 在您的应用程序 root 级别打开文件夹或创建项目，而不是 <your-app>/src/main/webapp 或 <your-app>/src/main/webapp/app
2. 添加 chrome 调试器配置如下。确保端口为 9000。
3. 启动 JHipster 后端：mvnw -P-webpack -Dmaven.test.skip=true
4. 启动 JHipster 前端 Angular：npm start
5. 在 Angular 项目中设置必要的断点
6. 启动 #1 调试器配置文件（F5 或播放按钮）

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:9000",
            "webRoot": "${workspaceFolder}"
        }
    ]
}