Becoming a Problem Solver

Tips to help formulate your debugging process

If you’ve ever been plugging away on a project and hit “Run” on your infallible block of code only to see the console have a melt-down; just know, everyone has. Errors and bugs are arguably going to consume the majority of your time as a developer and as we learn, grow, and experiment with new technology, sometimes we run into a bug that truly gives us a run for our money. Bugs that test our understanding and often leave us, initially, both frustrated and bewildered. Although these bugs can be a pain, this is where growth is found and concepts are solidified. They aren’t fun to run into, but the other side of a crazy error is always met with deeper understanding. So what do we do when faced with such an error?

Most bugs can be solved with an effort to read and understand what the error message is telling you. These messages are your friend and will almost always point you to the exact File and Line Number that the error originates from. On top of that, they will let you know the type of error you’re dealing with and in some cases, this information is enough to let you know what’s wrong and how to fix it. Let’s take a look at the following error message from a React app. Although this is a relatively simple error, it’s one that many people have experienced, and analyzing this message can help us break down future errors.

The first thing we should do is break this error down. What is React telling us here?

  • The error comes from ‘./src/App.js’
  • The error is a Syntax error
  • the message is that Adjacent JSX elements need to be wrapped in an enclosing tag
  • React is pointing to line 9

So after breaking that down, we realize something was typed wrong. More specifically, it looks like we are attempting to render 2 adjacent elements in our statement, without a wrapping element to contain them. React will only allow us to render 1 HTML element (though it can contain many child elements) so the fix for this is simple, we either move the p-tag inside of the header-tag or create an element that wraps them both.

Most often our bugs won't be as simple as a syntax error or a careless typo. In my experience, it’s often that I find myself attempting to manipulate or retrieve data, and sometimes that data can be incompatible with the methods I'm attempting to call on it, or sometimes, I lose access to the data altogether. For example, retrieving what I believe to be an array and calling array specific functions when I actually am working with an object which can’t be manipulated exactly how an array can. This is where debuggers become crucial and console logging your data at every step in a function/component hierarchy is important.

You might find it helpful to place console.log(-whatever information you want-) in your functions or components at multiple places in order to see what you have access to and how it's being manipulated by your code. Another method of doing this is to use a debugger. These are a common tool that exists in many languages (if not every language) that allow you to pause your code at any point, by placing your debugger wherever you wish, and pry into it in order to not only access and review your information that you have access to, but it also allows you to try calling different methods right there so you can be sure that what you are attempting to do will work. In my experience with Rails (byebug) and React (debugger), debugging tools are where I tend to spend a lot of time.

If you've tried and tried and still can't figure it out, The next step in my process is to identify and use my resources.

You’ll hear this phrase a ton and really internalizing it will help save you a ton of time in your work. The internet is your best friend in this field. For every problem that you run into, there's a full explanation and solution waiting for you in either the documentation, Github, or StackOverflow. USE THESE. Don’t stick around on a bug for hours and hours because you don't want to resort to the internet. There is no better place to start than with documentation. Good docs will break down every aspect of the technology you are trying to use and often times make your error a little more understandable and, therefore, easier to debug. The next step is StackOverflow. This is an online Question and Answer style forum with a community that revolves around developers posting their questions and other developers trying to answer them or at least give them the steps to find the answer.

You may not be able to find an answer to your exact question online, however, you will almost always find multiple questions that are similar in some way to what you are dealing with and with a little thought, you can figure out how to apply the solution to your own code.

Debugging is almost always frustrating in some way and bugs don't wait until you're in the mood to show up and they can really challenge you from time to time. But to think of bugs in a negative way would be such a disservice due to how important they are to our growth. They really open a door for us to gain more understanding about what it is we are trying to and often times can lead us to discover a solution we hadn’t thought of and wouldn't have learned otherwise. So in addition to the things I listed above, always ask yourself these questions when presented with a challenging error:

  1. What am I trying to accomplish with this code?
  2. What data do I need in order to do that?
  3. Do I have that data and what type of data is it?
  4. Am I using functions/ methods that are applicable to this data?
  5. If not, what methods do I have access to in order to complete my task
  6. What are my resources for further understanding

Software Developer