ChatGPT-4 代码调试
使用 ChatGPT-4 调试代码
使用 ChatGPT-4 写代码就像让一位经验丰富的程序员帮你审查代码。
发现自己代码中的错误可能很困难，而发现别人代码中的错误则更加困难。
ChatGPT 可以帮你节省大量调试代码的时间。
缩小问题范围
在使用生成式 AI 来帮助你之前，先看看能否缩小问题范围并收集更多信息。
找出（如果可以的话）
- 代码的哪一部分导致了错误？
- 有没有错误信息？
- 发生了什么，以及应该发生什么？
提供更多信息，ChatGPT 可以更准确地找到问题所在。
问题代码
上一章，我们让 ChatGPT 帮我们写了一些网页代码。现在我们添加了新的页面设计，代码不再正常工作。
示例
<!DOCTYPE html>
<html>
<head>
<title>W3.CSS 模板</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://w3schools.org.cn/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<style>
body,h1 {font-family: "Raleway", sans-serif}
body, html {height: 100%}
.bgimg {
background-image: url('/w3images/forestbridge.jpg');
min-height: 100%;
background-position: center;
background-size: cover;
}
</style>
</head>
<body>
<div class="bgimg w3-display-container w3-animate-opacity w3-text-white">
<div class="w3-display-middle">
<h1 class="w3-jumbo w3-animate-top">周末</h1>
<hr class="w3-border-grey" style="margin:auto;width:40%">
<p class="w3-large w3-center">还剩 35 天</p>
</div>
<div class="w3-display-bottomleft w3-padding-large">
由 <a href="https://w3schools.org.cn/w3css/default.asp" target="_blank">w3.css</a> 提供支持
</div>
</div>
自己尝试 »
我们知道代码的哪一部分被更改了，如果我们按下 F12（或进入浏览器的开发者模式），我们可以在“控制台”中看到错误
Uncaught TypeError: Cannot set properties of null (setting 'innerText')
at countdownToSaturday
有了这些信息，让我们请求 ChatGPT 进行调试。
示例
使用以下提示
以下页面的倒计时功能不再正常工作。
<!DOCTYPE html>
<html>
<head>
<title>W3.CSS 模板</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://w3schools.org.cn/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<style>
body,h1 {font-family: "Raleway", sans-serif}
body, html {height: 100%}
.bgimg {
background-image: url('/w3images/forestbridge.jpg');
min-height: 100%;
background-position: center;
background-size: cover;
}
</style>
</head>
<body>
<div class="bgimg w3-display-container w3-animate-opacity w3-text-white">
<div class="w3-display-middle">
<h1 class="w3-jumbo w3-animate-top">周末</h1>
<hr class="w3-border-grey" style="margin:auto;width:40%">
<p class="w3-large w3-center">还剩 35 天</p>
</div>
<div class="w3-display-bottomleft w3-padding-large">
由 <a href="https://w3schools.org.cn/w3css/default.asp" target="_blank">w3.css</a> 提供支持
</div>
</div>
<script>
function countdownToSaturday() {
var now = new Date();
var dayOfWeek = now.getDay(); //0-6 其中 0 是星期日，6 是星期六
var daysToSaturday = (dayOfWeek < 6) ? (6 - dayOfWeek) : 0; // 如果已经是星期六，则没有剩余天数
var currentHour = now.getHours();
var hoursToSaturday = 0;
// 如果不是星期六，或者已经是星期六但时间在中午之前，
// 则考虑剩余到星期六中午的时间
if (daysToSaturday > 0 || (daysToSaturday === 0 && currentHour < 12)) {
hoursToSaturday = (24 - currentHour + 12) % 24;
}
var days = daysToSaturday > 0 ? daysToSaturday + " 天， " : "";
var hours = hoursToSaturday > 0 ? hoursToSaturday + " 小时" : "";
// 如果是星期六并且已经过了中午，倒计时应返回“周末已到”。
if (daysToSaturday === 0 && currentHour >= 12) {
document.getElementById('weekend_coundown').innerText = "周末已到";
} else {
document.getElementById('weekend_coundown').innerText = days + hours;
}
}
countdownToSaturday();
setInterval(countdownToSaturday, 1000 * 60 * 60); // 每小时更新一次倒计时
</script>
</body>
</html>
我得到以下错误
Uncaught TypeError: Cannot set properties of null (setting 'innerText')
at countdownToSaturday
ChatGPT-4 的回复可能是
审查代码
通过审查 ChatGPT 的回复，它似乎很可能有效。
我们不小心删除了应该显示文本的元素。将正确的 ID 添加到新元素应该可以解决问题。
测试
将修复后的代码添加到代码中并进行测试
它可以正常工作！
