Вступ: Нова ера дебагінгу
Виправлення помилок (debugging) - невід'ємна частина програмування. Традиційно розробники витрачали години на пошук багів, читання документації та експерименти. Але з появою AI-асистентів, таких як Gemini та Claude, процес дебагінгу став інтерактивним діалогом, де AI допомагає не лише знайти помилку, але й зрозуміти її причину.
У цій статті ми розглянемо техніки діалогового дебагінгу - як формулювати запити, щоб AI швидко та ефективно допомагав виправляти помилки в JavaScript.
Чому діалоговий дебагінг ефективний
Переваги AI-дебагінгу:
- Миттєва допомога: Не потрібно шукати в Stack Overflow
- Пояснення: AI не лише виправляє, але й пояснює причину помилки
- Навчання: Ви вчитеся на реальних прикладах
- Контекст: AI враховує весь ваш код, а не лише фрагмент
Базові принципи ефективного промпту для дебагінгу
Щоб AI швидко знайшов помилку, ваш промпт має містити:
- Код з помилкою: Повний фрагмент коду
- Повідомлення про помилку: Точний текст помилки з консолі
- Очікувана поведінка: Що має робити код
- Фактична поведінка: Що відбувається насправді
- Контекст: Де використовується код (браузер, Node.js)
Промпт #1: ReferenceError - найпоширеніша помилка
Сценарій: Ви отримали помилку "ReferenceError: x is not defined".
Ось фрагмент мого JavaScript-коду, який не запускається і видає "ReferenceError: userName is not defined". Знайди помилку, виправ її та поясни, чому це сталося, використовуючи простий приклад.
Код:
function greetUser() {
console.log("Hello, " + userName);
}
greetUser();Що робить цей промпт ефективним:
- Точний текст помилки
- Повний код функції
- Прохання про пояснення
- Прохання про простий приклад
Очікувана відповідь AI:
AI поясніть, що змінна userName не оголошена, і запропонує виправлення:
function greetUser() {
const userName = "User"; // Оголошення змінної
console.log("Hello, " + userName);
}
greetUser();
Промпт #2: TypeError - помилки типів
Сценарій: Помилка "TypeError: Cannot read property 'length' of undefined".
Мій код видає помилку "TypeError: Cannot read property 'length' of undefined". Ось код:
function getArrayLength(arr) {
return arr.length;
}
console.log(getArrayLength());
Поясни, чому це відбувається, та запропонуй виправлення з перевіркою на undefined.Ключові елементи:
- Точна помилка
- Код функції та виклику
- Прохання про перевірку на undefined
Очікуване виправлення:
function getArrayLength(arr) {
if (arr === undefined || arr === null) {
return 0; // Або інше значення за замовчуванням
}
return arr.length;
}
console.log(getArrayLength()); // 0
console.log(getArrayLength([1, 2, 3])); // 3
Промпт #3: Асинхронні помилки
Сценарій: Проблеми з async/await або промісами.
Мій асинхронний код не працює правильно. Ось код:
async function fetchData() {
const response = fetch('https://api.example.com/data');
const data = response.json();
console.log(data);
}
fetchData();
Що не так? Поясни, як правильно використовувати async/await, та виправ код.Що важливо:
- Вказано, що код асинхронний
- Повний код функції
- Прохання про пояснення async/await
Виправлення:
async function fetchData() {
const response = await fetch('https://api.example.com/data'); // Додано await
const data = await response.json(); // Додано await
console.log(data);
}
fetchData();
Промпт #4: Логічні помилки
Сценарій: Код працює, але результат неправильний.
Моя функція має повертати суму всіх парних чисел у масиві, але результат неправильний. Ось код:
function sumEvenNumbers(arr) {
let sum = 0;
for (let i = 0; i <= arr.length; i++) {
if (arr[i] % 2 === 0) {
sum += arr[i];
}
}
return sum;
}
console.log(sumEvenNumbers([1, 2, 3, 4, 5, 6])); // Очікую 12, але отримую NaN
Знайди логічну помилку та поясни, чому виникає NaN.Ключові моменти:
- Опис очікуваної поведінки
- Фактичний результат
- Повний код
Виправлення:
function sumEvenNumbers(arr) {
let sum = 0;
for (let i = 0; i < arr.length; i++) { // Змінено <= на <
if (arr[i] % 2 === 0) {
sum += arr[i];
}
}
return sum;
}
console.log(sumEvenNumbers([1, 2, 3, 4, 5, 6])); // 12
Пояснення: Помилка в умові циклу (i <= arr.length замість i < arr.length), що призводить до спроби доступу до неіснуючого елемента.
Промпт #5: Помилки в DOM-маніпуляціях
Сценарій: Код не змінює елементи на сторінці.
Мій код має змінити текст кнопки, але нічого не відбувається. Ось HTML та JavaScript:
HTML:
<button id="myButton">Click me</button>
JavaScript:
const button = document.getElementById('myBtn');
button.textContent = 'Clicked!';
Знайди помилку та поясни, як правильно працювати з DOM.Що важливо:
- HTML-структура
- JavaScript-код
- Опис проблеми
Виправлення:
const button = document.getElementById('myButton'); // Виправлено ID
button.textContent = 'Clicked!';
Пояснення: ID в HTML - myButton, а в JavaScript - myBtn. Невідповідність призводить до того, що button стає null.
Техніки діалогового дебагінгу
Техніка 1: Поетапне уточнення
Якщо AI не зрозумів проблему з першого разу, уточнюйте:
- Перший промпт: Опишіть проблему загально
- Другий промпт: Додайте більше контексту (версія браузера, бібліотеки)
- Третій промпт: Запитайте про конкретний аспект
Техніка 2: Прохання про альтернативи
Ти виправив мій код, але чи є інший, більш ефективний спосіб вирішити цю задачу? Покажи альтернативний підхід.
Техніка 3: Навчання на помилках
Поясни, чому моя помилка - типова для початківців, та дай поради, як уникнути подібних помилок у майбутньому.
Техніка 4: Перевірка розуміння
Я виправив код згідно з твоїми порадами. Чи можеш ти перевірити, чи правильно я зрозумів твоє пояснення? Ось мій виправлений код: [код]
Поради для ефективного AI-дебагінгу
1. Копіюйте точний текст помилки
Завжди копіюйте повне повідомлення про помилку з консолі, включаючи номер рядка.
2. Надавайте контекст
Вказуйте, де виконується код (браузер, Node.js), які бібліотеки використовуються.
3. Показуйте повний код
Не обмежуйтеся лише рядком з помилкою - показуйте всю функцію або блок коду.
4. Описуйте очікувану поведінку
Чітко формулюйте, що має робити код.
5. Просіть пояснення
Не лише виправлення, але й пояснення причини помилки.
Типові помилки та як їх уникнути
Помилка 1: Неповний код
❌ Погано: "Мій код не працює: console.log(x);"
✅ Добре: "Мій код видає ReferenceError. Ось повний код: [повний код з оголошенням змінних та викликами функцій]"
Помилка 2: Відсутність тексту помилки
Завжди копіюйте точний текст помилки з консолі.
Помилка 3: Ігнорування контексту
Вказуйте, де виконується код та які інструменти використовуються.
Практичні кейси
Кейс 1: Помилка в циклі
Проблема: Нескінченний цикл.
Промпт:
Мій цикл while працює нескінченно та зависає браузер. Ось код:
let i = 0;
while (i < 10) {
console.log(i);
}
Знайди помилку та поясни, як правильно використовувати while.Виправлення: Відсутній інкремент i++ всередині циклу.
Кейс 2: Помилка в event listener
Проблема: Обробник події не спрацьовує.
Промпт:
Мій обробник кліку не спрацьовує. Ось код:
document.getElementById('btn').addEventListener('click', handleClick());
function handleClick() {
alert('Clicked!');
}
Що не так? Поясни, як правильно додавати event listener.Виправлення: handleClick() викликає функцію одразу. Потрібно handleClick без дужок.
Висновок
Діалоговий дебагінг з AI - це потужний інструмент для навчання та швидкого виправлення помилок. Ключ до успіху - детальні промпти з повним кодом, точним текстом помилки та описом очікуваної поведінки.
Основні takeaways:
- Завжди копіюйте точний текст помилки
- Показуйте повний код, а не фрагменти
- Описуйте контекст виконання
- Просіть пояснення, а не лише виправлення
- Використовуйте діалог для уточнення
Тепер ви готові ефективно виправляти помилки за допомогою AI! Експериментуйте та навчайтеся на своїх помилках.