Debugging Tips & Tricks

Posted on - Last Modified on

Debugging is a vital skill to be an efficient developer. A developer who dedicates some time to learning debugging skills finds it easy to deal with various issues. There are a few tips you can rely on for ease of debugging.

Main ideas

Separate the problem

Isolation is a core tenet in debugging. Codebases could have many frameworks, libraries, and contributors, even those who are not involved in the project. Once the problem is isolated, developers can do away with unnecessary sections of the problem so that they can deal with it. Problem isolation is beneficial in many ways, some of which include:

  • Unraveling it and assessing if there are many problems

  • Checking if it’s the cause you assume, or if it’s just another conflict

  • Determining if developers can simplify the code, as this could be beneficial in writing and maintaining the code

  • Figuring out if you have a race on for all tasks which are time-based.

Reproducing the problem is vital, since it is not possible to solve a problem that has not been understood. A developer can compare the bugged model with a functional model to see what the problem could be. There are various ways to isolate. One is to come up with breakpoints within the code so that a developer can check its execution bit per bit. Another is to come up with a reduced test case on a JSBin, private Code Pen or local instance. You can define breakpoints in various ways:

Write debugger inline in the code, and this will fire minute pieces at a go.

Modes of isolation include Python's “print” or PHP’s “echo." You pick a small piece of the execution and assess your assumptions, so you can see if there is anything that needs altering. Regardless of how advanced one is in debugging, this is the most trusted method of proceeding.

Be systematic

Many students who seek to learn programming are not systematic when they try to debug code. They want quick solutions, so they attempt to change many things at once. If anything stops working, they don’t know where to turn to since they’ve lost track of where the error is coming from.           

Everyone does this, and as we progress in coding we can quickly write more code without first testing a given assumption. But if you’re not tech-savvy or a syntax specialist, it is important to be slow but sure. This way it’s easier to get out of a problem you created. Once an issue arises, it is better to debug one thing at a time even though the process is slow. You will know where the problem occurred, but if you go too fast it will be impossible to keep track of it.

Parents tell children “if you’re lost, don’t move.” If a kid runs around looking for their parents, it will be impossible to trace them. You can apply a similar idea to code. If you have few moving pieces, you can easily get consistent results and track any issues. Therefore, if you are debugging, do not input new dependencies or install anything.

Have proper tools at your disposal

Some tools solve various problems. Here are a few you can use:


Linting flags any suspicious code and calls out any errors you may overlook. It is a credible tool, but you need to choose the linter that corresponds to the framework/language you are using to write your code. Moreover, consider the code style you are using. There are many rules and code styles applied by various companies. Don’t fall for any linter, since it uses  patterns that can halt you in your code. A good linter should show small errors you may have missed. Visit Github linting services or site point linting tools.

Syntax highlighting

It is interesting to pick hot flavors and colors for your theme, and it is important to spend some considerable time assessing clarity. You can select dark themes so that a skip in your syntax will change your code to a brighter color. This will help to see errors. If you are looking for a syntax highlighter, by all means find one that looks good - but it should be functional enough to identify any mistake you make.

Extensions in your browser

Extensions are great since you can enable and disable them at will, and they are flexible enough to work with special requirements. If you are within a given framework or library, an extension for DevTools will provide clarity you cannot find anywhere else. However, take care of the extensions you are using, since some can bring your browser down and some are permitted to execute given scripts. Check the background and rating of the author of the extension you’re interested in. You can check these extensions if needed:

Dev Tools

This is arguably one of the most distinct debugging tools, and you can do many things with it. Be sure not to miss the many packed features.

Misc Tools

  • What input is a universal tool used to track your current method of inputting (keyboard or touch), and your current intent. It is a vital tool used to track down any leaks.

  • Ghostlabapp is a tool best used when you need to check anything that has been deployed on your device, or during responsive development. It makes it easy to inspect and test synchronized web development.

  • You can debug your mobile devices using eruda. It takes debugging a step further, giving you a rare experience in coding.

Special Tips

It is necessary to develop an interest in how other people debug. Check out these tips:

Accessibility - Many people prefer a debugging tool that is readily available and one in which they can choose their favorite colors with ease. You can validate the code you are working on, and track down any mistakes you may have made.


Go through Firefox and Chrome tools that offer animation. You can conduct performance audits using Chrome DevTools. Painting is the most expensive task so you should pay attention.

You can choose to use Frontend Masters Course which can aid your understanding of DevTools. If you need to be an authority in coding, Modern DevTools is an excellent course to undertake, or you could enroll in discover Devtools - an online school.  Make sure you learn how to remain productive in the world of multiple bugs. Take a debugger feature tour so you can learn various debugging tricks with ease. Do you hover over data tips frequently? Pin your data tip so the variable can give you quick access. The variable will remain pinned after you restart the debugger.

What debugging tool do you use? Let us know in the comments below why you prefer this tool over others.


Posted 24 July, 2017

Ruchi Bhargava

Content Writing | Designing | Web Development

Hi! Are you looking for content that gets all the birds (read: customers) in one proverbial stone? Then I'm the person you need to talk to. After millions of words written for my clients, I can guarantee one thing: quality. When you're working with me, you'll get nothing short of perfect, well-researched, and enticing content. But that's not all I'm about. Along with creating custom cont...

Next Article

Why You Need a Password Manager