How to Debug Angular Applications in Visual Studio Code
How to run Angular in Debug mode in Visual Studio Code.
Debugging mode can greatly increase productivity by helping you step through the code and watch the state of variables and the result of each line execution.
Summary
- Step 1: Install Debugger for Chrome extension
- Step 2: Configure debug environment in Visual Studio
- Step 3: Create a breakpoint in your code
- Step 4: Run your application and debug
Details
Step 1
Install the debugger for Chrome extension by going to extensions in VS Code marketplace and searching for debugger for Chrome or by going to this link:
Step 2
Setup the debug configuration. Click this button on the left of your screen in VS Code.
Then click “create a launch.json” file
Select Chrome as the environment
edit launch.json to point to the port on which your Angular application runs
Step 3
Create a breakpoint in your code by clicking to the left of a line number in a file. app.module.ts for example.
Step 4
Run your Angular application locally as per normal.
Press the “Launch Chrome against localhost” button from the debug tab
Chrome will open in a new window and the breakpoint in app.module.ts should be hit in VS code.
The debug controls should be viewable to allow you to continue, step over the line, or go into the line you’re on. You can now inspect variables and step through the code.
I hope you have found this useful, if you have any issues getting this working, please leave a comment and I will try to assist. Thank you for reading.
Connect with me on LinkedIn: https://www.linkedin.com/in/sadha-moodley/
More content at plainenglish.io. Sign up for our free weekly newsletter. Get exclusive access to writing opportunities and advice in our community Discord.
