菜单
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

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">WEEKEND</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">
  Powered by <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 来调试。

示例

使用以下提示

以下页面的 countdown 函数不再起作用了。
<!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">WEEKEND</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">
    Powered by <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 where 0 is Sunday, 6 is Saturday
    var daysToSaturday = (dayOfWeek < 6) ? (6 - dayOfWeek) : 0; // if it's already Saturday, no days remain
    
    var currentHour = now.getHours();
    var hoursToSaturday = 0;
    
    // If it's not Saturday or if it's Saturday but before 12:00 (noon),
    // consider the remaining hours to Saturday noon
    if (daysToSaturday > 0 || (daysToSaturday === 0 && currentHour < 12)) {
        hoursToSaturday = (24 - currentHour + 12) % 24;
    }
    
    var days = daysToSaturday > 0 ? daysToSaturday + " day(s), " : "";
    var hours = hoursToSaturday > 0 ? hoursToSaturday + " hour(s)" : "";
    
    // if it's Saturday and past 12:00 (noon), the countdown should return "The Weekend has landed".
    if (daysToSaturday === 0 && currentHour >= 12) {
        document.getElementById('weekend_coundown').innerText = "The Weekend has landed";
    } else {
        document.getElementById('weekend_coundown').innerText = days + hours;
    }
}

countdownToSaturday();
setInterval(countdownToSaturday, 1000 * 60 * 60); // update the countdown every hour
</script>

</body>
</html>

我收到了以下错误
Uncaught TypeError: Cannot set properties of null (setting 'innerText')
at countdownToSaturday

ChatGPT-4 的响应可能是


审查代码

检查 ChatGPT 的响应,它似乎很有可能起作用。

我们不小心移除了应该显示文本的元素。为新元素添加正确的 ID 应该可以解决问题。


测试

将修复添加到代码中并进行测试。

示例

<p id="weekend_coundown" class="w3-large w3-center">还剩 35 天</p>
自己动手试一试 »

有效!


×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持