Установка Xdebug, часть 2: IDE
Теперь, когда Xdebug установлен вместе с вашей локальной установкой PHP, пришло время подключить его к IDE. Это дает нам все преимущества, которые может предложить Xdebug.
То есть это позволяет нам:
- установить точки останова,
- пройти через наш код,
- и смотреть переменные
Все это время программа выполняется. Это означает, что пока страница отображается, мы можем установить точки в нашей кодовой базе, где мы можем видеть, что сервер делает с нашим кодом.
Так что, конечно, несмотря на то, что удаление ошибок называется отладкой, это также может дать представление о том, как выполняется приложение, тема или плагин на основе WordPress, и может помочь нам лучше понять ядро WordPress.
Установка Xdebug в Visual Studio Code
На этом этапе у вас должна быть настроена следующая среда на вашем локальном компьютере:
- Valet (который включает Nginx и MySQL и связанные с ними инструменты )
- Вордпресс
- Код Visual Studio
- Xdebug
Остальные задачи для всего вышеперечисленного включают привязку Xdebug к коду Visual Studio, чтобы мы получили буквальное представление о том, как работает WordPress (и, следовательно, о нашей работе), что он делает и так далее, когда он работает в браузере.
С учетом сказанного, давайте начнем.
1 Установка необходимых расширений
Во-первых, давайте удостоверимся, что в Visual Studio Code установлено расширение отладки PHP. В меню «Расширения» на боковой панели IDE найдите PHP Debug, и вы должны увидеть экран, подобный следующему.
Если расширение еще не установлено, установите его. Вам может потребоваться перезапустить Visual Studio Code, чтобы новое расширение вступило в силу.
Отсюда есть несколько дополнительных параметров конфигурации, которые нам необходимо проверить, прежде чем пытаться отлаживать какой-либо код.
2 Настройка Xdebug (даже больше!)
Как вы помните из предыдущего поста, нам нужно было включить Xdebug в наш файл php.ini. В частности, нам пришлось добавить следующую строку кода, чтобы включить Xdebug:
zend_extension="/usr/local/lib/php/pecl/20160303/xdebug.so"Теперь нам нужно проделать еще немного работы.
- нам нужно будет добавить строку конфигурации в файл php.ini, упомянутый в последнем посте ,
- нам нужно настроить демонстрационный скрипт, чтобы убедиться, что есть правильный раздел Xdebug,
- нам нужно настроить Visual Studio Code
К счастью, все вышеперечисленное — относительно быстрые задачи. Во-первых, строка конфигурации, которую вы хотите добавить в свой файл , выглядит следующим образом:
[XDebug]
xdebug.remote_enable = 1
xdebug.remote_autostart = 1Затем настройте демо-скрипт и подключите его к Valet. Вы можете сделать это легко, создав каталог на рабочем столе, создав что-то вроде test.php, а затем добавив phpinfo(); в файл.
После этого свяжите каталог и перезапустите Valet. Я случайно назвал свой каталог example и поместил в него файл test.php .
Если все настроено правильно, вы сможете загрузить файл в свой браузер и увидеть что-то вроде следующего:
Теперь нам нужно настроить Xdebug. Итак, если все вышеперечисленное выполнено правильно, а расширения правильно установлены и работают, работа с Visual Studio Code должна быть легкой.
Естественно, нам понадобится демо-скрипт, который мы сможем протестировать, поэтому я написал кое-что тривиальное, но оно даст вам представление о том, чего ожидать при установке точек останова, а чего нет.
<?php
// First, set a sample name.
$exampleName = 'alice';
echo $exampleName;
// Next, change the name and display it.
if ('alice' === $exampleName) {
$exampleName = 'bob';
}
echo $exampleName;
Теперь обратимся к IDE. В Visual Studio Code щелкните значок «Отладка », который находится чуть выше значка «Расширения» и чуть ниже значка системы управления версиями.
На боковой панели в самом верху вы увидите кнопку воспроизведения. Рядом с ним находится выпадающий список. Он может читаться как «Нет конфигурации». Если это так, а я предполагаю, что это так, есть несколько очень конкретных шагов, которые вам нужно будет выполнить, чтобы убедиться, что отладка работает правильно.
1 Откройте каталог сценария
Вам нужно будет убедиться, что вы находитесь в каталоге сценария в Visual Studio Code.
То есть недостаточно убедиться, что у вас просто открыт файл. Код Visual Studio должен знать, из какого каталога вы работаете (поскольку он создает скрытый каталог .vscode в родительском каталоге).
2 Создайте конфигурацию запуска
Конфигурация запуска по умолчанию должна работать «из коробки», но она основана на предыдущем шаге.
После того, как вы открыли каталог (в моем случае тот, который содержит test.php) в Visual Studio Code, запустите палитру команд (вы можете сделать это с помощью ярлыка, который зависит от ОС, или с помощью меню «Справка» и затем выберите командную палитру).
Когда он появится, введите > launch.json, и вам будет предложено просмотреть файл launch.json. Из коробки это должно выглядеть так :
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Listen for XDebug",
"type": "php",
"request": "launch",
"port": 9000
},
{
"name": "Launch currently open script",
"type": "php",
"request": "launch",
"program": "${file}",
"cwd": "${fileDirname}",
"port": 9000
}
]
}На этом этапе в меню «Отладка» рядом со значком воспроизведения должно быть что-то вроде «Запустить текущий открытый сценарий». Если это не так, то вам будет предложено выбрать что-то вроде PHP (поскольку у нас установлено расширение).
Если это так, выберите этот вариант.
3 Установите несколько точек останова
Теперь пришло время увидеть отладчик в действии. На этом этапе запустите окно браузера с вашим тестовым скриптом.
Мой простой:
После этого перейдите в свою среду IDE, а затем щелкните на левой панели слева от номера строки. Это установит некоторые точки останова.
Вот пример:
Теперь нажмите кнопку Play для отладчика. Сразу же вы должны заметить, что строка состояния стала оранжевой, а некоторые элементы управления отладкой (для «Продолжить», «Вступить», «Выйти», «Перезапустить» и «Остановить»). На данный момент они нам не интересны, так как мы более подробно рассмотрим их в следующем посте.
Обратите также внимание на то, что на левой панели есть некоторая информация о переменных, наблюдениях и т. д. Если вы установили точки останова для своих локальных переменных, вы заметите, что $exampleName выделено, но, вероятно, не инициализировано.
Нажмите кнопку «Воспроизвести» в появившихся новых элементах управления, и она должна перейти к следующей точке останова.
Теперь строка будет выделена, и на панели отладки $exampleName будет присвоено значение. В моем случае это Алиса.
Вы можете продолжать экспериментировать с этим столько, сколько захотите, чтобы понять, как работает отладчик.
В следующий раз, скринкасты
Отладка — это мощное средство, но во многих отношениях оно может быть пугающим. Начиная со следующего поста, я начну делиться несколькими скринкастами, в которых показано, как:
- отладочные функции и переменные,
- менять значения на лету,
- работа с консолью отладки,
- и более.
Это займет немного больше времени, потому что это будут видеоролики с описанием того, как это сделать, но польза должна быть большой.
Если у вас еще не было возможности ознакомиться со всем содержанием этой серии, я настоятельно рекомендую ее.
📣 Примечание для привилегий участников
Обратите внимание, однако, что перед следующей публикацией о скринкастах и следующем выпуске этой серии я хочу сделать несколько объявлений специально для участников сайта, которые включают скидки на программное обеспечение на основе WordPress.
Я расскажу больше об этом на следующей неделе.