Question

0

864

Views

Unbound breakpoint - Angular, VS Code, Chrome, PWA

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

over 4 years ago · Santiago Trujillo

2 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-06-07T19:28:53.142Z

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}"
        }  
    ]  
}

Answer 2 · 2022-06-07T19:28:53.155Z

Are you able to debug by just puttting:

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

, inside you code?

0

864

Unbound breakpoint - Angular, VS Code, Chrome, PWA

2 answers

0

VS Code configuration

0

Find remote jobs

Andres GPT