Are you ready to bring ChatGPT to life to debug your code? Wondering if you must speak to it in English,  ask it to pose questions to you before it start replying or to act as an experienced Software Engineer ? Don't worry, you're not alone! There are plenty of opinions on how to best use ChatGPT, and we're still at the beginning. But fear not, I've tested the most common techniques for you and I'm here to share my tips to get the answers you're looking for when solving your code problems. I even asked ChatGPT itself what it thought about those tips.

To illustrate, let's begin with an issue commonly found in web development using the widely-known React library :

The bug in question involves a component's state failing to update ❌ as a user types into a form field.

In other words, React developers might encounter a problem where the text entered by a user into a text input field is not properly saved and displayed by the application as anticipated.

‍

🔴 Here is our first, very bad, and I mean verrrryyyy bad prompt

“I have a problem with my code. It's not working. Help me.”

Obviously we receive no correct answer with that, let’s improve it.

‍

1. Give - your - code

It may seem obvious but don't just give ChatGPT the error message. Give it the code as well to help the AI understand the problem. For example, if you have an error related to a function, show it the code of that function and the associated calls. This allows ChatGPT to see the context of the problem and to analyse the interactions between the different parts of your code.

Secret tip🕵️ : if you want to be sure that ChatGPT understands the difference between your code and your prompt, you can separate it with 3 double quotes (”””yourCode”””)

‍

🟠 Your prompt now has a minimum of context

"I have a problem with my code. It's not working. Help me.

""”

“””

What am I doing wrong?”

‍

2. Speak English

Use English to communicate with ChatGPT. Why? Its training data is largely based on English text. Therefore, its understanding and ability to generate answers in English is more advanced and accurate than in other languages. Although it can understand and generate responses in many other languages, the quality and reliability of these responses may not be as high as in English.

And the AI says it itself :

3. Assign a role

Ask ChatGPT to play the role of an expert or engineer for more advanced advice. For example, tell it, "You're a React expert, help me solve this error." By assigning a specific role, you encourage the AI to tap into its most advanced and relevant knowledge for your problem. This can also help guide proposed solutions to best practices and proven approaches in your development domain.

My take 🤔 : You have to choose your role carefully or you risk steering the AI in the wrong direction, so I prefer to avoid using this method too much. Also I didn’t notice major changes in the way it replied me.

‍

🟠 Your prompt has now a role

“As a React expert, can you help me fix my React code? The state of my component is not updating correctly. Here's the code:

“””

put the code there

“””

“

‍

4. Contextualize, more

Provide information about the technology, the language, the error encountered, anything that might be useful to the AI.  By giving a clear context, you help ChatGPT to better understand the situation and propose more relevant solutions for your problem. Feel free to provide details about your project's architecture, libraries used, and specific features you are trying to implement. The more information you provide, the easier it will be for the AI to help you efficiently.

‍

My checklist of information to give ✅

• The framework
• The error (mini-tip: only give the whole Error Stack when it is relevant or the stack only talks about your code, otherwise send only the error message as it can confuse the AI)
• My environment (MacOS, Windows)
• The language (mini-tip: ChatGPT has more trouble with TypeScript than with Javascript, it will very often give you wrong types or untyped responses)
• Libraries

Adapt this information to your context!

‍

🟢 Your prompt has now a pretty good context, you’re almost there

“As a React expert, can you help me fix my React code? I'm working with React on a MacOS environment, and I'm using Javascript. My issue is that the state of my component is not updating correctly. Here's the code:

“””

put the code there

“””

“

At this point ChatGPT should already be able to find the solution to this easy problem. But I hardly advise you to read the rest of the article as you’ll face harder problems during your developments.

Here is ChatGPT reply at this point, did you know what was the problem ? 🥸

‍

5. Share your attempts, it wants to learn

Tell ChatGPT what you've already tried and why it didn't work. For example, "I tried binding the 'handleChange' method to the class instance, but the error persists." By sharing your previous attempts, you prevent the AI from suggesting solutions that you've already tried without success. In addition, it can help ChatGPT understand any errors in your current approach and point you toward more effective solutions.

Secret tip🕵️ : when telling ChatGPT what you tried, don’t just say what didn’t work, when you can you should add why it didn’t work. It’ll help the AI understand even more the problem and the potential solutions.

‍

🟢👍 Your prompt is looking super gooood

“… I tried adding a 'value' attribute to the input element, but the state still doesn't update when the user types into the form field. Here's my current code: … “

‍

6. Ask the AI to ask you questions, its an interview

Encourage ChatGPT to ask questions to clarify the context if necessary. For example, "Until you have enough context to give a quality answer, ask me questions to gather all the information." This allows the AI to fill in the gaps in its understanding of your problem and get additional information to provide you with better solutions.

Warning ⚠️ : However, be prepared to answer sometimes very specific questions, such as the versions of your libraries or the dependencies of your project. This information can be crucial to finding the most appropriate solution to your problem.

‍

✅⭐⭐ Isn’t it cheating if its working that well that easily?

“…If you need more information to help me resolve this issue, please feel free to ask me questions. Here's my current code: …”

‍

7. Specify your expectations, clearly

Describe the exact behavior you expect so that ChatGPT understands your goals. For example, "I want my component state to update when the user enters text in the form field." By specifying your expectations, you provide the AI with a clear goal to achieve with the proposed solutions. Feel free to give concrete examples of the desired behavior, this will make it easier for ChatGPT to understand your expectations.

‍

🚀⭐⭐⭐ Are you Einstein ? Because if you’re here you’re at least as smart as him

“…I want the component's state to update with the user's input as they type into the form field. Here's my current code:”

‍

8. Always ask for alternatives

Do not hesitate to ask for several solutions or alternatives. By asking for alternatives, you give yourself the opportunity to compare and choose the best solution for your situation. It can also help you discover new techniques or methods for solving similar problems in the future.

Also, since ChatGPT responses can be random in terms of quality, getting multiple responses increases your chances of finding an effective and relevant solution.

‍

👽🎇 Do we live in a simulation? It really can’t be that easy

“…Could you provide me with a few alternative solutions to fix the issue with my React component's state not updating when the user types into the form field? Here's the code:…”

‍

Your perfect prompt

Well done, you have now your perfect prompt, you’ll now need 10x less time than others to fix your bugs. Here is how would look your final perfect prompt:

“As a React expert, you must help me fix my code. I'm working with React on a MacOS environment, and I'm using Javascript. My issue is that the state of my component is not updating correctly when the user types into a form field. I tried adding a 'value' attribute to the input element, but the state still doesn't update. I want the component's state to update and to display the new value with the user's input as they type into the form field. If you need more information to help me resolve this issue, please feel free to ask me questions. Could you provide me with a few alternative solutions to fix the issue ? Here's the code:

""”

“””

‍

Conclusion

Even if today ChatGPT is still connected to the internet of 2021, it can still be very useful for your computer tasks, especially debugging your code. And it doesn't matter what language or framework you use, be it React, Swift, Java or Cobble.

I hope you enjoyed this article and if you want to go further and use 100% of the capabilities offered by artificial intelligence I strongly recommend you to take an interest in the Auto-GPT and Langchain projects. The first one will allow you to have autonomous AI agents doing research and coding for you, the second will permit you to connect all types of applications with your AI.

If you don’t have time to try them, I’ll do it for you on my Twitter.