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