How to debug an Angular app using VS Code and Chromium
After having some problems with MS Windows I decided to move my development environment (back) to Linux. I mostly use VS Code as I mostly develop Angular apps. Yeah! VS Code is also Microsoft, but it works way better than their operating system.
So I installed Chromium instead of Chrome, don't really remember why, and figured out that I couldn't debug my apps as I used to.
After some headbanging against the keyboard I found a couple of references that pointed out how to call a custom runtime executable from the launch task.
Tried using only the "runtimeExecutable" attribute, pointing it to the Chromium path at "/usr/bin/chromium-browser" , but failed because VS Code tried to connect to my already existing browser instance. So I had to add some parameters to the "runtimeArgs" array:
- --new-Window : To ensure the debugger opens a new browser window.
- -user-data-dir=\"/${workspaceFolder}/DevProfile\"" :To ensure the debugger opens a new browser instance. This creates a new browser profile, or uses the existing one, called "DevProfile"and located on the same project folder.
- --remote-debugging-port=9222 : To enable debugging
- --disable-background-networking : This is supposed to improve the browser's performance avoiding Chrome to perform unrequested network requests. More on this here.
So open your VS Code debugger and edit the chrome task. Here's the GIST for your copy & pasting pleasure.
