The power of the reduced test case

Years ago, I learned about reduced test cases from Chris Coyier.

So what is a reduced test case, anyway? A reduced test case is a demo/example page you create which reproduces the problem you are having with the least amount of code possible. Only the HTML needed to show the problem content. Only CSS that is related to that reduced HTML. Only the JavaScript related to the problem functionality at hand.

Whenever one of my students is having trouble figuring out what’s wrong with their code, the first thing I do is ask them to create a reduced test case.

Strip out any JavaScript, CSS, or HTML that’s not needed to replicate the problem.

Why?

At a minimum, removing all of the extra noise makes it easier to focus on what’s actually causing the problem.

But often, in the process of removing “stuff you don’t need” the problem stops. That thing you just deleted and then the bug went away? That’s the problem code. Dig into it!

Reduced test cases are the single most effective tool I use for debugging broken code.