Creative Debugging

Creative Debugging

February 11th, 2014

For someone who is always writing bug-free code, I spend a lot of my time in the debugger. For my own sanity, I'll assume that goes for you as well. Since debugging is a significant part of our work, it is something we should be getting better at all the time. I like to use breakpoints, with conditions and actions and sometimes even sounds. But in this post I'd like to talk about some creative debugging I did recently.

In this new app we're working on, there is a lot of image loading going on. Images can be in multiple views at the same time. There's no owner of an image, just interested parties. Images are loaded when the first interested party comes knocking and are only unloaded when nobody's interested anymore. This is great for user experience, but it complicates the whole situation quite a bit.

A while ago, we were encountering increased memory pressure and I suspected it to be due to images not being unloaded properly. confirmed; a lot of raster data was building up in memory.

I had an idea of how my code should behave. For example, while scrolling in the grid view, images that you're moving away from are unloaded, the products that you're heading towards are fetched and their images subsequently loaded. It was however hard to see if the app was indeed behaving as I expected.

So, I put log statements in place for when an image was being loaded or unloaded. I ran the app and the console was flooded with both messages. This proved that both loading and unloading was happening, but it was impossible to spot a trend that could indicate faulty logic.

Then I came up with a quick way to plot the total number of loaded images with a few simple steps.

I copied the log into Sublime Text and did some multi-cursor editing magic. This is such a powerful feature of Sublime. It's great. I use it almost every day.

I now had many lines containing either 1 or -1, indicating that an image was being loaded or unloaded respectively. I pasted those lines into a new sheet. In the column next to it, I calculated the cumulative sum, which gave me exactly what I was looking for: the number of loaded images over time. I plotted the data in a simple line chart, identified the problem and solved the issue.

I hope this post will encourage you to add unconventional tools and means to your debugging tool belt. It encouraged me to write a convenient debug helper class that you can see at work in the first video: a graph that plots any statement's value history. Consider this a pre-announcement of its Open Source release.

The videos in this post were taken after I solved the issue. The graph in the last video shows the expected behavior, I'm pretty happy about it. I feel that log analysis is a great way to debug these kinds of problems, but I haven't really found tools to help me with that. I'd be interested in hearing your tips & tricks. Let me know, also if you have any questions or comments, at @thomvis88.

Be creative, try new things

This is one of the core values at Touchwonders. Do you like to be creative and try new things? We're hiring. Follow us at @touchwonders.

Thanks to my colleague Katie for creating the breakpoint balance illustration at the top of this post.