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

Question

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
        }

Answer 1

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.

Answer 2

Yes, there is no elm reactor --debug anymore. You will however still find a --debug on the regular elm make. So if your file was src/Main.elm you would now do:

$ elm make src/Main.html --debug
Success!

    Main ───> index.html

That index.html is generated with the --debug flag set. From elm make's help, that means

--debug
    Turn on the time-travelling debugger. It allows you to rewind and replay
    events. The events can be imported/exported into a file, which makes for
    very precise bug reports!

So would've been really nice to have it in elm reactor but you still have an index.html that you can "open" in a browser. I put open in double quotes because if you open it by clicking on it, you won't see what you're expecting to see. You'd want to properly open it by — "serving" it from the terminal and then opening it's link on the browser, like you did with elm reactor . Most systems nowadays come with some version of python installed, so you can utilize a python command to do the "serving" of that index.html file with the command

$ python3 -m http.server 8000

If you only have python 2.x, that command should be:

$ python –m SimpleHTTPServer 8000

Of course, feel free to serve it any other way you want to. You could use elm reactor to serve that index.html as well. In the main window that elm reactor opens, locate the link to the generated index.html and click on it, instead of src/Main.elm. I'd advise against using this though, because it has the potential to be confusing. You might now be unsure whether you're looking at the main src/Main.elm file or the generated index.html.

As for elm-live, yes it's a great option, you can supply the --debug option as an elm make option.

$ elm-live src/Main.elm -- --debug

Pay heed to that -- before the --debug option, as it marks the beginning of elm-live's elm make options .

If nothing else, hope that clarifies where to find and use --debug still. Cheers.

(Elm 0.19.1)