Покрокова інструкція використання дебагеру (налагоджувача) для початківців (VS Code + PHP / JS)

Якщо ви досі шукаєте помилки в коді за допомогою echo, var_dump() або нескінченних console.log(), настав час перейти на новий рівень. Дебагер (або налагоджувач) — це інструмент, який відрізняє аматора від професіонала. Він дозволяє зазирнути всередину вашого коду під час його виконання, значно прискорюючи пошук і виправлення помилок.

Розуміння принципів CI/CD, про які ми говорили в попередній статті, важливе для автоматизації випуску продукту. Але якісне налагодження коду — це те, що гарантує, що у ваш CI/CD конвеєр потрапить робочий код. Давайте розберемося, як приборкати цей потужний інструмент у Visual Studio Code.

---

 

Що таке дебагер і навіщо він потрібен?

Дебагер — це спеціальна програма, яка дозволяє виконувати ваш код крок за кроком, “заморожуючи” його в будь-який момент для аналізу. Уявіть, що ви можете зупинити час і роздивитися, які значення мають всі ваші змінні, який шлях проходить програма і де саме логіка дає збій.

Основні можливості, які надає дебагер:

• Точки зупину (Breakpoints): Дозволяють вказати рядок коду, на якому виконання має призупинитися.
• Покрокове виконання: Можливість рухатися по коду рядок за рядком, заходячи всередину функцій або переступаючи їх.
• Інспекція змінних: Перегляд поточних значень усіх змінних у момент зупинки.
• Стек викликів (Call Stack): Показує ланцюжок функцій, які привели до поточної точки виконання.
• Інтерактивна консоль: Дозволяє виконувати довільний код у контексті зупиненої програми.

---

 

Налагодження PHP за допомогою Xdebug у VS Code

Для PHP процес налаштування трохи складніший, оскільки вимагає встановлення серверного розширення Xdebug. Це розширення слугує мостом між рушієм PHP та вашим VS Code.

Крок 1: Встановлення та налаштування Xdebug

Спочатку переконайтеся, що Xdebug встановлений на вашому сервері. Найпростіший спосіб — скористатися офіційним майстром налаштування Xdebug. Він проаналізує вивід вашої команди phpinfo() і дасть точні інструкції.

Після встановлення додайте наступні рядки у ваш файл php.ini:

[xdebug]
zend_extension="шлях/до/вашого/xdebug.so"
; або просто zend_extension=xdebug
xdebug.mode=debug
xdebug.start_with_request=yes

Важливо: Після зміни php.ini не забудьте перезапустити ваш веб-сервер (Apache, Nginx).

 

Крок 2: Налаштування VS Code

1. Встановіть розширення PHP Debug для VS Code.
2. Перейдіть у вкладку “Run and Debug” (іконка з жуком 🐞 на бічній панелі).
3. Натисніть “create a launch.json file” і виберіть “PHP”. VS Code створить конфігураційний файл .vscode/launch.json. Зазвичай стандартна конфігурація “Listen for Xdebug” працює ідеально.

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for Xdebug",
            "type": "php",
            "request": "launch",
            "port": 9003
        }
    ]
}

 

Крок 3: Практичне налагодження PHP

1. Створіть простий PHP-файл, наприклад index.php.
2. Встановіть точку зупину (breakpoint): Клацніть мишею зліва від номера рядка (наприклад, на рядку 7). Там з’явиться червона цятка.
3. У VS Code на вкладці “Run and Debug” виберіть “Listen for Xdebug” та натисніть зелену кнопку “Play” (F5). Внизу з’явиться помаранчева смуга, що означає, що VS Code “слухає” підключення.
4. Відкрийте ваш PHP-файл у браузері. Виконання коду миттєво зупиниться на вашій точці зупину, і VS Code перехопить керування!

Тепер ви можете використовувати панелі дебагера для аналізу: переглядати змінні, стек викликів та керувати виконанням за допомогою кнопок “Step Over” (F10), “Step Into” (F11) тощо.

---

 

Налагодження JavaScript (Node.js) у VS Code

З JavaScript (зокрема, з Node.js) все набагато простіше, оскільки дебагер вбудований у платформу і VS Code підтримує його “з коробки”.

Крок 1: Підготовка коду та конфігурації

Створіть простий JS-файл, наприклад app.js.

function calculateSum(a, b) {
    let result = a + b;
    return result;
}
const x = 10;
const y = 25;
const sum = calculateSum(x, y);
console.log(`The sum is: ${sum}`);

Перейдіть на вкладку “Run and Debug”. Якщо у вас ще немає файлу launch.json, створіть його, вибравши середовище “Node.js“. Конфігурація “Launch Program” буде створена автоматично.

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/app.js"
        }
    ]
}

 

Крок 2: Практичне налагодження JavaScript

1. Встановіть точку зупину у файлі app.js, наприклад, на рядку 2, всередині функції.
2. На вкладці “Run and Debug” переконайтеся, що обрано “Launch Program”, та натисніть F5.

Програма запуститься і одразу зупиниться на вашому брейкпоінті. Інтерфейс буде абсолютно таким же, як і при налагодженні PHP: зліва ви побачите локальні змінні (a та b), а внизу — інтерактивну консоль. Ви можете покроково пройти виконання коду і побачити, як обчислюється змінна result.

 

💡 Просунуті можливості: умовні точки зупину

Іноді потрібно зупинити код не завжди, а лише за певної умови (наприклад, у циклі, коли лічильник i дорівнює 50). Для цього клацніть правою кнопкою миші на брейкпоінті та виберіть “Edit Breakpoint…”. Ви можете вказати умову (Expression), наприклад i === 50. Тепер дебагер зупиниться лише тоді, коли ця умова стане істинною. Це надзвичайно економить час!

 

 

Замість висновку

Освоєння дебагера — це один з найважливіших кроків на шляху до професійної розробки. Це перетворює сліпий пошук помилок на контрольований та ефективний процес. Хоча початкове налаштування, особливо для PHP, може здатися складним, витрачений час окупиться сторицею. Зробіть дебагер своїм щоденним інструментом, і ви забудете про хаотичні console.log назавжди.