Search code examples
debuggingelm

Is it possible to show Elm's Debugger while using elm reactor?


When using elm reactor, it works great but doesn't seem to provide a way to show the Debugger, to explicitly see the state of the model after each update.

elm reactor --debug doesn't work, I don't see an option in the UI, and didn't see it mentioned in the documentation.

Can we see the debugger while using elm reactor?


Here's an example of code that runs in the Reactor but doesn't show the debugger (when using Elm 0.19)

module Main exposing (main)

import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)


type alias Model =
    { count : Int }


initialModel : Model
initialModel =
    { count = 0 }


type Msg
    = Increment
    | Decrement


update : Msg -> Model -> Model
update msg model =
    case msg of
        Increment ->
            { model | count = model.count + 1 }

        Decrement ->
            { model | count = model.count - 1 }


view : Model -> Html Msg
view model =
    div []
        [ button [ onClick Increment ] [ text "+1" ]
        , div [] [ text <| String.fromInt model.count ]
        , button [ onClick Decrement ] [ text "-1" ]
        ]


main : Program () Model Msg
main =
    Browser.sandbox
        { init = initialModel
        , view = view
        , update = update
        }

Solution

  • The debugger is no longer included by the elm reactor in 0.19. It was apparently removed while refactoring (although it will probably be re-added in the future).

    For now, I'd recommend using elm-live which also supports auto-reloading.