elm christmas

The Elm Debugger

←Previous postNext post →

View, save and load all state changes in your application

A 3 min read written by
Robin Heggelund Hansen

Whereas the debugger in most other languages allows you to step through the execution of your program on a line by line basis, Elm takes a different approach. It instead allows you to see the changes to your model over time, as well as the messages which caused those changes.

To enable the debugger, you need to compile your program with the --debug flag set. Depending on your build tool, this flag might already be set when running your application locally.

If you are running your application with the debugger enabled, you should see a UI element at the bottom right side of your page which looks like this:

"Debugger button"

Don't worry about the import / export part for now, we'll touch on that later. Instead, just click the text which says History. That should open a new window with two panes. On the left will be all the messages that has been handled by your update function, and on the right will be the current state of your model.

"The debugger"

Travel through time

By clicking on any of the messages in the left pane of the debugger, the execution of the program will stop, and the application will go to the point in time when that message was processed. Try clicking on a couple of messages and you will see that your UI changes to reflect the model at the time that message was sent.

"Expanded model properties"

You can also explore the model in the right pane. By default, only the top level variables are displayed, but by using the arrows next to the more complex properties, you can expose more parts of the model. Which properties are exposed will be remembered as you select different messages, which makes it easy to see how certain properties change over time.

You can resume the execution of your program at any point by clicking the Resume button in the lower left corner.

Import and export state

In the lower left corner of the debugger, you'll also find two buttons labeled import and export.

By pressing on export, the debugger will download a file to your computer containing the messages and states of your model. This can then be imported in a new debugger session later to resume where you left off.

Why would this be useful?

These files can be attached to a bug report to make it easier to reproduce bugs. They can also be used when fixing the said bug, as importing a file can be quicker than clicking on a bunch of elements in just the right order. Try it out, I'm sure you'll find it helpful.

←Previous postNext post →