VSCode debugger blank page and loading on launch with VS Code 1.76.1 and Chrome 111

Question

I'm facing an issue with VS Code debugger when debugging an Angular app. I have a clean Angular app generated by ng new command. I have added few lines of code to the ngOnInit function.
I want to start the chrome debugger. The browser is started successfully, but the app is not loaded. I can see only blank page, loader is still spinning, the dev console is completely empty. See the attached screenshot.
Everything was working fine few days ago. The app is started with command npm start, package json has the only modification - host is changed to 127.0.0.1. The App is working properly in the normal browser window (without debug mode).

I use macOS, latest macOS Ventura version.

Could anyone help with this issue?

Here is my launch.json file:

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

Browser:
No DOM loaded, network tab also empty (just a single request to 127.0.0.1 with no response.

I have rebooted VS Code, I have installed latest updates. Same for OS. I have tried different angular app, same result. I have also tried different port than 8080 with no luck.

Answer 1

This isn't much of an answer but I was running into the same issue with WebStorm and then similarly on VSCode. In VSCode, I removed ALL my breakpoints everywhere in the debugger session, restarted the debug session, and then it loaded just fine. After this I was then able to add breakpoints that were hit after the initial load.

I believe this has something to do with a new Chrome update. Here's a link the issue that JetBrains has been addressing that might help explain the problem a little more, though will help you little in ultimately fixing it.

https://intellij-support.jetbrains.com/hc/en-us/community/posts/10432962465682-unable-to-debug-javascript-in-2022-3-2-ultimate-edition-with-chrome-111-on-mac-m1-arm-?page=1

Answer 2

Cause

This is likely caused by a recent change to Chromium's debugger. See Issue 1421661: Missing call frames in instrumentation pause event break CDP consumers. Quoting from the issue ticket description:

A VS Code engineer reported that the omission of call frames from instrumentation pause (https://crrev.com/c/4174085) broke VS Code because their handler does not expect empty stack trace.

As this might affect other CDP consumers, we should revert and come up with a backwards compatible way of avoiding the expensive stack trace creation.

^{They're going to roll back the change in Chromium v112.}

The vscode-js-debug extension maintainers are working on a recovery build that patches for the issue. See Chrome 111 breakpoints don't work #1604.

Solutions

If you're getting this issue, you have a couple of options:

• Update to VS Code 1.76.2.

• Try switching to the nightly version of the vscode-js-debug extension

• Switching to VS Code insiders 1.77 may fix the issue as well.

• A number of users have reported that removing all breakpoints "resolves" the issue for them and that they can add breakpoints after removing reloading the debug session.

• ^{Some found that the issue went away after deleting their corresponding workspaceFolders folder (which I'd wager solves the issue by deleting information about breakpoints, so I'd recommend not taking this nuclear route).}