Xdebug — это расширение для PHP, которое помогает разработчику в отладке php-кода. В отличие от стандартных методов (var_dump, print_r и пр.), оно позволяет использовать удалённый отладчик в IDE построчно через брейк-пойнты. Данный метод поможет отследить значения переменных и ускорит процесс поиска ошибок в коде.
Приятным бонусом для наших клиентов является тот факт, что мы заблаговременно установили Xdebug на каждом аккаунте и всё, что Вам необходимо будет сделать, это следовать дальнейшим инструкциям по настройке.
Для работы мы выбрали две IDE: PhpStorm и VSCode, так как они являются одними из самых распространённых, а также, чтобы был выбор между платной (PHPStorm) и бесплатной (VSCode) средой разработки.
Шаг 1: Настройка работы в режиме CGI
Зайдите в панель управления хостингом в раздел «Домены» и переключите php в режим CGI при помощи панели, расположенной справа от названия Вашего сайта. Необходимо выбрать «Стандартный режим».
Дальше нужно добавить следующие опции (сначала идёт название, через тире - значение):
Дальше нажмите Сохранить конфигурацию и подождите. Чтобы настройки подхватились необходимо около 5-10 минут.
Cоздайте 3 файла на сервере через файловый менеджер панели управления хостингом:
Добавьте в файл .htaccess содержимое:
Action php-cgi /cgi-bin/php.cgi AddHandler php-cgi .php .php3 .phtml
Установите на файл php.cgi права 0755 (rwxr-xr-x) и пропишите в файле следующие директивы:
#!/bin/bash /usr/local/php/php-version/bin/php-cgi -c /home/hostXXXXXX/путь/к/файлу/php.ini
php-version - версия php, которую Вы используете. Вот возможные пути:
/usr/local/php/php-5.2/bin/php-cgi /usr/local/php/php-5.3/bin/php-cgi /usr/local/php/php-5.4/bin/php-cgi /usr/local/php/php-5.5/bin/php-cgi /usr/local/php/php-5.6/bin/php-cgi /usr/local/php/php-7.0/bin/php-cgi /usr/local/php/php-7.1/bin/php-cgi /usr/local/php/php-7.2/bin/php-cgi
Наполните файл php.ini следующим содержимым:
;xDebug Configuration starts zend_extension = /usr/local/php-profilers/xdebug/php-version/xdebug.so xdebug.profiler_enable = 1 xdebug.profiler_enable_trigger = 1 xdebug.remote_host = 127.0.0.1 xdebug.remote_enable = 1 xdebug.remote_connect_back = 1 xdebug.remote_autostart = 1 xdebug.show_local_vars = 1 xdebug.overload_var_dump = 1 xdebug.max_nesting_level = 200 xdebug.extended_info = 1 xdebug.idekey = IDE xdebug.remote_port = 8015 xdebug.remote_handler = dbgp xdebug.remote_mode = req ;xDebug Configuration ends
В примере выше мы прописали путь к файлу расширения Xdebug, который по умолчанию уже лежит в дирекитории /usr/local/php-profilers/xdebug/php-version/ (php-version - Вы прописываете версию php, с которой работаете, например, php-7.1)
Мы выбрали порт 8015 (remote_port) для примера. Вы можете использовать любой, только запомните его, так как он ещё понадобится.
Для того, чтобы проверить, подхватились ли настройки, создадим файл myFile.php в директории /home/hostXXXXXX/domain-name/htdocs/www/ и выведем информацию с помощью функции phpinfo():
<?php phpinfo(); ?>
Далее откройте файл в браузере и убедитесь, что всё работает:
Шаг 2: Создание ssh-туннеля
Для обеспечения совместной работы xDebug и используемой IDE, необходимо создать "туннель" к серверу с локального компьютера.
Вначале необходимо сгенерировать пару ключей ssh в папке .ssh/ на локальной машине:
ssh-keygen -t rsa
Затем копируете содержимое файла id_rsa.pub (локальная машина) и, создав новый файл authorized_keys на сервере в директории /home/hostXXXXXXX/.ssh/ через файловый менеджер панели управления, сохраняете в нём данное содержимое.
После чего можно создать ssh-тунель командой на Linux и OS X:
ssh -R 8015:localhost:8015 hostXXXXXXX@servXX.hostland.ru -p1024
Для работы потребуется программа PuTTY - её можно скачать с официального сайта
После того как Вы её скачаете, из архива распакуйте папку PuTTY Portable, будем работать с ней. В папке PuTTY Portable найдите файл puttygen.exe и запустите его.
Тип ключа для генерации выберите SSH-2 RSA,
Длина генерируемого ключа(в битах) - 2048
Жмём Сгенерировать. Хаотично перемещайте курсор мыши внутри окна программы. Введите желаемый комментарий к созданным ключам, чтобы Вам было удобнее различать созданные ключевые пары в будущем.
Сохраните открытый и личный (закрытый) ключ, не перепутайте ключи в будущем. (Рекомендуем открытым ключам давать расширение .pub, а закрытым .ppk)
Не закрывая окно программы генерации ключей, скопируйте открытый ключ и, создав новый файл authorized_keys на сервере в директории /home/hostXXXXXXX/.ssh/ через файловый менеджер панели управления, сохраните в нём содержимое открытого ключа.
Перейдя во вкладку Connection → SSH → Auth → Credintials, в верхнем поле выберите созданный на прошлом шаге приватный ключ, как на скриншоте ниже:
Для настройки туннеля нужно указать имя сервера либо его IP (вкладка Session). Порт по умолчанию изменяем на 1024, протокол оставляем SSH и нажимаем Save:
Во вкладке Connection → Data вводим ваш логин (имя аккаунта hostXXXXXXX):
После этого нужно открыть вкладку Connection → SSH → Tunnels и настроить так, как указано на скриншоте:
Возвращаемся в раздел Session, нажимаем кнопку Open и на запрос Putty о корректности ключей (только при первом подключении), нужно ответить Да (Yes). Для дальнейшего использования настроек, просто открывайте Putty в меню сохраненных сессий и, выбрав нужную, нажимаете Load и наконец Open
Шаг 3: Настройка IDE
IDE PHPStorm можно скачать с официального сайта.
Для начала, создайте новую пустую папку и откройте её в редакторе. Далее, заходим в настройки: File → Settings
IDE VSCode можно скачать с официального сайта.
Нам понадобится скачать 2 расширения. Это можно сделать прямо из приложения:
Далее, создаём пустую папку в любой удобной для Вас директории на локальной машине и открываем её в VSCode через верхнее меню: Файл → Открыть папку
Добавим в нее подпапку .vscode и создадим в ней новый файл settings.json, в котором пропишем настройки для расширения sync-rsync:
{ "folders": [ { "path": "/home/путь/до/локальной/папки" } ], "sync-rsync.onSaveIndividual": true, "sync-rsync.executableShell": "/bin/bash", "sync-rsync.shell": "ssh -p 1024 -i /home/user/.ssh/id_rsa", "sync-rsync.delete": true, "sync-rsync.sites": [ { "localPath": "/home/путь/до/локальной/папки", "remotePath": "hostXXXXXXX@mysqlXX.hostland.ru:/home/hostXXXXXXX/domain_name.ru/htdocs/www/" } ] }
/home/user/.ssh/id_rsa - это путь до сгенерированного на втором шаге закрытого ключа на локальной машине.
Сохраните файл, затем нажмите F1, введите в поисковую строку sync и выберите из выпадающего списка пункт Sync Remote to Local - это действие автоматически скопирует файлы с сервера в Вашу локальную папку:
После этого нажмите на значок отладки (1) и на иконку с маленькой шестеренкой (2):
В папке .vscode автоматически создастся файл launch.json, в которм нужно исправить и дописать следующее:
{ "version": "0.2.0", "configurations": [ { "name": "Listen for XDebug", "type": "php", "request": "launch", "port": 8015, "pathMappings": { "/home/hostXXXXXXX/domain_name.ru/htdocs/www": "${workspaceRoot}/" } }, { "name": "Launch currently open script", "type": "php", "request": "launch", "program": "${file}", "cwd": "${fileDirname}", "port": 8015 } ] }
Настройка VSCode завершена.
Приложение настроено. Переходим к последнему шагу - тестирование.
Шаг 4: Start Debugging
Для просмотра файлов Вашего домена выбираем в верхнем меню Tools → Deployment → Browse Remote Host
Найдём ранее созданный файл myFile.php и скачаем его к себе в локальную папку, нажав на файл правой кнопкой мыши и выбрав пункт Download from here
Открыв файл из локальной папки, дополним его содержимое следующим кодом (phpinfo() можно удалить):
$arr = array(1, 2, 3, 4, 5, 6); foreach ($arr as &$value) { $value = $value * 3; echo $value.'
'; }
Сохранив файл загрузим его обратно на сервер в уже изменённом виде: нажмите правой кнопкой на файл и выберите пункт
Проверим, что содержимое изменилось, открыв сайт в браузере http://domain_name/myFile.php. Вы должны увидеть следующее:
3 6 9 12 15 18
Далее, убедившись, что ssh-тунель всё ещё открыт, ставим точку останова рядом со строкой "foreach ($arr as &$value) {" и нажимаем значок вверху справа для "прослушивания соединения" (Start Listening for PHP Debug Connections), перезагружаем страницу сайта.
Если всё было сделано правильно, Вы должны увидеть следующее:
Заменим содержимое файла myFile.php на следующее:
<?php $arr = array(1, 2, 3, 4, 5, 6); foreach ($arr as &$value) { $value = $value * 3; echo $value.'
'; } ?>
Загрузим изменённый файл на сервер: нажмите F1 и введите в строке команду Sync-Rsync: Sync Local to Remote
Откроем файл в браузере на сервере и перед тем, как начать debug, ещё раз убедимся, что ssh-тунель между машинами открыт.
После этого в VScode расставим точки останова, просто нажав слева от тех строк, которые Вам необходимы. Ещё раз выберем режим Отладка, убедимся, что выделен пункт Listen for XDebug и нажмём значок зелёного треугольника, либо кнопку F5 на клавиатуре.
Перезагрузив сайт в браузере, вернёмся в VSCode. Если всё было сделано верно, Вы должны увидеть глобальные переменные, их значения, а также иметь возможность перемещаться по коду и смотреть, как меняются значения переменных на каждом шаге:
Визуализация логов профайлера c помощью WebGrind
WebGrind это графический интерфейс для анализа и просмотра файлов трассировки Xdebug. Другими словами, это набор php скриптов, которые можно установить на сервер и использовать для удобного вывода статистики прямо в Вашем браузере. Можно просматривать список функций которые вызывались, количество вызовов (Invocation Count), общее время потраченное на вызов (Total Self Cost) и общее время потраченное на выполнение (Total Inclusive Cost).
Для начала работы с WebGrind скачайте его с официальной страницы на Github по ссылке, распакуйте архив в панели управления через файловый менеджер в корне Вашего сайта /home/hostXXXXXXX/domain-name/htdocs/www/ и добавьте в php.ini две дополнительных директивы:
xdebug.profiler_output_dir - это путь до папки, где Вы хотите хранить лог-файлы (предварительно её нужно создать).
Далее, зайдите в распакованную папку webgrind-master и отредактируйте файл config.php
static $storageDir = '/home/hostXXXXXXX/domain-name/путь_до_папки_с_логами/'; static $profilerDir = '/home/hostXXXXXXX/domain-name/путь_до_папки_с_логами/';
Теперь запустите любой php-скрипт в браузере и перейдите по ссылке www.domain-name/webgrind-master. Выберите из выпадающего списка запущенный только что скрипт и нажмите update. Вы увидите примерно следующее:
Можно скрыть php функции или перейти внутрь функций, чтобы увидеть развернутую статистику, а также посмотреть графы вызова функций, нажав на
По окончании отладки приложения и запуска проекта "в бой" не забудьте отключить отладку скриптов, ввиду того, что отладчик может существенно замедлять работу Вашего сайта.
Удачной работы! Если возникнут вопросы - напишите нам, пожалуйста, тикет из панели управления хостингом, раздел «Помощь и поддержка».