Gỡ lỗi mã ChatGPT-3.5
Sử dụng ChatGPT-3.5 để gỡ lỗi mã
Sử dụng ChatGPT-3.5 để 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 'innerHTML')
countdown @ unknown
window.onload @ unknown
Vớ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 to calculate the countdown
function countdown() {
// Get the current date
var currentDate = new Date();
// Check if it's Saturday
if (currentDate.getDay() === 6) {
var countdownElement = document.getElementById("weekend_countdown");
countdownElement.innerHTML = "The Weekend has landed";
return; // Exit the function early if it's Saturday
}
// Find the next Saturday
var daysToSaturday = (6 - currentDate.getDay() + 7) % 7; // Number of days until the next Saturday
var nextSaturday = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate() + daysToSaturday);
// Calculate the remaining time
var timeRemaining = nextSaturday.getTime() - currentDate.getTime();
var daysRemaining = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
var hoursRemaining = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
// Display the countdown on the web page
var countdownElement = document.getElementById("weekend_countdown");
countdownElement.innerHTML = daysRemaining + " days and " + hoursRemaining + " hours";
}
// Call the countdown function when the page loads
window.onload = function() {
countdown();
};
</script>
</body>
</html>
I get the following error:
Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
countdown @ unknown
window.onload @ unknown
Phản hồi từ ChatGPT-3.5 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ó:
Ví dụ
<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" id="weekend_countdown">35 days left</p>
</div>
Hãy tự mình thử »Nó hoạt động!