Get improved Debug.log output in the browser console
2019-07-02

We can use Debug.log to output values from Elm to the browser console. The logged values get converted to a plain text representation:

cardMsg: ((0,0),ColorPickerMsg (OnMouseDown SatLight { mousePressed = True, x = 109, y = 70 }))
model: { color = RgbaSpace 0.2789999999999999 0.7876666666666666 0.7876666666666667 1, colorPicker = State { hue = 0.5, mouseTarget = SatLight } }

This works fine for simple values, but when logging more complex data, like the whole model, for example, it becomes hard to read.

Luckily, Tomas Latal came up with a new tool which can help. It overrides console.log and tries to parse whatever is going through it. If it parses as an Elm value, it’s shown in the console as an interactive tree with expandable nodes:

elm-debug-transformer output

Anything that fails to parse is passed to the original console.log function.

In Chrome, it’s possible to get more convenient output with the help of custom formatters, which can be enabled in the Dev Console preferences. With custom formatters, the output looks like this:

elm-debug-transformer output

That’s very readable!

You can find the project on GitHub. The README provides instructions for installation with yarn, but it’s also possible to use npm:

npm install elm-debug-transformer

Then, you can include the script in your index.html and register the console.log wrapper:

<script src="node_modules/elm-debug-transformer/dist/elm-console-debug.js"></script>
<script>
ElmConsoleDebug.register()
</script>

In non-Chromium browsers, it’s possible to get simpler output with tuples, Set, Array and List showing as arrays and Dict showing as an object:

elm-debug-transformer output

This is achieved by calling ElmConsoleDebug.register({simple_mode: true}).

I think this tool is going to become an indispensable part of my development process! I’ve also included it in the tools section of Practical Elm.

Comments or questions? I’m @alexkorban on Twitter.

Looking for the nuts-and-bolts guide to creating non-trivial real world apps in Elm?

My book, Practical Elm for a Busy Developer, skips the basics and gets right into explaining how to do practical stuff. Things like building out the UI, communicating with servers, parsing JSON, structuring the application as it grows, testing, and so on. No handholding — the focus is on giving you more substance.

It’s up to date with Elm 0.19.

Pop in your email to get a sample chapter.

(You will also get notifications of new posts along with other mailing list only freebies.)

Book cover