Remote DevTools debugger
Elmish applications can benefit from sophisiticated time-travelling debuger with deep state and message inspection capabilities and import/export functionality. Wether you target browser, native or any other platform, as long as you can connect to a monitor you can start collecting and visualizing the events. For SPAs running in a browser, it's as easy as installing a plugin.
Add Remote DevTools client package as a devDependency:
yarn add remotedev@^0.2.4 -D
and add Fable package:
dotnet add package Fable.Elmish.Debugger
Follow the monitor installation instructions at Remotedev tools site.
Among all the monitoring apps mentioned there, for local web debugging in Chrome we recommend using Redux DevTools Chrome extension as the fastest and the most seamless monitoring option.
Program module functions
Augment your program instance with a debugger, making sure it's the last item in the line of
open Elmish.Debug Program.mkProgram init update view |> Program.withDebugger // connect to a devtools monitor via Chrome/Firefox extension if available |> Program.run
or in case of a remote debugger:
open Elmish.Debug Program.mkProgram init update view |> Program.withDebuggerAt (Debugger.Remote("localhost",8000)) // connect to a server running on localhost:8000 |> Program.run
or, using a custom connection:
open Elmish.Debug let connection = Debugger.connect (Debugger.Remote("localhost",8080)) // obtain the connection, for example if sending some information directly Program.mkProgram init update view |> Program.withDebuggerConnection connection |> Program.run
If don't want to include the debugger in production builds surround it with
#endif and define the symbol conditionally in your build system.