Налагодження php-коду за допомогою xdebug в phpstorm 2019

Налагодження програми - це процес, в ході якого виявляють і усувають баги. Для цього нам потрібно знати, наприклад, значення змінних на кожному кроці виконання програми, або дивитися виповнилося умова, або навіть занурюватися в роботу рекурсивних функцій.

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

Налаштування налагодження PHP в OpenServer

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

Має вийти так:

Після чого потрібно зберегти файл (CTRL + S) і перезапустити веб-сервер.

На цьому настройка веб-сервера для налагодження завершена.

Налаштування налагодження в 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: вимкнено

Зберігаємо зміни, натиснувши на "OK".

Тепер у верхній правій частині програми тиснемо на таку випадає менюшку:

І тиснемо "Edit Configuration".

У вікні в лівому верхньому кутку тиснемо на плюсик і вибираємо "PHP Remote Debug".

І натискаємо праворуч від пункту "Servers" на три точки:

У вікні знову тиснемо на плюсик, і у нас в списку з'являється новий сервер. Давайте задамо для нього наведене нижче

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

Зберігаємо натисканням на "OK" і завершуємо заповнювати раніше відкриту настройку. А саме:

• Ide key (session id): PHPSTORM

І переконуємося, що в "Servers" вказано щойно створений нами "localhost".

Зберігаємо, натиснувши "OK". На цьому конфігурація PHPStorm для налагодження PHP-додатків за допомогою Xdebug завершена.

Налаштування налагодження в браузері Google Chrome

Справа залишилася за малим - потрібно тільки встановити розширення для Chrome під назвою Xdebug helper.

Навпаки розширення Xdebug helper тиснемо кнопку "Встановити".

Після того, як розширення встановлено у верхньому правому куті Chrome з'явиться значок жучка. Тиснемо по ньому правою кнопкою миші і натискаємо "Параметри".

Тут в пункті IDE key в випадаючому меню вибираємо PhpStorm.

І натискаємо "Save".

На цьому попередня настройка завершена.

починаємо налагоджувати

Отже, всі налаштування виконані і справа залишилася за малим - почати користуватися отладчиком.

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

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

Це брейкпоінт (breakpoint), або, як її ще називають - точка зупинки. До неї ми повернемося трохи пізніше.

Тепер давайте включимо відладчик - в правому верхньому куті PHPStorm, там де раніше була порожня випадашка, а тепер обраний пункт "XDebug", тиснемо на значок жучка.

Налагодження на рівні PHPStorm запущена.

Після чого значок стане зеленим.

Тепер можна в Chrome оновити сторінку, і побачити, що вона повисла в режимі завантаження.

А у вікні PHPStorm побачити наступне:

Наша програма зупинила своє виконання в місці брейкпоінта.

Внизу програми (у вкладці Variables) ми можемо бачити значення всіх змінних в даний момент. Як бачимо, зараз (до виконання рядки 5) $ x дорівнює 7.

Давайте натиснемо кнопку "F8". Вона здійснює виконання коду на поточному рядку і зупиняється перед наступною дією.

Помножили $ x на 2, і як бачимо, її значення стало одно 14. Ось так за допомогою налагодження ми можемо відстежувати значення змінних в якийсь певний момент роботи програми.

Крім цього, є, зрозуміло, і інші поєднання клавіш, які використовуються під час налагодження.

Давайте прямо зараз натиснемо F9. Це призведе до того, що програма продовжить виконання до наступного брейкпоінта (так, їх можна наставити скільки завгодно). Якщо їх більше не зустрінеться (як в нашому прикладі), то програма просто завершить свою роботу.

Давайте пограємось з кодом складніше:

І встановимо два брейкпоінта на рядках 5 і 10.

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

Тут ми бачимо значення змінних $ x і $ y всередині функції. Натиснемо F9 і програма виконається до того моменту, поки не дійде до наступного брейкпоінта.

Тут ми вже бачимо, що всередині функції доступні змінні $ x і $ y. Але це вже інші змінні, не ті, що були передані в функцію getSumOfCos (). Ось ми і побачили локальну область видимості в дії.

Крім цього, в лівому нижньому кутку є віконечко "Frames", це так назвати "стек викликів". Тут ми можемо перемикатися на місця, звідки був викликаний наш код раніше. Так ми можемо перейти в те місце, де була викликана функція getSum ().

І можемо подивитися змінні, які були доступні в тій області видимості (рівнем вище).

Ще в правому нижньому куті можна побачити віконце "Watches". Це таке місце, де можна задати змінні або навіть вирази, значення для яких ви хотіли б бачити завжди під рукою. Додаються вони туди за допомогою плюсик. У який з'явився віконці вводимо вираз, яке ми б хотіли відстежувати. Нехай це буде $ x / 2.

Відмінно, залишилося розглянути ще одну клавішу і ви готові до бою - F7. Вона дозволяє зайти "всередину" будь-якої конструкції.

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

Якщо зараз натиснути F8, то програма закінчить своє виконання, і ми не потрапимо всередину функцій. Так відбувається тому що під час налагодження ми працюємо на певних рівнях вкладеності, і якщо нам потрібно буде потрапити всередину функції, то потрібно буде натиснути F7, перебуваючи на рядку 15. Після цього ми опинимося на рядку 10. Якщо зараз натиснути F8, потрапимо на рядок 11. Ще раз - на рядок 12. якщо ми зараз, перебуваючи на 12 рядку натиснемо F7, то потрапимо всередину функції getSum () на рядок 5. А якби ми натиснули F8, то ми просто піднялися б на рівень вище, в те місце , де була викликана функція getSumOfCos ().

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

Ну а зараз прийшла пора поотлажівать рекурсивні функції. Якщо вже у вас виникли проблеми з минулого домашку - давайте будемо їх долати =)

Давайте візьмемо і покорписав код з попередньої домашки:

Поставимо брейкпоінт на 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 і спостерігайте за ходом виконання програми. Сподіваюся тепер рекурсія для вас зрозуміла =)

За традицією нагадаю, що якщо урок сподобався, то будьте ласкаві - поділіться ним в соц. мережах або де-небудь ще. А тепер все за домашку =)