Member-only story
5 Powerful Techniques to Let You Debug Like a Pro
On how to bite the debugging bullet
As a developer, it is hard enough to explain your job to stranger at parties. So when asked about our profession, we often mention a shiny feature we recently build or a new technique we are experimenting with. Rarely do we mention the most tedious and frustrating — but equally important — part of our job: debugging.
Human errors are a given. And since code is — at least for know — written by humans, solving those errors is an integral part of our job. Because debugging is perceived as a necessary evil, it is often done rashly and without much thought. But, when you master the tools to do the job, debugging can actually be fun and rewarding.
Solving problems in structured and effective ways can be just as valuable as developing new functionality. So to let you boast about your debugging skills at your next birthday party, here are 5 techniques to help you solve bugs like a pro.
1. Use the "debugger"
statement
All modern browsers contain high-quality debugging tools. So if you run into a client-side bug, placing breakpoints inside to browser’s debugger is generally a good idea.
But finding the correct file and line number inside the debugger can be tedious. Behold the debugger
statement! This statement will act as a breakpoint in the debugging tool available, so you can directly start debugging at the right place.
function potentiallyBuggyCode() {
debugger;
// do potentially buggy stuff to examine, step through, etc.
}
2. Inspect the stack trace
Errors are often the tip of the iceberg. A pathway of code that led to the error is hidden beneath the surface. Therefore an error is often hard to understand in isolation. The error’s stack reveals the pathway of function calls that ultimately resulted in the error. The file names and line numbers of the subsequent calls are exposed, helping you to understand the error better.
The snippet below is a trace of 3 functions: trace
, b
and a
. The error originated by subsequently calling function a
on line 19, b
on line 16, and finally trace
on line 17. Seeing the actual…