Can you reproduce it?

16 Jan 2011

The joy of debugging

While most of us don't enjoy bug fixing that much, I believe it's a healthy exercise. On top of the obvious benefits of fixing the code, I think it helps us gain an in-depth understanding of the system and of its dependencies - and as a result often sharpens our development skills.

A common practice in this area is to identify or write the simplest piece of code that exhibits the given behaviour. In fact, this involves a mental process I consider crucial: breaking down the problem into pieces small enough to be processed. As we create that mental picture, we can eliminate the pieces that don't belong to this puzzle until we're left with the core of the issue. How many times have I started a post on stackoverflow to explain what I was trying to do, to realise what the answer was before pressing "Post"? Trying to express the problem in a simple way forces you to identify the different actors and how they interact - and I think that's invaluable.

Of course a great side effect of reproducing a bug in a minimal context is that it's much easier to share. Giving someone a single failing test or a sample dummy app makes it so much easier for them to help, as it obviously reduces the number of actors and possible culprits. Just like a game of Cluedo with only 2 rooms and 3 weapons.


However, I know that the effort that goes into creating a smaller context often clashes with my best intentions. For example, working on a web app, I'd have to create a small webpage, include the typical libraries, and eventually host it somewhere my teammates can see it... sounds like a lot of work. This is probably why I'm really happy I found jsFiddle, a small online collaborative platform to write and execute Html / Css / Javascript.

jsFiddle screenshot

The features that stand out are:

To give you an example, here's two fiddles I created recently. They both originated from an unusual bug in our app, and fiddling helped narrowing down the exact cause, made it easy to run the code against different browsers, and optionally share the test case with the right people.

Stop, collaborate & debug

Maybe I'm late to the party. After all, jsFiddle is the official recommended tool for submitting bug reports to the jQuery library. In any case, it definitely came in handy so many times recently, and everyone I tell about it told me how useful they find it. This might be what I really like about fiddling: no one tells you what it's for, and its scope is definitely not limited to reproducing bugs. It's also a great environment to quickly draft a concept and share it with your team, or to send someone a collaborative code sample. In these cloudy social days, isn't that what it's all about?