Тази публикация обхваща отстраняване на грешки в WordPress, използвайки Xdebug и VS Code. Този подход към отстраняването на грешки е много по-добър от записването на променливи в логовете за грешки или отпечатването им на екрана.
Настройката на нещата правилно може да бъде сложна. Точно тук помага този урок.
Xdebug
Xdebug е мощен инструмент за отстраняване на грешки в PHP приложенията.
За редактор на кода в този урок използваме VS Code, както и някои други инструменти, които съм изброил по-долу. Всичко, което е включено тук, е в текущата версия, а номерата на версиите се отбелязват, ако може да бъде от полза, тъй като нещата се променят.
Изисквания
- LAMP сървър стек на Ubuntu 22.04: Локална среда за разработка на WordPress
- PHP Version 8.1.2
- VS Code v1.87.0: Редактор на код
- PHP Debug от Xdebug за VS Code v1.34.0: Разширение за VS Code, което позволява на VS Code да комуникира с Xdebug
- Xdebug Helper разширение за браузър: Използва се за изрично включване или изключване на сесиите за отстраняване на грешки
Аз използвам Linux на Windows с WSL, защото това ме прави щастлив, но това ръководство важи и за други среди.
Създайте сайт лоакално
След като всички предпоставки са инсталирани и активирани, ще трябва да създадете нов уебсайт на WordPress, ако вече нямате такъв.
Аз ще използвам за целите на демонстрация, локалната ни инсталация на този блог.
Настройте директивите в php.ini или xdebug.ini
Сега, след като сайтът е създаден, нека проверим настройките на конфигурационните директиви за Xdebug в php.ini или xdebug.ini файла в зависимост какъв локален сървър за разработка използваме.
За мен пътят е /etc/php/8.1/mods-available/xdebug.ini. Отворете файла и потвърдете, че имате зададени директивите по-долу. Ако трябва да направите някакви промени, уверете се, че сте рестартирали вашия локален сървър след това.
xdebug.mode=debug
xdebug.client_port="9003"
xdebug.discover_client_host=yesУверете се, че Xdebug работи
За да се уверите, че Xdebug работи, създайте файл с име info.php в основната директория на вашия сайт или localhost локация и добавете следния код в него:
<?php
// Output information about PHP's configuration.
phpinfo();
Сега заредете https://localhost/info.php и се уверете, че Xdebug работи. Намерете раздела за Xdebug; той ще изглежда нещо като това:
Ако не виждате това, тогава Xdebug не работи. Проверете отново файловете за конфигурация на PHP, за да се уверите, че Xdebug е активиран.
Една от интересните функции, които се предоставят като част от Xdebug версия 3, е добавянето на функцията xdebug_info(). Тази функция е подобна на функцията phpinfo(), но предоставя по-подробна диагностика за настройката на Xdebug.
За да я използвате, просто добавете файл в основната директория на вашия сайт или localhost локация. Например, xdebug-info.php, след което добавете следното съдържание:
<?php
xdebug_info();Заредете файла във вашия браузър и ще видите нещо подобно на това:
Активиране на Xdebug Helper разширение за браузър
След като сте инсталирали и активирали разширението Xdebug Helper за предпочитания от вас браузър, уверете се, че отстраняването на грешки е активирано, като кликнете върху иконата и изберете Отстраняване на грешки (Debug). Малката икона на гъсеницата ще стане зелена, което ви уведомява, че разширението на браузъра ще зададе подходящия флаг за активиране на отстраняването на грешки.
Инсталирайте и активирайте разширението за отстраняване на грешки в PHP за VS Code
Разширението за отстраняване на грешки в PHP за VS Code (PHP Debug) помага да се съберат всички неща заедно. Намерете разширението в търсачката за разширения на VS Code и го активирайте. Уверете се, че сте избрали това, публикувано от екипа на Xdebug, тъй като има няколко разширения със същото име.
Създайте файл launch.json за вашето работно пространство
Следващата стъпка е да създадем файл launch.json за нашето работно пространство. Щракнете върху иконата за отстраняване на грешки на VS Code, за да отворите панела за отстраняване на грешки, след което щракнете върху връзката create a launch.json file.
Сега изберете името на инструмента за отстраняване на грешки да бъде PHP.
VS Code ще попълни файла launch.json с настройки по подразбиране, но ние ще ги заменим.
Продължете напред и изтрийте цялото съдържание на стандартния launch.json, заменете го с настройките по-долу и запазете файла.
Файлът launch.json ще се съхранява в {local-site-name}/.vscode/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": 9003,
"log": false,
"maxConnections": 1, // @see https://github.com/xdebug/vscode-php-debug/issues/604
"xdebugSettings": {
"resolved_breakpoints": "0", // @see https://github.com/xdebug/vscode-php-debug/issues/629 and https://stackoverflow.com/a/69925257/3059883
"max_data": 512,
"show_hidden": 1,
"max_children": 128
}
}
]
}Ако използвате Local с версия на PHP 7.3.x или 7.4.x, версията на Xdebug, която се използва, ще бъде 2.9.0, която имаше грешка, която предизвикваше някои странности с breakpoints. Добавени са някои връзки към конфигурационния файл по-горе, които предоставят повече подробности, ако се интересувате.
Проверете страницата на разширението PHP Debug в Github за повече информация относно поддържаните настройки.
Добавете breakpoint към вашия код
За целите на това демо за отстраняване на грешки в WordPress, ще добавя breakpoint във файла functions.php на темата която използваме за този блог.
За да добавите breakpoint, плъзнете с мишката върху гутера (точно отляво на номера на реда) и малка оранжева точка ще се появи. Кликнете върху нея, за да добавите breakpoint.
Кликнете отново, за да го премахнете. Можете да добавяте множество breakpoints, и дебъгерът ще се спре на всяка една от тях.
След като добавите breakpoint, ще го видите в долния ляв ъгъл на панела за отстраняване на грешки на VS Code. Също така е възможно да се задават breakpoints за известия, предупреждения, грешки и т.н., но за този пример ще ги деактивираме.
Стартирайте отстраняването на грешки в WordPress
Накрая сме готови да започнем отстраняването на грешки в WordPress! Отворете панела за отстраняване на грешки на VS Code и кликнете върху зеления триъгълник, за да започнете да слушате за Xdebug. Можете да използвате бързия клавиш F5.
След като VS Code започне да слуша за Xdebug, ще се покаже прозорецът за управление на отстраняването на грешки. Долната част на прозореца на VS Code ще стане с по-различен цвят.
Сега Xdebug чака да започне сесията. За да започнете, просто заредете страница, която ще стигне до този breakpoint.
Просто ще заредя началната страница. След като опресня началната страница, VS Code ще бъде подчертан в лентата за задачи, а дебъгерът ще спре изпълнението на кода на breakpoint, който предварително бях задал.
След като е започнала сесията, допълнителните контроли ще бъдат активни на панела за управление на отстраняването на грешки, а променливите ще бъдат изброени в секцията VARIABLES на панела за отстраняване на грешки.
Сега можем да използваме контролите на отстраняването на грешки, за да навигираме през код:
КОНТРОЛИ НА ОТСТРАНЯВАНЕТО НА ГРЕШКИ
- Пауза/Старт (F6): Възобновява изпълнението на кода. Дебъгерът ще спре на следващия breakpoint, ако е зададен.
- Стъпка над (F10): Прескача блок от код.
- Стъпка вътре (F11): Влиза в блок от код.
- Стъпка навън (Shift + F11): Излиза от блок от код, в който преди това е влязъл.
- Рестарт (Ctrl + Shift + F5): Рестартира сесията за отстраняване на грешки.
- Стоп (Shift+F5): Прекратява изпълнението на скрипта.
Анимираното изображение в горната част на тази статия демонстрира някои основни употреби на тези контроли.
ИЗСЛЕДВАНЕ НА ПРОМЕНЛИВИ
Също така можем да изследваме стойностите на локалните и глобалните променливи, използвайки раздела VARIABLES на VS Code в панела за отстраняване на грешки.
Отстраняване на проблеми
Един често срещан проблем, който възниква при отстраняване на грешки в WordPress, е че дебъгерът не спира на breakpoint, който сте задали. Това обикновено се дължи на конфликт на портове – някой друг процес вече използва порта, който сте конфигурирали за отстраняване на грешки.
Уверете се, че никоя друга програма не използва порта, който е конфигуриран в php.ini / xdebug.ini и launch.json файловете. Ако приложение вече използва порта, който сте посочили, уверете се, че ще промените порта с нещо, което не се използва.
За да проверите за конфликт на портове, спрете сесията за отстраняване на грешки във VS Code и след това изпълнете следната команда:
Windows CMD: netstat -an | find "9003"
Linux/Mac: sudo netstat -nap | grep ":9003"
След въвеждането на тези команди не трябва да видите изход. Ако виждате, това означава, че процес вече използва порта, който сте конфигурирали за Xdebug (9003) в нашия пример. Така че трябва да конфигурирате различен порт във вашите php.ini / xdebug.ini и launch.json файлове или да откриете процеса, който заема порта, и да го спрете/конфигурирате да използва различен порт.
Заключение
Тук приключва нашата статия за отстраняване на грешки в WordPress, използвайки Xdebug и VS Code. С помощта на Xdebug ще можете да дебъгвате код по-ефективно. Ако никога преди не сте го използвали, със сигурност ще откриете, че Xdebug е полезен инструмент във вашата разработка.
