Chrome Hangs when launching Angular App with VS Code
I have an Angular 7 CLI app that makes chrome hang when I try to debug it using Chrome(76) and VS Code(1.37). I can't even open up the debugging tools and inspect index.html but I run ng serve just fine. I can even open up http://localhost:4200/#/ in an existing chrome and firefox tab and the page loads but when I try to launch chrome from VS Code to debug nothing gets loaded into the browser.
I have tried a couple different configs for launch.json and they have the same results
Out of the box config
{
"name": "ng serve",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200/#",
"webRoot": "${workspaceFolder}"
},
Advanced config: https://github.com/microsoft/vscode-recipes/tree/master/Angular-CLI
{
"name": "ng serve",
"type": "chrome",
"request": "launch",
"preLaunchTask": "npm: start",
"url": "http://localhost:4200/#",
"webRoot": "${workspaceFolder}",
"sourceMapPathOverrides": {
"webpack:/*": "${webRoot}/*",
"/./*": "${webRoot}/*",
"/src/*": "${webRoot}/*",
"/*": "*",
"/./~/*": "${webRoot}/node_modules/*"
}
},
I have tried a couple of other things without success:
- Reinstall chrome
- Install VS Code 1.36
- Install Vs Code Insiders
- I restart my windows machine.
- Clone a fresh copy of my repo, running npm install and rebuilding the application
So I created a new empty Angular CLI application ng new and I am able to debug it just fine. Which leads me to believe it isn't related to chrome or vs code. Then I decided to give firefox debugging a try and it works just fine but now I am really confused.
{
"type": "firefox",
"request": "launch",
"reAttach": true,
"name": "Launch Firefox localhost",
"url": "http://localhost:4200/#",
"webRoot": "${workspaceFolder}"
},
It was security related issue with my developer machine. I was able to get around the issue by using a different chromium based browser(Opera, Edge Beta, Brave).
