Demo of a click event handler in an Angular component being debugged and live edited from VS Code
Back in February I wrote a Medium post on How to Live edit and debug your React apps directly from VS Code powered by our Chrome debugger for VS Code and Webpack’s Hot Module Reloading mechanism. Today I’m gonna show how you can achieve the same super-charged workflow for Angular by using angular-cli and Visual Studio Code.
launch.jsonfile to configure the VS Code debugger and put it inside
.vscodein your root folder. VS Code launch.json configs for angular-cli
ng servein your favorite terminal.
F5or going to the debug section select
Launch Chrome with ng servefollowed by clicking the
green debug icon.
You can also debug your Angular unit tests using VS Code. You’ll find a more detailed guide on how to do this in our new VS Code recipes repository on GitHub.
If you are using a custom bundling solution you might need to provide Visual Studio Code with more information, as we have learned that many boilerplates/bundlers/setups are generating source-maps with incorrect paths to the files (on the file system).
To overcome this we have introduced a
sourceMapPathOverride option which allows VS Code to override paths inside the source map. This is needed to map the files correctly to the file system, as our debugger relies on the source files for debugging. You can read more about
That’s it for now. Happy debugging! 🎉🎈