Gỡ lỗi mã ChatGPT-4
Sử dụng ChatGPT-4 để gỡ lỗi mã
Sử dụng ChatGPT-4 để viết mã cũng giống như nhờ một lập trình viên có kinh nghiệm xem qua mã của bạn.
Có thể khó phát hiện ra lỗi trong mã của chính bạn và thậm chí còn khó hơn trong mã do người khác viết.
ChatGPT có thể giúp bạn tiết kiệm rất nhiều thời gian cho việc gỡ lỗi mã.
Thu hẹp vấn đề
Trước khi sử dụng Generative AI để trợ giúp bạn, hãy xem liệu bạn có thể thu hẹp vấn đề và thu thập thêm thông tin hay không.
Hãy tìm hiểu (nếu bạn có thể):
- Phần nào của mã gây ra lỗi?
- Có bất kỳ thông báo lỗi nào không?
- Điều gì đã xảy ra và điều gì đáng lẽ phải xảy ra?
ChatGPT có thể tìm ra vấn đề chính xác hơn với nhiều thông tin hơn.
Mã vấn đề
Chương trước, chúng ta đã nhờ ChatGPT viết cho chúng ta một số mã cho một trang web. Bây giờ chúng tôi đã thêm một thiết kế mới vào trang và mã không còn hoạt động nữa:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.example.com.vn/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 days left</p>
</div>
<div class="w3-display-bottomleft w3-padding-large">
Powered by <a href="https://www.example.com.vn/w3css/default.asp" target="_blank">w3.css</a>
</div>
</div>
Hãy tự mình thử »Chúng tôi biết chúng tôi đã thay đổi phần nào của mã và nếu chúng tôi nhấn F12 (hoặc chuyển sang chế độ nhà phát triển cho trình duyệt của mình), chúng tôi có thể thấy lỗi trong "Bảng điều khiển":
Uncaught TypeError: Cannot set properties of null (setting 'innerText')
at countdownToSaturdayVới thông tin đó, hãy yêu cầu ChatGPT gỡ lỗi.
Ví dụ
Với lời nhắc sau:
The countdown function of the following page no longer functions.
<!DOCTYPE html>
<html>
<head>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.example.com.vn/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 days left</p>
</div>
<div class="w3-display-bottomleft w3-padding-large">
Powered by <a href="https://www.example.com.vn/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>
I get the following error:
Uncaught TypeError: Cannot set properties of null (setting 'innerText')
at countdownToSaturdayPhản hồi từ ChatGPT-4 có thể là:
Xem lại mã
Xem qua phản hồi từ ChatGPT, có vẻ như nó có thể hoạt động.
Chúng tôi đã vô tình xóa phần tử sẽ hiển thị văn bản. Việc thêm ID chính xác vào phần tử mới sẽ hoạt động.
Bài kiểm tra
Thêm bản sửa lỗi vào mã và kiểm tra nó:
Nó hoạt động!
