Skip to content

Full Stack Debugging

A powerful features of the SAFE Stack is that it supports combined client / server debugging in F#. This means that you can use a single IDE (in this case, Visual Studio Code) to debug both client and server code in the same IDE session.

As of v0.38 of the SAFE Template, new SAFE applications come pre-configured with build, launch and debugging support in VS Code.

Prerequisites

  1. Install Google Chrome: Enables client-side debugging.
  2. Configure Chrome with the following extensions:
  3. Configure VS Code with the following extensions:
    • Ionide: Provides F# support to Code.
    • C#: Provides .NET Core debugging support.
    • Debugger for Chrome: Provides integrated client-side debugging in Code.

Launching and debugging a SAFE application in VS Code

The SAFE template allows you to launch a SAFE Stack application with both client and server debugging enabled automatically.

  1. Create a new SAFE application using the SAFE template
  2. Open VS Code in the folder containing your application
  3. Go to the Debug pane (CTRL + Shift + D)

    Note: Depending on your configuration, the Debug pane may be pinned to the left- or right-hand-side of VS Code.

  4. Ensure that Debug SAFE App is selected as the launch configuration

  5. Hit F5 to launch the application, or hit the green play button in the launch configuration panel

That's it. VS Code will now automatically:

  • Download all dependencies for both client and server
  • Build both the client and server
  • Start both client and server
  • Attach debuggers for both the client and server simultaneously!

The VS Code debugger

This section explains the basics of debugging SAFE applications with VS Code. Refer to here to learn more about the VS Code debugger.

VS Code Tooling basics

Once you start debugging a SAFE app, in the Terminal pane two Tasks will begin in parallel:

  • Watch Client: Builds and runs the client in hot module reload mode
  • Build Server: Builds and runs the server

Low-level output from the command line of both client and server can be seen in the appropriate Terminal window. Observe that the floating Debug control contains two active debugging sessions:

  • Debug Client: Selects the Client debug session
  • Debug Server: Selects the Server debug session

Selecting one or the other will instruct the Debug pane to show details for that "side" of the application e.g. breakpoints, call stack etc.

Setting breakpoints

To set a breakpoint, simply highlight the line of code that you wish to stop on and hit F9, or click on the left-side gutter of the code window; a red dot will appear to show the breakpoint is set. You can see more on VS Code breakpoints here.

Here you can see a breakpoint that has been hit in the update method of the sample application that is bundled with the SAFE template.

Viewing debug output

Debug output from Chrome will automatically be sent to the integrated Debug Console. This is especially useful for Elmish applications, as you can view Elmish messages and model updates directly in the IDE.

Restarting your application

In the standard launch mode seen above, hot module reloading is enabled on the client, so changes that are made to your Fable application will occur immediately.

However, in order to support debugging, watch mode is not enabled on the server; server changes require a restart of the server debugging session: Having ensured that Debug Server is selected in the floating Debug control, select the Restart icon or hit CTRL + SHIFT + F5. The server will stop, rebuild and restart with the debugger automatically re-attached.

Advanced options

The SAFE template comes with several other modes of operation for debugging:

Full watch mode

If you prefer to use "watch" mode on both client and server, choose the Watch SAFE app option from the Debug Launcher. Here, changes to any server file will automatically initiate a restart of it. However, whilst you will still be able to debug the client, in this mode there is no capability for server-side debugging.

Debug Server or Client only

You can also launch and debug either the client or server in isolation. This may be useful if you are running the other component separately e.g. through FAKE, the dotnet command line tool directly or via Visual Studio. You can initiate this by choosing either Debug Client or Debug Server as required.

Build Server

You can initiate a restore and rebuild of the server by hitting CTRL + SHIFT + B and selecting Build Server from the drop-down.

Troubleshooting

Still have issues getting the debugger to work? Check out the troubleshooting page.