Debugging The Frontend In VS Code

Keyboard Shortcuts

Useful Keyboard Shortcuts Above The Standard Copy/Paste/Cut

The debugger in chrome and being able to add break points is great, but it’s even better being able to do it in VS Code. To do this:

1. Open the debugger in VS Code.
2. Click "Run and Debug".
3. Click ‘Web App (Chrome). This should setup a launch.json file.
4. You need to change the 'URL' and 'webroot' to match the URL your app runs on, and the root of your app. Save your changes.
5. While the app is running, Go to the debugger, select ‘Launch Chrome’, and press play.
6. You can now add breakpoints to your code in vs code.

Useful Extensions

1. Prettier Typescript Errors - Formats typescript errors in a more readable way
2. Git History - Shows git history, who changed the line last, what the file looked like before, ect
3. Github Copilot - An incredibly useful coding companion
4. Code Spell Checker - Points out spelling mistakes in your code
5. Docker - Easily manage your docker info from VSCode