elmish-debugger


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.

dbg

Installation

Add Remote DevTools client package as a devDependency:

1: 
yarn add remotedev@^0.2.4 -D

and add Fable package with paket:

1: 
paket add nuget 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 Program modifications:

Usage:

1: 
2: 
3: 
4: 
5: 
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:

1: 
2: 
3: 
4: 
5: 
open Elmish.Debug

Program.mkProgram init update view
|> Program.withDebuggerAt (Remote("localhost",8000)) // connect to a server running on localhost:8000
|> Program.run

or, using a custom connection:

1: 
2: 
3: 
4: 
5: 
6: 
7: 
open Elmish.Debug

let connection = Debugger.connect (Remote("localhost",8080)) // obtain the connection, for example if sending some information directly

Program.mkProgram init update view
|> Program.withDebuggerUsing connection
|> Program.run

Conditional compilation

If don't want to include the debugger in production builds surround it with #if DEBUG/#endif and define the symbol conditionally in your build system.

namespace Elmish
namespace Elmish.Debug
Multiple items
module Program

from Elmish.Debug

--------------------
module Program

from Elmish

--------------------
type Program<'arg,'model,'msg,'view> =
  {init: 'arg -> 'model * Cmd<'msg>;
   update: 'msg -> 'model -> 'model * Cmd<'msg>;
   subscribe: 'model -> Cmd<'msg>;
   view: 'model -> Dispatch<'msg> -> 'view;
   setState: 'model -> Dispatch<'msg> -> unit;
   onError: string * exn -> unit;}

Full name: Elmish.Program<_,_,_,_>
val mkProgram : init:('arg -> 'model * Cmd<'msg>) -> update:('msg -> 'model -> 'model * Cmd<'msg>) -> view:('model -> Dispatch<'msg> -> 'view) -> Program<'arg,'model,'msg,'view>

Full name: Elmish.Program.mkProgram
val withDebugger : program:Program<'a,'model,'msg,'view> -> Program<'a,'model,'msg,'view>

Full name: Elmish.Debug.Program.withDebugger
val run : program:Program<unit,'model,'msg,'view> -> unit

Full name: Elmish.Program.run
val withDebuggerAt : options:Debugger.ConnectionOptions -> program:Program<'a,'model,'msg,'view> -> Program<'a,'model,'msg,'view>

Full name: Elmish.Debug.Program.withDebuggerAt
val connection : Fable.Import.RemoteDev.Connection

Full name: Index.connection
module Debugger

from Elmish.Debug
val connect : (Debugger.ConnectionOptions -> Fable.Import.RemoteDev.Connection)

Full name: Elmish.Debug.Debugger.connect
val withDebuggerUsing : connection:Fable.Import.RemoteDev.Connection -> program:Program<'a,'model,'msg,'view> -> Program<'a,'model,'msg,'view>

Full name: Elmish.Debug.Program.withDebuggerUsing
F# Project