Skip to content

Debugging

Jump to bottom
josephmyers edited this page May 4, 2023 · 4 revisions

Run processes to attach to

Run the frontend, such as with the following in its own Terminal tab. It will automatically re-compile when the code is changed.

cd src/SIL.XForge.Scripture/ClientApp && ng serve

Run the backend, such as with the following in its own Terminal tab. It will automatically re-compile when the code is changed. (Running the frontend and backend separately allow them to be independently restarted.)

cd src/SIL.XForge.Scripture && dotnet watch run --start-ng-serve=listen --node-options=--inspect=9230

Run frontend tests on desired specs, such as with the following in its own Terminal tab. It will automatically re-compile and re-run the tests when the code is changed. It will also open a browser window where you can watch the tests run, and inspect the DOM. Modify the --include arguments in the example below by replacing them with spec files you wish to test.

cd src/SIL.XForge.Scripture/ClientApp &&
  npm test -- --include src/app/shared/text/text.component.spec.ts --include src/app/translate/editor/editor.component.spec.ts

Launch Chromium/Chrome or Edge with --remote-debugging-port=9977, and go to http://localhost:5000/ . For example, in Linux run:

chromium-browser --remote-debugging-port=9977

Or in Windows:

  • Navigate to Chrome.exe.
  • Right-click Chrome.exe and create a desktop shortcut.
  • Right-click the new desktop shortcut, and modify its properties.
  • Append --remote-debugging-port=9977 to the command.
  • Double-click the desktop shortcut to launch Chrome.

Note that your Chromium window for testing the frontend and your Chromium window for running unit tests will be different windows.

Attach debugger

In Visual Studio Code, go to the Run and Debug view. Choose one or more of the following and click Start Debugging.

  • Attach to frontend
  • Attach to backend dotnet application
  • Attach to backend realtime server
  • Attach to frontend tests

When you are finished debugging, click Disconnect. The processes will continue running until you press Ctrl+C to end them in the Terminal.

To debug backend tests, open a C# Tests file. In the code above the test, click Debug Test, or above the class, click Debug All Tests.

Other debugging targets are available as well, such as targets that start running the frontend and/or backend. For example:

  • Launch Chromium and debug the running frontend (tested with Chrome)
Clone this wiki locally