ChatGPT-3.5 Дебагінг (налагодження) коду
Використання ChatGPT-3.5 для налагодження коду
Використання ChatGPT-3.5 для написання коду — це те саме, що досвідчений програміст перевіряє ваш код.
Буде важко помітити помилку у власному коді, а ще важче в коді, написаному іншими.
ChatGPT може заощадити вам багато часу на налагодженні коду.
Звузьте коло проблеми
Перш ніж використовувати Generative AI для допомоги, перевірте, чи можете ви звузити проблему та зібрати більше інформації.
Визначте (якщо можете):
- Яка частина коду спричиняє помилку?
- Чи є повідомлення про помилки?
- Що відбувається і що мало статися?
ChatGPT може точніше знайти проблему за допомогою додаткової інформації.
Код проблеми
У минулому розділі ми запросили ChatGPT написати код для веб-сторінки. Тепер ми додали новий дизайн сторінки, і код більше не працює:
Приклад
<!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.w3schools.com/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.w3schools.com/w3css/default.asp" target="_blank">w3.css</a>
</div>
</div>
Спробуйте самі »
Ми знаємо, яку частину коду ми змінили, і якщо натиснути F12 (або перейти в режим розробника для нашого браузера), ми побачимо помилку в "Консолі":
Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
countdown @ unknown
window.onload @ unknown
Маючи цю інформацію, давайте попросимо 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://www.w3schools.com/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.w3schools.com/w3css/default.asp" target="_blank">w3.css</a>
</div>
</div>
<script>
// Функція обчислення зворотного відліку
function countdown() {
// Отримати поточну дату
var currentDate = new Date();
// Перевір, чи це субота
if (currentDate.getDay() === 6) {
var countdownElement = document.getElementById("weekend_countdown");
countdownElement.innerHTML = "Вихідні приземлилися";
return; // Вийдіть із функції раніше, якщо це субота
}
// Знайдіть наступну суботу
var daysToSaturday = (6 - currentDate.getDay() + 7) % 7; // Кількість днів до наступної суботи
var nextSaturday = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate() + daysToSaturday);
// Обчисліть час, що залишився
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));
// Відображення зворотного відліку на веб-сторінці
var countdownElement = document.getElementById("weekend_countdown");
countdownElement.innerHTML = daysRemaining + " days and " + hoursRemaining + " hours";
}
// Викликати функцію зворотного відліку під час завантаження сторінки
window.onload = function() {
countdown();
};
</script>
</body>
</html>
Я отримую таку помилку:
Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
countdown @ unknown
window.onload @ unknown
Відповідь від ChatGPT-3.5 може бути:
Помилка, з якою ви зіткнулися, вказує на те, що код намагається встановити властивість innerHTML для елемента, який неможливо знайти. Зокрема, він не може знайти елемент з ідентифікатором "weekend_countdown" у коді HTML. Щоб вирішити цю проблему, вам потрібно переконатися, що існує елемент HTML з ідентифікатором "weekend_countdown" у вашому коді.
Дивлячись на наданий код, здається, що елемент з ідентифікатором "weekend_countdown" відсутній. Щоб виправити це, ви можете додати елемент із цим ідентифікатором, куди потрібно відображати зворотний відлік. Наприклад, ви можете змінити код HTML таким чином:
Додаючи атрибут `id="weekend_countdown"` до елемента `<p>`, ви надаєте елемент, на який код JavaScript може націлюватися та відповідно змінювати його властивість innerHTML. Це повинно усунути помилку та забезпечити правильну роботу функції зворотного відліку.
Перегляньте код
Переглядаючи відповідь від ChatGPT, схоже, що це спрацює.
Ми випадково видалили елемент, який повинен показувати текст. Додавання правильного ідентифікатора до нового елемента має працювати.
Тест
Додайте виправлення до коду та протестуйте його:
Приклад
<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>
Спробуйте самі »
Це працює! Проблема може бути тільки в твоїх "кривих" руках!
