Debugging Dart in Webstorm: Part 2

Stop analysing, just observe

The most obvious reason to start the debugger is of course to find and solve bugs. However, the reason I love debugging is not only to solve bugs, but also because it can speed up the time it takes to understand any kind of code.

I’m often in the situation that I try to understand a piece of code, which is undocumented, uncommented and where the variables are very poorly named. Of course, usually, I wrote this myself a couple of weeks earlier ;)

So instead of wasting too much time trying to read and analyse this code, I often prefer to just start the debugger, set a break point, and step by step, observe what is going on. I won’t use the most unreadable code as example in this tutorial, but the techniques described here easily generalise to any code you will encounter.

TL;DR This 1 min. video summarises everything discussed here.

Evaluating an expression

In this tutorial we will discuss how we can evaluate a multi line expression step by step. Let’s take look at the following example:

Last tutorial we talked about how we can just select an expression in the editor to see what the value is.

In this case, however, we end up with a very long string which is not easy to read in this format. We may first want to format this expression as a List. Webstorm allows to evaluate any arbitrary expression, if we press the Evaluate Expression icon (or ⌥F8).

If you press⌥F8 while you have code selected, the selected code will already be filled in. Note that you can use all the code completion Dart goodness while writing the expression!

Extending and shrinking the selected text

Before we proceed with evaluating our multi line expression, let’s first take a look at some useful keyboard shortcuts that help to quickly get the selection we want to evaluate:

• Extend Selection (⌥↑): This command extends the selection to the next evaluable expression.
• Shrink Selection (⌥↓): This command shrinks the selection to the next evaluable expression.
• Move Caret To Next Word (⌥→)
• Move Caret to Previous Word (⌥←)

Use ⌥→ or ⌥← until you are at the start of the selection and then use ⌥↑ and ⌥↓ to select the text.

For windows and linux users, the⌥ key translates to the ALT key.

Quick evaluate an expression

There are often many different ways to do the exact same thing in Webstorm. One may want disable the option to show the value on every selection change. In that case you can instead use the Quick Evaluate Expression (⌘⌥F8) command. Basically, this does the same as showing the value automatically, but it will also expand the value (as if you pressed ⌘F1 as well).

At this moment there is an issue when Webstorm tries to evaluate expressions with arrow functions. You won’t get an automatic popup if you select an expression that contains an arrow function, but as a workaround you can use the Quick Evaluate Expression command.

Adding more breakpoints

When Webstorm reaches a breakpoint, it will stop the execution of the program at that point. If we want to continue the execution and stop at another the point we can simply at another breakpoint and press Resume Program (⌘⌥R).

For a higher quality animation, see http://i.imgur.com/QrLMzPk.gif

There are some other techniques to step through the program without having to add new breakpoints. Those will be discussed in the next tutorial. And to finish off, here is a video summarising all the techniques discussed in this tutorial.

I’m Kasper Peulen, I hope you found this tutorial useful, part 3 is in the making, and keep coding with passion !