使用 Visual Studio Code 调试 JHipster 前端

Question

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

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

谢谢。

Answer 1

培养步骤

1. 在您的应用程序根级别打开文件夹或创建项目，而不是<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 或播放按钮）

启动文件

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