15

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.

Image

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.

user16217248
  • 3,119
  • 19
  • 19
  • 37
Jiří Galis
  • 161
  • 2
  • 7
  • 2
    We've encountered similar problems recently (since friday), on mac and on windows. I suspect antivirus interfering - any chance you run one? – František Žiačik Mar 13 '23 at 17:45
  • Oh yes, my bad. I did mean `ng new`. Regarding the antivirus - I do not use antivirus on my Mac. Upgrading `vscode-js-debug` to the nightly version resolved the issue. – Jiří Galis Mar 15 '23 at 18:54
  • Myself and now three others have expeiranced this also, I've also now encountered the problem on my private laptop under compeltely different projects. – Jamie Nicholl-Shelley Mar 17 '23 at 10:57
  • Just found, same is true for visual studio (not code). Latest updates do however seem to not address this problem. Clearing all breakpoints prior to start however did the trick. – ub_coding Mar 17 '23 at 14:37

4 Answers4

19

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

tgoodell
  • 316
  • 2
  • 5
  • 4
    Here's the answer as to why it's broken: https://bugs.chromium.org/p/chromium/issues/detail?id=1421661 and here's a better fix than my previous response: https://github.com/microsoft/vscode-js-debug/issues/1604 Essentially, just use VSCode's nightly debugger (more frequently updated version JS debugger) – tgoodell Mar 13 '23 at 21:14
5

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).

starball
  • 20,030
  • 7
  • 43
  • 238
0

TL;DR for vscode:

  1. Open the "Help" menu on Windows/Linux, or the "Code" menu on macOS, and click "Check for Updates"
  2. Restart VS Code after the update downloads (the "Check for Updates" button in the menu will change when it finishes download)
  3. Verify you are up to date with version 1.76.1 or higher.

More details:

Amitk
  • 153
  • 2
  • 10
0

I experienced this same issue today with React using VSCode, Chrome and MacOSX. This is what I had to do to get the VSCode JavaScript Debugger working on Chrome on Mac OSX:

  1. Restart your computer. it sometimes works wonders.

  2. Ensure VSCode is installed in Applications folder on Mac OSX. If is installed in Downloads, then when attempting to update VSCode, it will complain about read-only volume. Go to Code > Check for Updates. Update to latest version.

  3. Ensure your Chrome browser is updated. Go to Chrome > About Google Chrome. Under "About Chrome", confirm there is a message saying "Chrome is up to date".

  4. In VSCode, go to Extensions. Search "JavaScript Debugger". With the latest version of VSCode, it will have "JavaScript Debugger" installed and enabled. Note its icon is circular yellow with a bug graphic. Disable it. Then Install "JavaScript Debugger (Nightly)". Enable "JavaScript Debugger (Nightly)". Restart VSCode.enter image description here

  5. On the left menu, click on "Run and Debug". Choose "Add Configuration". Choose "Chrome: Launch". Now you will see "Launch Chrome" as the currently selected debugger in "RUN AND DEBUG" on the top.

  6. Open up the generated .vscode folder (this was generated when you added the above configuration). Inside the launch.json file, inside the configuration array, ensure you have an object similar to this:

    { "name": "Launch Chrome", "request": "launch", "type": "chrome", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}/src" }

    Note in my case, I added the "/src" folder since that is where my app runs from.

  7. Before you attempt to run React, confirm nothing else is listening on the desired port:

    lsof -i tcp:3000

    If something is listening, kill it with kill -9 [process-id]

  8. Then in the VSCode Terminal, run "npm start".

  9. Then Run > Start Debugging in VSCode top menu. Add break points in VSCode and refresh the browser page and you'll notice that execution stops on the break points.

Daniel Viglione
  • 8,014
  • 9
  • 67
  • 101