Встановлення Xdebug, частина 2: IDE
Тепер, коли Xdebug встановлено разом із локальною інсталяцією PHP, настав час підключити його до IDE. Це надає нам усі переваги, які може запропонувати Xdebug.
Тобто це дозволяє нам:
- встановити контрольні точки,
- крок через наш код,
- і спостерігати за змінними
Весь час, поки програма виконується. Це означає, що під час візуалізації сторінки ми можемо встановити точки в нашій кодовій базі, де ми можемо бачити, що сервер робить з нашим кодом.
Тож, звісно, незважаючи на те, що це називається налагодженням для усунення помилок, воно також може дати уявлення про те, як працює програма, тема чи плагін на базі WordPress, і може допомогти нам краще зрозуміти ядро WordPress.
Встановлення Xdebug у Visual Studio Code
На цьому етапі у вас має бути налаштоване таке середовище на вашій локальній машині:
- Valet (включає Nginx і MySQL і пов’язані інструменти )
- WordPress
- Код Visual Studio
- Xdebug
Інші завдання для всіх вищезазначених передбачають прив’язування Xdebug до коду Visual Studio, щоб ми отримали буквальне уявлення про те, як працює WordPress (і, отже, наша робота), що він робить і так далі, коли він працює у браузері.
З огляду на це, давайте почнемо.
1 Встановлення необхідних розширень
По-перше, давайте переконаємося, що PHP Debug Extension встановлено в Visual Studio Code. У меню «Розширення» на бічній панелі IDE знайдіть PHP Debug, і ви побачите екран, подібний до наведеного нижче.
Якщо розширення ще не встановлено, встановіть його. Можливо, вам доведеться перезапустити Visual Studio Code, щоб нове розширення набуло чинності.
Звідси є кілька додаткових параметрів конфігурації, які нам потрібно перевірити, перш ніж намагатися налагодити будь-який код.
Згадайте з попередньої публікації, нам потрібно було включити Xdebug у наш файл php.ini. Зокрема, нам довелося додати такий рядок коду, щоб увімкнути Xdebug:
zend_extension="/usr/local/lib/php/pecl/20160303/xdebug.so"Тепер нам потрібно ще трохи попрацювати.
- нам потрібно буде додати рядок конфігурації до файлу php.ini, згаданого в останньому дописі ,
- нам потрібно буде налаштувати демонстраційний сценарій, щоб переконатися, що є належний розділ Xdebug,
- нам потрібно буде налаштувати код Visual Studio
На щастя, все вищезазначене є відносно швидкими завданнями. По-перше, рядок конфігурації, який ви хочете додати до свого файлу , виглядає наступним чином:
[XDebug]
xdebug.remote_enable = 1
xdebug.remote_autostart = 1Потім створіть демонстраційний сценарій і підключіть його до Valet. Ви можете зробити це легко, створивши каталог на робочому столі, створивши щось на зразок test.php, а потім додавши phpinfo(); до файлу.
Після цього зв’яжіть каталог і перезапустіть Valet. Я випадково назвав свій приклад каталогу та скинув у каталог файл 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 клацніть піктограму Debug, розташовану над піктограмою Extensions і трохи нижче піктограми Source Control.
На бічній панелі вгорі ви помітите, що є кнопка відтворення. Поруч з ним є спадний список. Може бути напис «Немає конфігурації». Якщо це так, а я припускаю, що це так, вам потрібно буде виконати кілька дуже конкретних кроків, щоб переконатися, що налагодження працює правильно.
1 Відкрийте каталог сценаріїв
Вам потрібно буде переконатися, що ви перебуваєте в каталозі сценарію у Visual Studio Code.
Тобто недостатньо переконатися, що у вас просто відкритий файл. Visual Studio Code має знати, з якого каталогу ви працюєте (оскільки це створює прихований каталог .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
}
]
}На цьому етапі в меню Debug має бути щось на зразок Launch Currently Open Script поруч із піктограмою відтворення. Якщо ні, тоді ви зможете вибрати щось на зразок PHP (оскільки у нас встановлено розширення).
Якщо так, виберіть цей параметр.
3 Встановіть деякі точки зупину
Тепер настав час побачити налагоджувач у дії. На цьому етапі запустіть вікно браузера з тестовим сценарієм.
Мій простий:
Після цього перейдіть у свою IDE, а потім клацніть ліву панель ліворуч від номера рядка. Це встановить деякі точки зупинки.
Ось приклад:
Тепер натисніть кнопку «Відтворити» для налагоджувача. Відразу ви повинні помітити, що рядок стану став помаранчевим і деякі елементи керування налагодженням (для продовження, кроку, кроку, перезапуску та зупинки). Наразі вони не цікавлять нас, оскільки ми детальніше розглянемо їх у наступній публікації.
Зауважте також, що на лівій панелі є деяка інформація про змінні, годинники тощо. Якщо ви встановили контрольні точки для своїх локальних змінних, ви помітите, що $exampleName виділено, але, ймовірно, не ініціалізовано.
Натисніть кнопку «Відтворити» в нових елементах керування, які з’явилися, і він має запуститися до наступної точки зупинки.
Тепер рядок буде виділено, а на панелі налагодження $exampleName отримає значення. У моєму випадку це Аліса.
Ви можете продовжувати грати з цим скільки завгодно, щоб відчути, як працює налагоджувач.
Наступного разу, Скрінкасти
Налагодження є потужним, але може бути складним у багатьох відношеннях. Починаючи з наступної публікації, я почну ділитися деякими скрінкастами, які пояснюють, як:
- функції налагодження та змінні,
- змінювати значення на льоту,
- працювати з консоллю налагодження,
- і більше.
Це займе трохи більше часу, тому що це будуть відео з описом того, як це зробити, але користь має бути великою.
Якщо ви ще не мали можливості ознайомитися з усім вмістом цієї серії, я настійно рекомендую її.
📣 Примітка щодо бонусів для учасників
Однак зауважте, що перед наступним дописом про скрінкасти та наступним випуском цієї серії я хочу зробити деякі оголошення спеціально для учасників сайту, які включають знижки на програмне забезпечення на основі WordPress.
Я розповім про це наступного тижня.