ChatGPT for Coders: 3 Practical Ways to Optimise your Workflow

自从 ChatGPT 发布以来，我在互联网上看到了很多关于它对未来编程可能意味着什么的讨论。

肯定有很多“FUD”在那里传播，但它基本上归结为两个论点：

编程将继续有利可图，我们会使用 ChatGPT 和 Copilot 等工具进行调整。
ChatGPT 和 Copilot 等工具只是未来的开始，编程的未来是不确定的。

老实说，这两种未来都是可能的，甚至可能不会相互排斥。但是，该讨论可以保留到另一篇文章。

截至今天，程序员可以从像 ChatGPT 这样的工具中受益，我们应该拥抱它而不是回避它。

在这篇文章中，我想强调 3 个 ChatGPT 用例，这些用例让我受益匪浅，也可能对您有所帮助。特别是，它们是：解释代码、调试和编写样板。

Since the release of ChatGPT, I’ve seen plenty of discussion on the internet about what it might mean for the future of programming.

There is certainly a lot of “FUD” being spread out there, but it essentially boils down to two arguments:

Programming will continue to be lucrative, and we adapt using tools like ChatGPT and Copilot.
Tools like ChatGPT and Copilot are only the start of what is to come, and the future of programming is uncertain.

In honesty, both of these futures are possible and might not even be mutually exclusive. However, that discussion can be reserved for another article.

As of today, programmers can stand to benefit from a tool like ChatGPT, which we should embrace rather than shy away from.

In this post, I want to highlight 3 use cases of ChatGPT that have benefited me and could help you too. In particular, these are: Explaining Code, Debugging, and Writing Boilerplates.

1.解释代码

假设您选择了一个具有现有代码库的新项目。

您正在尝试了解所有内容是如何拼凑在一起的，以前的开发人员编写了什么以及它是如何工作的。这可能是一个相当大的挑战。

虽然 ChatGPT 无法拼凑出整个程序的工作原理，但它可以帮助您了解特定的部分或部分。

例如，我要求 ChatGPT 解释以下摘自ProbeX的代码，这是我正在从事的一个副项目。

1. Explaining Code

Say you’ve picked up a new project with an existing codebase.

You’re trying to understand how everything is pieced together, what the previous developers have written and how it works. This can be quite a challenge.

While ChatGPT can’t piece together how the entire program works, it can help you understand particular sections or segments.

For example, I asked ChatGPT to explain the following piece of code taken from ProbeX, a side project I’m working on.

function recent_scans() {var xhttp = new XMLHttpRequest();xhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {resp = JSON.parse(this.responseText);for (key in resp){if(location.href.search('reports.html') != -1){scan_data = "<a href=/reports.html#"+resp[key]['scanid']+" onclick='location.reload()'>"+resp[key]['url']+"</a><br>";} else{scan_data = "<a href=/reports.html#"+resp[key]['scanid']+">"+resp[key]['url']+"</a><br>";}// Update dictionaryconsole.log(resp[key]["scan_status"]);if(resp[key]["scan_status"] == "Completed"){resp[key].scan_status = '<span class="label label-success">Completed</span>';}else{resp[key].scan_status = '<span class="label label-warning">In Progress</span>';}resp[key].scanid = scan_data;resp[key].id = parseInt(key) + 1;console.log(resp);}$(function () {$('#table').bootstrapTable({data: resp});});}};xhttp.open("GET", "/scan/scanids/", true);xhttp.send();
}

ChatGPT 的回复如下：

此代码定义了一个名为“recent_scans()”的 JavaScript 函数。调用时，该函数使用 XMLHttpRequest 对象向指定的 URL（在本例中为“/scan/scanids/”）发送 GET 请求。当服务器响应时，该函数检查响应的 readyState 是否为 4（意味着请求已完成）和状态是否为 200（意味着请求成功）。

如果满足这些条件，该函数会将响应解析为 JSON 并使用 for 循环迭代 JSON 对象。对于对象中的每个键，它检查当前 URL 是否包含“reports.html”，如果包含，它会创建一个带有重新加载页面的 onclick 事件的锚标记。如果 URL 不包含“reports.html”，它会创建一个没有 onclick 事件的锚标记。

然后该函数更新对象中每个键的 scan_status，在状态旁边添加“已完成”或“进行中”标签。最后，该函数使用 Bootstrap Table jQuery 插件使用来自 JSON 对象的数据创建一个表并将其显示在页面上。

这让我初步了解了函数的作用，但我知道代码需要修复。特别是，reports.html点击时页面未加载。

因此，我请 ChatGPT 帮助我进行调试。

ChatGPT’s response was the following:

This code defines a JavaScript function called “recent_scans()”. When called, the function uses the XMLHttpRequest object to send a GET request to the specified URL (in this case, “/scan/scanids/”). When the server responds, the function checks that the response’s readyState is 4 (meaning the request is done) and status is 200 (meaning the request was successful).

If those conditions are met, the function then parses the response as JSON and uses a for loop to iterate over the JSON object. For each key in the object, it checks if the current URL contains “reports.html”, and if it does, it creates an anchor tag with an onclick event that reloads the page. If the URL does not contain “reports.html”, it creates an anchor tag without an onclick event.

The function then updates the scan_status of each key in the object, adding a ‘Completed’ or ‘In Progress’ label next to the status. Finally, the function uses the Bootstrap Table jQuery plugin to create a table with the data from the JSON object and display it on the page.

This gave me an initial understanding of what the function does, but I knew the code needed to be fixed. In particular, the reports.html page wasn’t loading upon click.

Hence, I asked ChatGPT to help me with debugging.

2、调试

在我看来，从编程的角度来看，这是 ChatGPT 最能改变生活的用例。正如我在之前的帖子中提到的，感觉就像是有第二个人与您一起解决问题。

现在，如果我简单地询问 ChatGPT 上面的代码有什么问题，它给我的建议太笼统了。因此，在这里必须尽可能具体。

例如，这是我输入的提示：

使用此代码时页面未被重定向；可能是什么问题？下面的代码部分是我希望您注意的部分。

scan_data = “<a href=/reports.html#”+resp[key]['scanid']+” οnclick='location.reload()'>”+resp[key]['url']+”</一个<br>”；

这是 ChatGPT 返回的响应：

确保将 scan_data 变量正确附加到页面的 HTML 中。在浏览器中加载页面后，您可以通过检查该页面的 HTML 源代码来检查这一点。
确保正确调用了 location.reload() 函数。您可以尝试将 console.log 语句添加到 onclick 事件处理程序，以确认单击链接时正在调用该函数。
确保 a 元素的 href 属性设置正确。如果 href 属性设置为错误的 URL，即使调用 location.reload() 函数，页面也不会重定向。
检查控制台是否有任何可能提供有关该问题的更多信息的错误消息。打开浏览器的开发人员控制台（通常通过按 F12）并查找可能有助于识别问题的任何错误消息。

这是一个很好的起点。

我尝试了它给我的每条建议，并将结果报告给了 ChatGPT。然而，这些建议都没有奏效。

无论如何，它帮助我更多地思考这个问题。通过与 ChatGPT（和谷歌）的来回过程，我意识到reports.html只需要更多时间来加载。

然后，我向 ChatGPT 报告了我的发现，并要求它生成延迟页面加载的代码。我将它的响应添加到代码库中，它起作用了！

在此必须注意，此过程是一个迭代过程。它需要与 ChatGPT 进行一些来回交流，并对程序员部分进行一些了解，以了解可能存在潜在问题的位置。

2. Debugging

In my opinion, this is the most life-changing use case of ChatGPT from a programming perspective. As I mentioned in my previous post, it almost feels like you have a second person working with you to solve a problem.

Now, if I simply ask ChatGPT what was wrong with the above code, it gives me advice that is too general. So, here it is essential to be as specific as possible.

For example, this is the prompt I entered:

The page isn’t being redirected when using this code; what could be the issue? The code section below is what I want you to pay attention to.

scan_data = “<a href=/reports.html#”+resp[key][‘scanid’]+” οnclick=’location.reload()’>”+resp[key][‘url’]+”</a><br>”;

Here was the response ChatGPT came back with:

Make sure that the scan_data variable is being correctly appended to the HTML of the page. You can check this by inspecting the HTML source code of the page after it has been loaded in the browser.
Make sure that the location.reload() function is being called correctly. You can try adding a console.log statement to the onclick event handler to confirm that the function is being called when the link is clicked.
Make sure that the href attribute of the a element is set correctly. If the href attribute is set to an incorrect URL, the page will not redirect even if the location.reload() function is called.
Check the console for any error messages that might provide more information about the issue. Open the browser’s developer console (usually by pressing F12) and look for any error messages that might help identify the problem.

This was a great starting point.

I tried each of the suggestions it gave me and reported the outcomes back to ChatGPT. However, none of the advice actually worked.

Regardless, it helped me to think more about the problem. Through a back-and-forth process with ChatGPT (and Google), I realised that reports.html just needed more time to load.

I then reported my findings to ChatGPT and asked it to generate code that delays the page’s loading. I added its response to the codebase, and it worked!

It is essential to note here that this process is an iterative one. It requires some back-and-forth with ChatGPT and some understanding on the programmers part to know where potential issues can exist.

3. 编写样板

最后，让 ChatGPT 编写整个代码样板可以极大地提高生产力。

这是 ChatGPT 的一个更常见的用例，但仍然是一个强大的用例。

从本质上讲，您可以要求 ChatGPT 编写完整的函数、脚本和代码段，您可以根据自己的具体情况对其进行修改。

让我们举一个基本的例子。

提示：编写一个简单的 Flask API。

ChatGPTs 响应的一部分：

3. Writing Boilerplates

Lastly, having ChatGPT write entire boilerplates of code can be a huge productivity boost.

This is a more common use case of ChatGPT, but nonetheless, a powerful one.

Essentially, you can ask ChatGPT to write entire functions, scripts, and segments of code, which you can modify with your own specifics.

Let’s take a rudimentary example.

Prompt: Write a simple Flask API.

Part of ChatGPTs response:

from flask import Flask, jsonify, requestapp = Flask(__name__)@app.route('/greet', methods=['GET'])
def greet():name = request.args.get('name')return jsonify(message=f"Hello, {name}!")if __name__ == '__main__':app.run(debug=True)

From here, we can simply change the route, the function name and the return value, and it would be ready for deployment.

Obviously, this is a trivial example that we could have just Googled. However, the premise remains the same if we wanted something more complex.

从这里，我们可以简单地更改route、函数名称和return值，它就可以部署了。

显然，这是一个简单的例子，我们可以用谷歌搜索。但是，如果我们想要更复杂的东西，前提保持不变。

Conclusion

If it hasn’t already, AI tools like ChatGPT will likely shape how programmers write code in the future. As I see it, this means we can spend more time on the quality of the product rather than the intricacies of the code.

The use cases I’ve highlighted in this post are ones that I’ve found to be the most revolutionary, but honestly, I believe this only scratches the surface. For instance, other scenarios that come to mind are code optimisation, documentation writing and learning new technologies.

All in all, I like to think of ChatGPT as my very own on-demand assistant programmer; there to help me when I need, if I need. That’s it.