Чат веб-разработчиков
Отладка PHP-кода с помощью Xdebug в PHPStorm 2017

Отладка PHP-кода с помощью Xdebug в PHPStorm

Отладка программы – это процесс, в ходе которого обнаруживают и устраняют баги. Для этого нам нужно знать, например, значения переменных на каждом шаге выполнения программы, или смотреть выполнилось ли условие, или даже погружаться в работу рекурсивных функций.

Собственно, так как многим рекурсия показалась сложной, то я решил сделать урок по отладке кода на PHP. В этой статье мы рассмотрим настройку отладки с помощью PHP-расширения Xdebug, а производить отладку мы будем в уже известной нам IDE PHPStorm.

Настройка отладки PHP в OpenServer

Первым делом давайте включим расширение Xdebug в файле конфигурации PHP (php.ini). Для этого идём в меню OpenServer -> Дополнительно -> Конфигурация -> PHP.

Конфигурация PHP в OpenServer

Здесь нам нужно найти секцию [Xdebug]. Как правило, она находится в конце этого файла.
Здесь нам нужно раскомментировать (или просто добавить) строки:

Код доступен только после покупки курса PHP для начинающих.

Должно получиться так:
Включение Xdebug в php.ini

После чего нужно сохранить файл (CTRL + S) и перезапустить веб-сервер.
Перезапуск OpenServer

На этом настройка веб-сервера для отладки завершена.

Настройка отладки в PHPStorm

Теперь нам нужно настроить отладку в PHPStorm. Первым делом идём в настройки:
File -> Settings

Здесь в левом меню выбираем:
Languages & Frameworks -> PHP -> Debug

Прокручиваем правую часть до секции Xdebug, и задаём следующие настройки:

  • Debug port: 9000
  • Force break at first line when no path mapping specified: выключено
  • Force break at first line when a script is outside the project: выключено

Настройки отладки в PHPStorm

Сохраняем изменения, нажав на “OK”.

Теперь в верхней правой части программы жмём на такую выпадающую менюшку:
Выпадающее меню с конфигурацией для отладки

И жмём “Edit Configuration”.

В появившемся окне в левом верхнем углу жмём на плюсик и выбираем “PHP Remote Debug”.
PHP Remote Debug

Задаём настройки:

  • Name: XDebug

И нажимаем справа от пункта “Servers” на три точки:
Servers for debug

В появившемся окне снова жмём на плюсик, и у нас в списке появляется новый сервер. Давайте зададим для него следующие настройки:

  • Name: localhost
  • Host: localhost
  • Port: 80
  • Debugger: Xdebug

Сервер для отладки

Сохраняем нажатием на “OK” и завершаем заполнять ранее открытую настройку. А именно:

  • Ide key (session id): PHPSTORM

И убеждаемся, что в “Servers” указан только что созданный нами “localhost”.
Конфигурация для отладки в PHPStorm

Сохраняем, нажав “OK”. На этом конфигурация PHPStorm для отладки PHP-приложений с помощью Xdebug завершена.

Настройка отладки в браузере Google Chrome

Дело осталось за малым – нужно только установить расширение для Chrome под названием Xdebug helper.

Заходим в Chrome и переходим по адресу: Xdebug helper

Напротив расширения Xdebug helper жмём кнопку “Установить”.

После того, как расширение установлено в верхнем правом углу Chrome появится значок жучка. Жмём по нему правой кнопкой мыши и нажимаем “Параметры”.
Меню Xdebug helper

Здесь в пункте IDE key в выпадающем меню выбираем PhpStorm.

Параметры Xdebug helper

И нажимаем “Save”.

На этом предварительная настройка завершена.

Начинаем отлаживать

Итак, все настройки выполнены и дело осталось за малым – начать пользоваться отладчиком.

Давайте в нашем index.php запишем следующий код:

Код доступен только после покупки курса PHP для начинающих.

А затем слева от строки $x *= 2; кликнем по пространству между номером строки и самим кодом – появится красная точка.

Breakpoint в PHPStorm

Это брэйкпоинт (breakpoint), или, как её ещё называют – точка останова. К ней мы вернёмся чуть позже.

Теперь давайте включим отладчик – в правом верхнем углу PHPStorm, там где раньше была пустая выпадашка, а теперь выбран пункт “XDebug”, жмём на значок жучка.

Запуск отладки в PHPStorm

Отладка на уровне PHPStorm запущена.

Теперь возвращаемся в Chrome, заходим на адрес нашего проекта (в моём случае http://myproject.loc/) и после того как зашли(!!!) жмём на значок жучка (уже в Chrome) и выбираем пункт “Debug”.

Включение отладки в Google Chrome

После чего значок станет зелёным.

Теперь можно в Chrome обновить страницу, и увидеть, что она повисла в режиме загрузки.
Ожидание загрузки страницы

А в окне PHPStorm увидеть следующее:
Сработала точка останова в PHPStorm

Наша программа остановила своё выполнение в месте брэйкпоинта.

Внизу программы (во вкладке Variables) мы можем видеть значения всех переменных в данный момент. Как видим, сейчас (до выполнения строки 5) $x равна 7.

Давайте нажмём кнопку “F8”. Она осуществляет выполнение кода на текущей строке и останавливается перед следующим действием.
Переход на следующий шаг

Умножили $x на 2, и как видим, её значение стало равно 14. Вот так с помощью отладки мы можем отслеживать значения переменных в какой-то определенный момент работы программы.

Помимо этого, есть, разумеется, и другие сочетания клавиш, которые используются во время отладки.

Давайте прямо сейчас нажмём F9. Это приведет к тому, что программа продолжит выполнение до следующего брэйкпоинта (да, их можно наставить сколько угодно). Если их больше не встретится (как в нашем примере), то программа просто завершит свою работу.

Давайте поиграемся с кодом посложнее:

Код доступен только после покупки курса PHP для начинающих.

И установим два брэйкпоинта на строках 5 и 10.
Два брэйкпоинта

После чего обновим нашу страничку в браузере и попадём в первый брэйкпоинт на строке 10:
Попали в первый брэйкпоинт

Здесь мы видим значения переменных $x и $y внутри функции. Нажмём F9 и программа выполнится до того момента, пока не дойдёт до следующего брэйкпоинта.
Попали на следующий брэйкпоинт

Здесь мы уже видим, что внутри функции доступны переменные $x и $y. Но это уже другие переменные, не те, что были переданы в функцию getSumOfCos(). Вот мы и увидели локальную область видимости в действии.

Помимо этого, в левом нижнем углу есть окошечко “Frames”, это так назваемый “стек вызовов”. Здесь мы можем переключаться на места, откуда был вызван наш код ранее. Так мы можем переключиться в то место, где была вызвана функция getSum().
Стек вызовов

И можем посмотреть переменные, которые были доступны в той области видимости (уровнем выше).

Ещё в правом нижнем углу можно увидеть окошечко “Watches”. Это такое место, где можно задать переменные или даже выражения, значения для которых вы хотели бы видеть всегда под рукой. Добавляются они туда с помощью плюсика. В появившемся окошечке вводим выражение, которое мы бы хотели отслеживать. Пусть это будет $x/2.
Watches при отладке

Отлично, осталось рассмотреть ещё одну клавишу и вы готовы к бою – F7. Она позволяет зайти “внутрь” какой-либо конструкции.

Давайте закончим отладку нажатием F9. Поставим теперь только один брэйкпоинт на строке номер 15 и обновим страничку в браузере.
Один брэйкпоинт

Если сейчас нажать F8, то программа закончит своё выполнение, и мы не попадём внутрь функций. Так происходит потому что во время отладки мы работаем на определённых уровнях вложенности, и если нам нужно будет попасть внутрь функции, то нужно будет нажать F7, находясь на строке 15. После этого мы окажемся на строке 10. Если сейчас нажать F8, попадём на строку 11. Ещё раз – на строку 12. Если мы сейчас, находясь на 12 строке нажмем F7, то попадём внутрь функции getSum() на строку 5. А если бы мы нажали F8, то мы просто поднялись бы на уровень выше, в то место, где была вызвана функция getSumOfCos().

В принципе, большего для отладки вам не потребуется (лично мне этого хватает).

Ну а сейчас пришла пора поотлаживать рекурсивные функции. Коль уж у вас возникли проблемы с прошлой домашкой – давайте их решать =)

Давайте возьмем и поковыряем код из предыдущей домашки:

Код доступен только после покупки курса PHP для начинающих.

Поставим брэйкпоинт на 3 строке и запустим программу.
Отладка рекурсивной функции

Итак, в функцию попала переменная $x = 3. Нажимаем F8, и попадаем на строку 7, так как условие не выполнилось. Теперь нажмём F7 и снова попадём в начало нашей функции, но теперь $x = 2. И при этом стек вызовов увеличился ещё на одну строку, то есть мы вошли в ещё один уровень вложенности.
Уровень вложенности возрос

Жмём F8 и снова оказываемся на строке 7. Нажимаем F7 и снова попадаем в новый вызов функции, только уже $x = 1, а в стэке вызовов появился ещё один уровень.
И ещё один уровень вложенности

Снова F8 и затем F7. И вот уже в функции $x = 0.
Жмём F8 и оказываемся на строке 4 (теперь условие выполнилось). На этой строке программа выведет 0.
Пошёл вывод

Жмём F8 и попадаем на строку 5. Сейчас функция завершит свою работу и мы попадём на уровень выше, в то место, где она была вызвана. Итак, жмём F8.

Вуаля, мы вернулись на уровень выше, там, где переменная $x = 1.
Вернулись на уровень выше

И попали мы на следующую строку, после той в которой вызвали функцию numbers(1 - 1). И на этой строке мы вывели уже число 1. А дальше – жмите F8 и наблюдайте за ходом выполнения программы. Надеюсь теперь рекурсия для вас понятна =)

Читайте также
Комментарии


ulole
ulole

Было бы интересно еще посмотреть байт-код php в шторме.

trialex3
trialex3

У меня в проге после настройки пишет Waiting for incoming connection with ide key 'PHPSTORM'.
Как можно исправить?
UPD. Нашел в интернете решение.

ivashkevich
ivashkevich

Это разве нужно исправлять? Всё же вроде правильно.

Maxim
Maxim

О, а помогите мне тоже найти. Сам не справился.

Tays
Tays

Здравствуйте
У меня XAMPP и NetBeans. Как настроить Xdebug?

ivashkevich
ivashkevich

А почему не PHPStorm и OpenServer, как я советовал?
Если принимаете решение использовать другие инструменты, значит вы должны понимать, ради чего это делаете. И беретесь самостоятельно разбираться как это делать по-другому. Мне лень, да и незачем копаться в том, с чем я не работаю. Это бы заняло очень много времени и не принесло пользы. Так что, придется вам погуглить самому =)

jetsaus
jetsaus

В каталоге установки XAMPP ищешь файл php\php.ini и правишь его в соответствии с уроком. Перезапусаешь apache.В NetBeans не знаю, но думаю тоже не сложно, пользую Шторм.

Tays
Tays

У меня уже была установлена эта сборка. Буду гуглить дальше.

serb2017
serb2017

По теме урока всё установилось и работает нормально. За исключением F8 и F9.
F9 вызывает меню Пуск,
F8 вызывает меню для подключения к проектору.
F7 работает адекватно.
Управлять можно без клавиш, иконками в PHPStotm.
Пока не разобрался как устранить проблему. В Windous 7 + SP1 (в моём случае) эти клавиши выдают аналогичный описанному результат.

ivashkevich
ivashkevich

Значит у вас в BIOS выставлена настройка горячих клавиш. У вас есть на клавиатуре кнопка Fn? Как правило она слева внизу.

serb2017
serb2017

С помощью отладчика наконец разобрался с рекурсивной функцией(РФ).
1.При самовызове РФ N раз, создаётся стек с N уровнями.
2.Возвращение РФ (в место первого вызова)происходит за N шагов по стеку в обратном порядке.
3."Сколько шагов вперёд, столько шагов назад"
Для иллюстрации:

<?php
function natural(int $n)
{

    if ($n == 0) {
        echo '<br>';
        return;
    }
    $n--;
    echo '<br> создание уровня стека  ' . $n;
    natural($n);
    echo '<br>' . 'возврат из уровня стека  ', $n, '  на предыдущий';
}

$n = 3;
natural($n);

На экране:
создание уровня стека 2
создание уровня стека 1
создание уровня стека 0

возврат из уровня стека 0 на предыдущий
возврат из уровня стека 1 на предыдущий
возврат из уровня стека 2 на предыдущий

ivashkevich
ivashkevich

Мои поздравления =)

Andreo
Andreo

Рекурсивная функция мне напомнила сюжет фильма "Начало". Все как там...

ivashkevich
ivashkevich

:D не смотрел, кстати. Надо будет глянуть на выходных.

ArtemijeKA
ArtemijeKA

Согласен, мне тоже...

Lungren
Lungren

Установил chrome и расширение, но жучка на консоли браузера не вижу!

Lungren
Lungren

А, вижу, но он в яндексовском браузере...

ivashkevich
ivashkevich

Кек, то есть установили в хромовском сторе, а появился он в Яндекс.Браузере?

Lungren
Lungren

Кекаете?

Lungren
Lungren

В чём дело?!

Lungren
Lungren

Да, и модификация PHPstorm уже другая...

ivashkevich
ivashkevich

Что такое модификация? Версия?

Lungren
Lungren

Да

ivashkevich
ivashkevich

В плане отладки там всё то же самое. Разве нет? Я вот только вчера себе поставил, и никаких изменений не заметил.

Lungren
Lungren

Согласен вполне

ivashkevich
ivashkevich

Ок. Кстати, на комментарии лучше отвечать, нажимая на "Ответить" под конкретным комментом.

Lungren
Lungren

Какая у Вас версия Сторма?

1nSide
1nSide

Сделал все как в видео уроке но после того как обновляю страничку в браузере с включенным дебагером ничего в пхп шторме не происходит, дебагер ничего не пишет

ivashkevich
ivashkevich

Напиши в ВК, что-то всё равно не так :)

grishandze
grishandze

Здравствуйте. Сделал все по инструкции, но XDebug не работает.
Во вкладке "Frames" пишет: "Frames are not aviable",
В "Variables": "Waiting for incoming connection with ide key 'PHPSTORM'".
Ничего дальше не происходит. Не могу решить. Помогите пожалуйста. Заранее спасибо.

З.Ы. Вместо Open Server использую WampServer, но я так понял, что отличаются они друг от друга мало.

ivashkevich
ivashkevich

Отличаются, скорее всего там вообще нет XDebug. Прошу меня понять и простить, но у меня нет времени разбираться со всеми серверами на свете, если хотите чтобы работало - сделайте как в уроке, пожалуйста :)

grishandze
grishandze

Разобрался. Огромное спасибо за ваши курсы. Все максимально доходчиво объяснено :)

mik05bk@gmail.com
mik05bk@gmail.com

А почему после первого выполнения 7 строки кода, сразу не выполняется 8?

ivashkevich
ivashkevich

Потому что снова начинает выполняться функция numbers(), а на первой её строке стоит breakpoint, и отладчик на нём останавливается.

nemo.dont@gmail.com
nemo.dont@gmail.com

по ходу я совсем тупая ) все настроила, все работает, но происходящий процесс ничего не прояснил. я вижу, что переменная меняется, становясь меньше на 1. но сложить это хоть в какой-то понятный пошаговый процесс в своей голове я не могу. т.е. я не могу представить как работает код, что там происходит на его задворках. и возникает вопрос, стоит ли мне продолжать или я безнадежна?

ivashkevich
ivashkevich

Паниковать не стоит, рекурсия не всем даётся с первого раза. Можете пока вообще её пропустить - это не помешает дальнейшему прохождению курса. Но я бы советовал Вам с ней всё же разобраться - погуглите другие уроки на тему рекурсии, возможно найдёте какое-нибудь более наглядное пособие. Но, опять же, повторюсь - не обязательно. Не поймёте - чёрт с ней, проходите дальше ;)

RusTaylor
RusTaylor

У меня в консоли пишет следующее:
Waiting for incoming connection with ide key 'PHPSTORM'
Сделал так же как и написано.

ivashkevich
ivashkevich

Это хорошо, значит отладчик ждёт входящего соединения. Посмотрите видео ещё (в начале урока) - там вообще всё как есть показано.

RusTaylor
RusTaylor

Спасибо, всё работает)
Спасибо за уроки)

ivashkevich
ivashkevich

Отлично! Всегда рад помочь =)

AxLT
AxLT

Есть проблема по запуску XDebug. Настроил все верно (перепроверял). но при перезагрузке странице в браузере она не подвисает в загрузке, а просто выдает конечный результат как и до установки брейкпойнта. в PHPStorm вижу следующее:
описание картинки

ivashkevich
ivashkevich

Все норм, он ждет соединения. Настраивайте плагин в хроме и перезагружайте страницу. Все как на видео сделайте.

AxLT
AxLT

Да, уже заработало, спасибо

ArtemijeKA
ArtemijeKA

У меня linux ubuntu и сервер xampp(lampp) и PhpStorm.
Может у кого такая-же конфигурация будет полезна
инструкция по установке xdebug на PhpStorm + ubuntu + lampp.

Инструкция:

1. Перейти:
 https://xdebug.org/wizard.php
2. В свой index.php на локальном домене вставить:
 phpinfo(); 
 (Не чего кроме phpinfo(); в файле не должно быть прописано!)
3. ctrl+u копируем код страницы.
 И вставляем в окошко на странице https://xdebug.org/wizard.php 
 и нажимаем кнопку снизу.
4. Инструкция которую выдала страница: https://xdebug.org/wizard.php
 (просто вставка кода который подсвечен, он может быть уникален у вас в некоторых местах)
5. Кроме последней строчки в инструкции
 (примерно такого вида zend_extension = /opt/lampp/lib/php/extensions/no-debug-non-zts-20170718/xdebug.so) 
 нужно еще добавить за ней же:
 xdebug.remote_enable = 1
 xdebug.remote_port = 9000
 xdebug.remote_handler = "dbgp"
 xdebug.remote_connect_back = 1
 xdebug.idekey = "PHPSTORM"
6. Как настроить PhpStrom и Chrome здесь: https://webshake.ru/php-training-course/11
7. Перезапустить lampp.
ArtemijeKA
ArtemijeKA

Спасибо огромное какой материал качественный!
Кажется теперь я ее понял:
Сначала идет проработка вызова функции в самой себе.
А только потом проработка всех выводов echo $arg, все равно какая-то пелена, что за правила отработки echo и функции внутри функции? Почему echo потом отрабатывает в обратном порядке ведь числа поступали в порядке 3 2 1 0, а он их после отработки выводит 0 1 2 3, интересно.

function numberBy0ToArg_v2($arg)
{
    if ($arg >= 0) {
        $arg - numberBy0ToArg_v2($arg - 1) . '<br />'; 
        echo $arg; 
    }
}
numberBy0ToArg_v2(3);
ivashkevich
ivashkevich

Ответил в комментах к прошлому уроку

Roman31
Roman31

В настройках PHPStorm не получается создать сервер (кликаю на три точки - ничего не происходит). В чем тут может быть дело?

ivashkevich
ivashkevich

Напиши в личку в ВК или Телеге

jetsaus
jetsaus

Пасиб автору!
Классный и ёмкий урок для новичков.

ivashkevich
ivashkevich

На здоровье)