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.
- Install Google Chrome: Enables client-side debugging.
- Configure Chrome with the following extensions:
- Configure VS Code with the following extensions:
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.
- Create a new SAFE application using the SAFE template
- Open VS Code in the folder containing your application
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.
Ensure that Debug SAFE App is selected as the launch configuration
F5to 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!
Note: When you stop debugging, you also need to kill the associated
Watch Clienttask - see details.
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.
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.
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.
You can initiate a restore and rebuild of the server by hitting
CTRL + SHIFT + B and selecting Build Server from the drop-down.
Still have issues getting the debugger to work? Check out the troubleshooting page.