Покрокова інструкція використання дебагеру (налагоджувача) для початківців (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.

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