The art of debugging code to get help

by SkillAiNest

Computers will, 100% of the time, without fail, do exactly what you do. to tell They have to. It’s getting them to do what you’re doing. want Getting them to do so is the real trick.

The difference between you to tell Computers and what you have to do. want Computers are where bugs breed and thrive.

But as moderator Freecode Camp DiscordI often see people say, “I did everything perfectly but my code isn’t working!” These guys know what they are. want They have to be coded. But they didn’t. to tell How do computers do it right?

To solve their problem, they must align their desires—their mental model of their code’s behavior—with their code. Hypotheses are the trusses that hold this space.

The problem with assumptions

Let’s say I’m working on a web page and I want to set the background of an element to blue. It’s not working as I want. This is setting the text color instead of the background color.

I enlist my co-worker to help. I tell him, “I told the computer to make the background blue. But it’s setting the text color instead!”

My problem is that I did not Have the computer replaced. Background color. Instead I accidentally used color Property. There is no way for my partner to know that I am using the wrong property. So my assumption prevented him from helping me.

The ingredients of a great question

Getting help takes effort. The more work you do to get help, the more likely you are to get the help you need. In my experience, there are 3 components to a great question when you need technical support. Contains great questions. all of these components.

  1. The code that has the problem.

  2. Any error messages you see.

  3. Contains a description of the problem all Of the following

Below, I’ll break down each component in detail if you’re not sure how to approach it when asking for help.

The code that is at issue.

It’s harder than it sounds. Often, the reason I fail to fix a problem myself is because I’m looking in the wrong place. I’m looking in the wrong function, file, or even project! If I go to my co-worker for help and just provide him with the code that I think contains the problem, then she can’t help me.

This means it is important to provide as much context as possible. This increases the chances that the code you share with your support people will contain the information they need to help them solve your problem.

Even with decades of coding experience, I often have doubts about how certain code will behave. Being able to run the code and experiment with it (add logs, attach a debugger, try different inputs, and so on) is a big part of my process.

There are many ways you can send your code to someone to get help. Here are some examples:

For larger projects

If you’re having trouble with a large project (multiple files or more than a couple of hundred lines of code). Then your best bet is to share a GitHub A repo containing all the code.

Alternatively, you can create a “minimal reproduction”. If you can develop the problem in the context of a small amount of code, you can share that code instead. This can dramatically reduce the amount of work that others need to do to help you and increase your chances of getting the answers you’re looking for.

Note: When working on a project for a client or employer, you may not be able to get help from outside sources due to your inability to share relevant code. Do not share your employer’s or clients’ code publicly unless you have express permission to do so!

For single-file projects

If your project consists of only one or two files or you are at least recreating the problem, you can inline your code in the chat message or Summary of GitHub Contains the relevant code.

Alternatively, you can use a tool like Code Pane or StackBlitz To quickly reproduce the problem you are experiencing.

A discard message containing a code block that has not yet been sent. It starts with three backticks and letters. "js" on their own line, then contains some JavaScript code followed by three more backticks on their own line at the end.

For free CodeCamp lessons

I get a lot of questions on Freecode Camp Discord related to the learning platform (curriculum) lessons. When asking questions about one of these lessons, make sure you include:

  1. All code from the editor panel (ie all code you’ve written or changed)

  2. Step link

Without these two things, providing support becomes dramatically more difficult.

Error messages

Error messages may occur when you are a new developer. Very scary. It’s understandable that you might balk at them because they don’t make sense and you’re not sure how to use them to solve your problem.

Read your error messages carefully It can be one of the first steps you take to become a strong developer. But even if you don’t know what to make of a message, when asking for help, make sure you give others who have experience reading these messages a chance to do so. If you have any error messages. The console or Terminal, copy/paste them. In their entirety to your post for help.

Description of the problem

When asking for help, you should. Consider that the person or people you are asking may not have any context for your situation.. It’s up to you to give them the context they need. To make sure you give that context, include each of the following:

Steps to reproduce the problem

Specifically, what did you do that caused you to encounter this problem? Be as detailed as possible here. Add things like, “I clicked the ‘Submit’ button,” or “I opened in my browser.”

Expected result

Me: “My text is blue!”
My partner: “That’s good.”

My partner was not dismissive of my anxiety. He just didn’t know if was Problem or not? maybe i wanted The text is blue. Maybe the blue text had nothing to do with my problem. Text may turn blue only under certain conditions.

If I had told my co-worker that I expected the background to be blue instead of the text, he would have quickly realized what I did wrong and offered a good suggestion on how to fix it.

Actual result

Me: “I wanted my background to be blue!”
My partner: “That’s good.”

Forgetting to give the actual result is as useless as forgetting to give the expected result. Your code has an expected and actual result. both Important for a well formulated question.

When it comes to sharing actual results, screenshots or videos can be quite handy. Just make sure you’re not relying on them to the exclusion of the other components of a good question.

Example question

Here’s an example of what putting all this guidance together can achieve:

I am at this step:

I tried putting in this code:

for (iterator; condition; iteration) {

}

I expected it to go through, but instead, it gave me an error reading:

ReferenceError: iterator is not defined

Can anyone help me figure out what I’m doing wrong? Here is a screenshot of the steps and the error:

FreecodeCamp website showing step-by-step instructions and errors.

The question is not long, but contains all the elements of a standard question as described in this article. It gives the code that has the problem (including a link to the freeCodeCamp step), the error message that is displayed, and the expectations (that it should pass) and the actual result (that an error message is displayed). It also includes a helpful screenshot showing how the error and result are displayed.

Concluding thoughts

It feels like a whole lot of effort. I just want to solve my problem. do i Really All this needs to be done???

Short answer? Yes, but only because This is less Try to engage in a long back and forth as people try to help you get this information. Not only that, but if you go through these steps and gather this information, you may even find that you can solve your problem yourself without involving others.

This process may feel tedious at first, but like many things in life, it gets easier if you practice it regularly.

You’ve got it. 😎

You may also like

Leave a Comment

At Skillainest, we believe the future belongs to those who embrace AI, upgrade their skills, and stay ahead of the curve.

Get latest news

Subscribe my Newsletter for new blog posts, tips & new photos. Let's stay updated!

@2025 Skillainest.Designed and Developed by Pro