5

Versions:

Angular CLI: 11.2.11
Node: 14.16.0
VS Code: 1.59.0
Chrome: 92.0.4515.131 
Debugger for Chrome (Nightly): v2020.2.15300
JavaScript Debugger (Nightly): v2021.8.217
(No other VS Code extensions loaded)

Environment

Windows 10 - Running as limited user. Not able to install anything but approved software, meaning, I'm stuck with the version of Node above, I can upgrade VS Code, but not install a specific version, etc.

launch.json:

    {
        "name": "Launch PWA-Chrome",
        "request": "launch",
        "type": "pwa-chrome",
        "url": "http://localhost:4200/",
        "webRoot": "${workspaceFolder}"
    },
    {
        "name": "Attach to Chrome",
        "port": 9222,
        "request": "attach",
        "type": "pwa-chrome",
        "webRoot": "${workspaceFolder}"
    }

How, When:

  • Occurs for a vanilla Angular app configured as a PWA. Set a breakpoint anywhere and get "unbound breakpoint".
  • Occurs when launching Chrome and when attaching to Chrome (in debug mode).
  • Does not occur for non-PWA vanilla angular app - I can debug non-PWA vanilla angular app.
  • Occurs when logged into Windows as (local) Administrator or limited. No difference.

Research and what I've tried:

  • My situation is different than this: Unbound breakpoint - VS Code | Chrome | Angular . Mine is a PWA and I always have an unbound breakpoint when starting with "ng serve".
  • Tried change in angular.json: "sourceMap": true - No effect
  • Tried "Run -> Disable All Breakpoints, then Enable All Breakpoints" - No effect
  • Tried downgrading VS Code to 1.52.1 (when debugging last worked) - No effect
  • Tried adding to webpack: devtoolModuleFilenameTemplate: '[absolute-resource-path]' - No effect
  • Tried disabling all extensions, except for Chrome and JS debugger - No effect
  • Tried attaching to Chrome in debug mode - still won't hit a breakpoint
T H
  • 492
  • 5
  • 15

2 Answers2

3

Angular builds optimizes scripts using various strategy. You should disable it. Use the following configuration settings. The key is to disable build optimization and minification. After your debugging session, you can restore them back to original values.

"sourceMap": true,
"buildOptimizer": false,
"optimization": false,
"serviceWorker": false

If the above doesn't work, try this combination explicitly disables optimizations for each resource type

"sourceMap": true,
"buildOptimizer": false,
"serviceWorker": false,
"optimization": { 
    "scripts": false,
    "styles": false,
    "fonts": false
}

Further read: https://angular.io/guide/workspace-config#optimization-configuration

VS Code configuration

VS Code uses a file called launch.json. Make sure the file has correct configuration. Following is a sample config. Tweak the details for your app (ensure that you use launch/debug configuration debug-my-pwa-app from your VS Code)

{  
    "version": "0.2.0",  
    "configurations": [  
        {  
            "type": "pwa-chrome",
            "request": "launch",
            "name": "debug-my-pwa-app",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}"
        }  
    ]  
}
Telmo Dias
  • 3,938
  • 2
  • 36
  • 48
Jp Vinjamoori
  • 1,173
  • 5
  • 16
  • This was the answer - thank you! Of note: breakpoints are now hit in VS Code only when using the browser window that is launched by the debugger - used to not be that way. Breakpoints are hit in Chrome dev tools for any instance now. – T H Aug 25 '21 at 13:41
3

Are you able to debug by just puttting:

// ... code    
debugger
// ... code

, inside you code?

Michiel
  • 270
  • 1
  • 3
  • 11