Пошаговая инструкция использования дебаггера (отладчика) для начинающих (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. Определите точку останова: Щелкните мышью слева от номера строки (например, на строке 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.

Вместо вывода