Debugging

Frontend

The easiest way to debug the frontend is by using Google DevTools.

On the frontend code, place adebugger where you want the code to stop.

Then on Google Chrome, open the Google DevTools.

When the application reaches some debugger, it will stop and you can inspect the application state at that point.

Backend

To debug the backend, you must use the VSCode editor.

1. Click on the Debugger tab (left).

2. Launch the Program.

3. Open the Debug Console tab (bottom).

Now that the application is running, you can place a debugger anywhere on the backend code and it will stop when it reaches the breakpoint so you can insect the application state.

Make sure your project path doesn't contain spaces. For some reason, VSCode started crashing the debug process when the project path contains spaces like /path/to/project with spaces. Instead use /path/to/projectwithoutspaces.

More about VSCode debugging:

https://code.visualstudio.com/docs/editor/debuggingcode.visualstudio.com