Formed in 2009, the Archive Team (not to be confused with the archive.org Archive-It Team) is a rogue archivist collective dedicated to saving copies of rapidly dying or deleted websites for the sake of history and digital heritage. The group is 100% composed of volunteers and interested parties, and has expanded into a large amount of related projects for saving online and digital history.
Super-charged live editing and JavaScript debugging for Angular using Visual Studio Code ๐ฅ ๐
Use Visual Studio Code to super-charge your Angular JavaScript debugging workflow in a few simple steps
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.
Super-charged live editing and JavaScript debugging enables you to write and debug your Angular code without leaving the editor, and most importantly it enables you to have a more efficient development workflow, without context switching, because you stay inside your editor while you both author and debug ๐ฅ ๐ ๐
How to get started
- Download the latest release of VS Code and install our Chrome debugger
- Make sure Chrome is at least version version 59 (see issue)
- Create your Angular app using angular-cli
- Create a
launch.jsonfile to configure the VS Code debugger and put it inside.vscodein your root folder.
5. Start your Angular app by running ng serve in your favorite terminal.
6. Start debugging in VS Code by pressing F5or going to the debug section select Launch Chrome with ng serve followed by clicking the green debug icon.
Happy debugging! ๐๐
Debugging Angular unit tests with VS Code
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.
Help VS Code understand your source-maps with an extra option
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 sourceMapPathOverrides 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 sourceMapPathOverrides here.
Thatโs it for now. Happy debugging! ๐๐
/k
