# Elm-remotedev - Elm ↔ Redux DevTools Extension Integration

**URL:** <https://discourse.elm-lang.org/t/elm-remotedev-elm-redux-devtools-extension-integration/996>\
**Category:** Show and Tell\
**Created:** [March 23, 2018, 3:11pm UTC](https://discourse.elm-lang.org/t/elm-remotedev-elm-redux-devtools-extension-integration/996 "2018-03-23T15:11:24Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![utkarshkukreti](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/utkarshkukreti/32/1888_2.png) [@utkarshkukreti](https://discourse.elm-lang.org/u/utkarshkukreti)\
**Post date:** [March 23, 2018, 3:11pm UTC](https://discourse.elm-lang.org/t/elm-remotedev-elm-redux-devtools-extension-integration/996/1 "2018-03-23T15:11:24Z")

</div>

Hi!

I just released a basic integration of Elm with the wonderful Redux DevTools Extension. Some useful features Redux DevTools has that Elm’s current builtin Debugger doesn’t:

- Inspect the whole message value.
- View a diff of the old model vs the new model after every update. (This has been most useful for me while working on an app with a huge model!)
- Filter messages by substring match.
- Visualize the state as a graph.

Here’s a demo of some of the features:

![Demo GIF](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/elm_lang/original/1X/4c0f1a5079cb2cea02826d896c7e32b33da12a07.gif)

I’ve only integrated sending the message and model to the extension; time travel is not supported at the moment.

Here’s the repository with the instructions to set this up in your dev environment: [https://github.com/utkarshkukreti/elm-remotedev](https://github.com/utkarshkukreti/elm-remotedev).

Let me know if you try it out!

---

<div class="post-metadata">

**Author:** ![ashishsc](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/ashishsc/32/793_2.png) [@ashishsc](https://discourse.elm-lang.org/u/ashishsc)\
**Post date:** [March 23, 2018, 3:21pm UTC](https://discourse.elm-lang.org/t/elm-remotedev-elm-redux-devtools-extension-integration/996/2 "2018-03-23T15:21:27Z")

</div>

Wow this is amazing! I’ve been wanting so long for the elm debug tools to have the ui/features of the redux-dev-tools. Well done!

---

<div class="post-metadata">

**Author:** ![madasebrof](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/madasebrof/32/363_2.png) [@madasebrof](https://discourse.elm-lang.org/u/madasebrof)\
**Post date:** [March 23, 2018, 6:49pm UTC](https://discourse.elm-lang.org/t/elm-remotedev-elm-redux-devtools-extension-integration/996/3 "2018-03-23T18:49:56Z")

</div>

Awesome, so cool to see this!

I can imagine that the diff would be most helpful (vs. what Elm 0.18 already provides in debug mode.)

Rock on!

---

<div class="post-metadata">

**Author:** ![praveenperera](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/praveenperera/32/206_2.png) [@praveenperera](https://discourse.elm-lang.org/u/praveenperera)\
**Post date:** [March 24, 2018, 12:02am UTC](https://discourse.elm-lang.org/t/elm-remotedev-elm-redux-devtools-extension-integration/996/4 "2018-03-24T00:02:32Z")

</div>

This is really great. Thanks a lot! I was recently thinking how awesome something like this would be. Especially for seeing the whole message values!

---

<div class="post-metadata">

**Author:** ![allansson](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/allansson/32/115_2.png) [@allansson](https://discourse.elm-lang.org/u/allansson)\
**Post date:** [March 24, 2018, 7:22am UTC](https://discourse.elm-lang.org/t/elm-remotedev-elm-redux-devtools-extension-integration/996/5 "2018-03-24T07:22:26Z")

</div>

Looks really cool! Patching the core libraries seems tedious though. It would be neat if Elm exposed some debugging hooks, so that the debugger UI could be developed (and enabled) separately from Elm.

I usually use continuous delivery, which means you’re supposed to deploy the same artifacts to different environments. Having to configure the `--debug` flag at compile time hurts this process. If I want the testers to be able to send me exports of their run I need to compile my app with debugging enabled, but I don’t want to deploy my code with debugging enabled in production. Right now, I solve it by having debug enabled but hiding the `elm-overlay` with some CSS, based on some runtime configuration. If we had hooks instead, I could choose not to include the debugger.

---

<div class="post-metadata">

**Author:** ![simonh1000](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/simonh1000/32/100_2.png) [@simonh1000](https://discourse.elm-lang.org/u/simonh1000)\
**Post date:** [March 24, 2018, 7:31am UTC](https://discourse.elm-lang.org/t/elm-remotedev-elm-redux-devtools-extension-integration/996/6 "2018-03-24T07:31:03Z")

</div>

I gave this quick try as it would certainly be a major addition to Elm. However while it worked from the homescreen, I quickly ran into this with our main app after navigating

![43](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/49be5b82df044e3b273eb80a3c3e350e630d4663.png)

Happy to connect somehow if you want to work out what is happening with this codebase

---

<div class="post-metadata">

**Author:** ![utkarshkukreti](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/utkarshkukreti/32/1888_2.png) [@utkarshkukreti](https://discourse.elm-lang.org/u/utkarshkukreti)\
**Post date:** [March 24, 2018, 8:24am UTC](https://discourse.elm-lang.org/t/elm-remotedev-elm-redux-devtools-extension-integration/996/7 "2018-03-24T08:24:32Z")

</div>

That’s strange. Could you click on `main.js:8`, then click on `{}` to pretty print the minified code and post a screenshot of the highlighted portion of the code (where the error originated)? I’m on Slack as well (same username), so feel free to ping me there whenever you’re on.

---

<div class="post-metadata">

**Author:** ![utkarshkukreti](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/utkarshkukreti/32/1888_2.png) [@utkarshkukreti](https://discourse.elm-lang.org/u/utkarshkukreti)\
**Post date:** [March 24, 2018, 8:51am UTC](https://discourse.elm-lang.org/t/elm-remotedev-elm-redux-devtools-extension-integration/996/8 "2018-03-24T08:51:17Z")

</div>

I think I found the problem. Could you try loading [this](https://gist.github.com/0a2d5ca577df88b66f4227c8b5eeb20e) file instead of the rawgit URL and see if that fixes it?

---

<div class="post-metadata">

**Author:** ![utkarshkukreti](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/utkarshkukreti/32/1888_2.png) [@utkarshkukreti](https://discourse.elm-lang.org/u/utkarshkukreti)\
**Post date:** [March 24, 2018, 9:11am UTC](https://discourse.elm-lang.org/t/elm-remotedev-elm-redux-devtools-extension-integration/996/9 "2018-03-24T09:11:30Z")

</div>

> [@praveenperera](#):
>
> Especially for seeing the full whole message values!

Yes! This was my biggest pain point with the official debugger.

---

<div class="post-metadata">

**Author:** ![simonh1000](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/simonh1000/32/100_2.png) [@simonh1000](https://discourse.elm-lang.org/u/simonh1000)\
**Post date:** [March 24, 2018, 9:19am UTC](https://discourse.elm-lang.org/t/elm-remotedev-elm-redux-devtools-extension-integration/996/10 "2018-03-24T09:19:39Z")

</div>

Yep, that fixed it 🙂

---

<div class="post-metadata">

**Author:** ![utkarshkukreti](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/utkarshkukreti/32/1888_2.png) [@utkarshkukreti](https://discourse.elm-lang.org/u/utkarshkukreti)\
**Post date:** [March 24, 2018, 9:20am UTC](https://discourse.elm-lang.org/t/elm-remotedev-elm-redux-devtools-extension-integration/996/11 "2018-03-24T09:20:08Z")

</div>

> [@allansson](#):
>
> It would be neat if Elm exposed some debugging hooks, so that the debugger UI could be developed (and enabled) separately from Elm.

That would be cool but I’m not expecting it any time soon. This is a hard problem IMO and would require a lot of exploration to have a good API.

Fortunately my integration only requires 1 line patch so it should be worth it for the benefits of Redux DevTools vs Official Debugger for many people. (It certainly was worth it for me to develop the whole integration!)

> [@allansson](#):
>
> Right now, I solve it by having debug enabled but

I peeked into 0.19 and saw that the debug vs non-debug output will be significantly different in it. There are multiple optimizations that would only be enabled without `--debug` and the `Debug` module will be completely inaccessible without `--debug`.

---

<div class="post-metadata">

**Author:** ![utkarshkukreti](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/utkarshkukreti/32/1888_2.png) [@utkarshkukreti](https://discourse.elm-lang.org/u/utkarshkukreti)\
**Post date:** [March 24, 2018, 9:25am UTC](https://discourse.elm-lang.org/t/elm-remotedev-elm-redux-devtools-extension-integration/996/12 "2018-03-24T09:25:03Z")

</div>

Awesome! I’ve [committed the fix](https://github.com/utkarshkukreti/elm-remotedev/commit/0860430fc0c12b0fac7d8506d42a5264f764d9e0). [rawgit.com](http://rawgit.com)’s CDN will probably pick up the new version in a few hours.

---

<div class="post-metadata">

**Author:** ![mfeineis](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/mfeineis/32/104_2.png) [@mfeineis](https://discourse.elm-lang.org/u/mfeineis)\
**Post date:** [March 24, 2018, 9:28am UTC](https://discourse.elm-lang.org/t/elm-remotedev-elm-redux-devtools-extension-integration/996/13 "2018-03-24T09:28:12Z")

</div>

Nice! I really think using the redux devtools is a better approach to debugging than trying to build your own 🙂

---

<div class="post-metadata">

**Author:** ![mcordova47](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/mcordova47/32/559_2.png) [@mcordova47](https://discourse.elm-lang.org/u/mcordova47)\
**Post date:** [March 25, 2018, 2:29pm UTC](https://discourse.elm-lang.org/t/elm-remotedev-elm-redux-devtools-extension-integration/996/14 "2018-03-25T14:29:48Z")

</div>

This is awesome. Was wondering if it would be possible to do this more like the redux way a middleware instead of modifying the Elm core. Thought about something like:

```
main : Program Never Model Msg
main =
    Html.program
        { init = init
        , update =
            update
                |> withMiddleware portMiddleware
        , view = view
        , subscriptions = \_ -> Sub.none
        }

withMiddleware :
    (msg -> model -> ( model, Cmd msg ))
    -> (msg -> model -> ( model, Cmd msg ))
    -> (msg -> model -> ( model, Cmd msg ))
withMiddleware middleware upd msg model =
    let
        ( updatedModel, cmd ) =
            upd msg model

        ( mwUpdatedModel, mwCmd ) =
            middleware msg updatedModel
    in
        ( mwUpdatedModel, Cmd.batch [cmd, mwCmd] )

portMiddleware : Msg -> Model -> ( Model, Cmd Msg )
portMiddleware msg model =
    ( model, sendUpdate (encodeUpdate msg model) )

port sendUpdate : Value -> Cmd msg

encodeUpdate : Msg -> Model -> Value
encodeUpdate msg model =
    Encode.object
        [ ( "model", encodeModel model )
        , ( "msg", encodeMsg msg )
        ]

```

The problem is now you’d have to write encoders for your `Msg` and `Model` types. Would be cool to try to do something with parsing the output of `toString` maybe, to have a sort of generic encoder.

Anyway, really cool stuff!

---

<div class="post-metadata">

**Author:** ![utkarshkukreti](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/utkarshkukreti/32/1888_2.png) [@utkarshkukreti](https://discourse.elm-lang.org/u/utkarshkukreti)\
**Post date:** [March 25, 2018, 2:49pm UTC](https://discourse.elm-lang.org/t/elm-remotedev-elm-redux-devtools-extension-integration/996/15 "2018-03-25T14:49:08Z")

</div>

I thought about this but writing an encoder for the Msg and Model for the app I’m working on will be a deal breaker. There are dozens of different messages and fields in the model. The encoder will probably a thousand lines long.

Parsing `toString`'s output might be possible but if I ever want to implement the Time Travel feature in Redux DevTools, it would also require a decoder from String to Model and Msg. In the end I decided to just patch 1 line of code in elm-lang/core.

---

<div class="post-metadata">

**Author:** ![mfeineis](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/mfeineis/32/104_2.png) [@mfeineis](https://discourse.elm-lang.org/u/mfeineis)\
**Post date:** [March 25, 2018, 3:11pm UTC](https://discourse.elm-lang.org/t/elm-remotedev-elm-redux-devtools-extension-integration/996/16 "2018-03-25T15:11:48Z")

</div>

I don’t think it’s that practical to do it with ports, although you’re modifying generated code it seems like the best option right now is to patch the JS file.

---

<div class="post-metadata">

**Author:** ![mcordova47](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/mcordova47/32/559_2.png) [@mcordova47](https://discourse.elm-lang.org/u/mcordova47)\
**Post date:** [March 25, 2018, 3:51pm UTC](https://discourse.elm-lang.org/t/elm-remotedev-elm-redux-devtools-extension-integration/996/17 "2018-03-25T15:51:30Z")

</div>

Yeah, I totally agree. Writing encoders would not be scalable, and I didn’t even think of the decoder aspect of time travel, which would only make it worse.