Question 134249 in Visual Studio Code Question posted in
View the official documentation.

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

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.

Tags:

4

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

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

    Login or Signup to reply.
  3. 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:

    Login or Signup to reply.
  4. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search