How to debug an Angular CLI app with the custom webpack builder?

问题

I built a repo to expose my issue: https://github.com/franklin626/custom_webpack_undebuggable

This Angular CLI app has a custom webpack setup (webpack.config.js). It also has a .vscode/launch.json configuration to debug from VS Code upon either ng test (unit tests) or ng serve. I can place breakpoints for my unit tests, but not when running ng serve:

In my debug tab in VS Code, I run my "launch Chrome" routine followed by "attach localhost". I place a breakpoint on other.component.ts:14, and browse to localhost:4200/othermodule to fire up my lazy loaded module OtherModule containing OtherComponent.

I can't place a breakpoint on home.component.ts:13 either, even though it is in the default module.

VS Code complains the breakpoint can't be hit and suggests a possible problem with source maps. I can see the original sources are loaded in the browser though. What is going on ?

回答1:

This guide works for me with your repo, latest vscode and debugger for chrome.
Please see the results and follow these steps:

Install debugger for Chrome
Create .vscode/launch.json with the following content

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

Set a breakpoint in Home or Other component
Press F5 to start the debugger

回答2:

you can add .vscode/tasks.json with label debug as follow

it will start build, launch chrome debug and watch for changes

tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "debug",
      "type": "npm",
      "script": "start",
      "isBackground": true,
      "presentation": {
        "focus": true,
        "panel": "dedicated"
      },
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "problemMatcher": {
        "owner": "typescript",
        "source": "ts",
        "applyTo": "closedDocuments",
        "fileLocation": [
          "relative",
          "${cwd}"
        ],
        "pattern": "$tsc",
        "background": {
          "activeOnStart": true,
          "beginsPattern": {
            "regexp": "(.*?)"
          },
          "endsPattern": {
            "regexp": "Compiled |Failed to compile."
          }
        }
      }
    },
  ]
}

and modify .vscode/launch.json to use debug task as preLaunchTask

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome debug",
      "type": "chrome",
      "request": "launch",
      "preLaunchTask": "debug",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:/*": "${webRoot}/*",
        "/./*": "${webRoot}/*",
        "/src/*": "${webRoot}/*",
        "/*": "*",
        "/./~/*": "${webRoot}/node_modules/*"
      }
    }
  ]
}

also move package to devDependencies

npm i -D @angular-builders/custom-webpack

pull request

https://github.com/franklin626/custom_webpack_undebuggable/pull/2

来源：https://stackoverflow.com/questions/61783909/how-to-debug-an-angular-cli-app-with-the-custom-webpack-builder

标签

angular

Webpack

visual-studio-code