Try ChatGPT to First Understand Program Code & Error Messages

While reading a Slack message group, I saw a member post a code snippet. It wasn’t something I was familiar with, but I was curious. Using some online tools I was able to gleen more information. In this tutorial, I’ll show you how to use SnagIt and ChatGPT to better understand code examples or error messages.

Getting the Program Code

In this instance the program code was embedded in a picture. This meant I couldn’t copy the text directly. I could either retype it or use some sort of tool to extract the text. I wasn’t in the mood to retype it. In fact, I don’t think I would ever be in the mood even though this snippet had a humorous holiday angle.

Picture with code snippet.
Code courtesy of Christopher Penn

Extracting Text from the Image

There are tools that extract text from images. However, SnagIt, my favorite image editor includes a text extraction tool which is like OCR. All I needed to do was to use the Grab Text function on the image.

Extracting text from image.
SnagIt menu option to Grab Text

The program overlays a dialog box with a progress bar. Once done, you’ll see the extracted text.

Extracted code results from SnagIt.
Extracted text

SnagIt places a red underline on words it thinks are misspelled. For coding examples, it’s common to see these. There are also subtle font differences and line spacing. At this stage, you could edit the text if you wanted it to appear exactly as the original image.

Using ChatGPT

Many people are familiar with ChatGPT from OpenAI. It’s garnered a lot of press and can be used for many purposes. Lots of people are testing it to write content. However, I wanted it to help me understand the code snippet. The service is free at this time and requires you to set up an account or sign-in with a Google or Microsoft account.

  1. With your browser, navigate to https://chat.openai.com/auth/login
  2. Click the Log in or Sign Up button. You may have to confirm you’re not a robot.
  3. Click Continue.
  4. You should see a small ChatGPT dialog indicating this is a free research preview. Click Next.
  5. At the final panel, click Done. You’ll see the start page.
Starting panel for ChatGPT.
Initial ChatGPT panel

The service provides some useful information in three columns [A, B, C] that outline examples and limitations. For example, the service states it can generate incorrect information and doesn’t know world events after 2021. In addition, it can’t give you citations.

Create the ChatGPT Prompt

We’ve all heard the expression “garbage in, garbage out” and this applies here. The usefulness of the service depends on how you form your prompt. The prompt is what you type in the chatbox [D]. You can see examples of prompts in column [A] above.

In my case, I just typed in the chatbox “Can you explain this code for me?” and pasted in the extracted text from SnagIt. The tool is pretty forgiving and I didn’t have to worry about formatting.

ChatGPT prompt asking to explain code.
My first prompt

Soon after hitting the Enter key, the service was typing its answer. The system provides a different icon in the top left and the background color changes slightly. This is useful because you can continue to ask ChatGPT questions and expand the conversation. At the far-right are icons where you can indicate if the answer is good or bad. If you select the thumbs down icon, you have an opportunity to say what’s wrong.

Initial ChatGPT response to my prompt.
ChatGPT response

At the bottom, you’ll see you can refine your conversation by providing another prompt in the chatbox. In this case, I wanted to know why someone would use this code. You can see from the answer that ChatGPT isn’t entirely sure and that makes sense. However, it does provide an explanation and asks if I have additional information.

ChatGTP refinedment prompt.
My follow up prompt and reply

Testing Error Messages

Apart from code samples, I’ve also used the service to get more info on error messages. The process is similar and can be fruitful when technical support is closed. In this instance SnagIt did omit a couple of backticks when doing the text extraction. I don’t think it impacted the conversation. However, you should doublecheck your extracted text.

While you can’t see it from the screen snap above, the chat reply included two suggestions for fixing this error.

Explantion of WordPress error

Retaining the Information

Another nice feature of using this system is ChatGPT can retain your sessions. This means you can come back and look at your conversation, resume, or even regenerate another response. In other words, you could use it as a repository of code sample explanations.

By default the system will retain your session and show it on the left side. To the right of each entry are a pencil icon and trash can. These allow you to edit the chat title to a more meaningful name instead of the first portion of your initial prompt. You can also delete sessions.

Saved ChatGPT sessions.
Saved sessions and icons

While the service is still free, I’d encourage you to try it. Although I used coding examples and error codes, you can ask just about anything. The worst that can happen is it will tell you it can’t provide an answer. Or, maybe you realize gluten-free focaccia isn’t appetizing.

Just remember like all information, you want to trust but verify. It’s not perfect, but the more you use it, the more you learn how to work with it.