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:
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.
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.
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
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.