Настройка PhpStorm, xdebug и docker контейнера, для совместной работы.

Примечание: Это статья рассказывает, как настроить работу xdebug с PhpStorm, если вы используете рабочее окружение, на основе Docker контейнера, которые мы рассматривали в прошлых статьях. https://paimon.pro/blog/110-sreda-web-razrabotki-na-baze-docker-chast-1


Конфигурация php.ini

В нашем рабочем окружении, php.ini находится по пути /php/7.3/ini/php.ini

Для корректной работы xdebug, требуется внести следующие настройки в конец файла.

;Автоматический старт сеанса отладки без GET/POST запроса.
xdebug.remote_autostart=1 

;Включение режима удаленной отладки.
xdebug.remote_enable=1 

;Активация сеанса отладки со всеми, кто передал специальный GET/POST параметр на сервер.
xdebug.remote_connect_back=0

;xdebug.cli_color=0

;Включение режима профилирования.
xdebug.profiler_enable=0

;Протокол отладчика.
xdebug.remote_handler=dbgp

;Настройка подключения к клиенту отладки.
xdebug.remote_mode=req

;Порт, по которому xDebug пытается подключится к удаленному отладчику.
xdebug.remote_port=7303

;Адрес компьютера, на котором расположен клиент отладчика.
xdebug.remote_host=host.docker.internal

;Ключ для удаленных отладчиков.
xdebug.idekey=PHPSTORM

;Путь к файл-логу для записи всех, кто обращался к отладчику.
xdebug.remote_log="/tmp/xdebug.log"

;Генерация расширенной информации, необходимой для точек останова удаленного отладчика.
xdebug.extended_info = 1

Здесь нас интересует 3 не стандартные переменные

  • xdebug.remote_port=7303
  • xdebug.idekey=PHPSTORM
  • xdebug.remote_host=host.docker.internal

Запомните эти значения, они нам пригодятся для настройки PhpShtorm

Примечание: Тк мы используем несколько версий php, то в каждой версии php, у xdebug должен быть уникальный порт, который будет совпадать с портом на локальной машине. У нас для версии php 7.3 используем порт 7303 , где 73 - версия php.


Конфигурация docker-compose.yml

Внесем изменения в файл docker-compose.yml , в раздел с нашей версией php , в примере мы используем 7.3. Добавляем новый проброс портов

- "7303:7303"

Где 7303 - порт который мы задали xdebug

Получится:

  php-7.3:
    build:
      context: php/7.3/workspace #каталог где будет находиться Dockerfile
      dockerfile: Dockerfile #имя Dockerfile, в нашем случае это "Dockerfile"
      args: #передаем аргуенты в Dockerfile
        DOCKER_PHP_VERSION: '7.3'
        DOCKER_PHP_ENABLE_XDEBUG: ${DOCKER_PHP_ENABLE_XDEBUG}
        TZ: ${WORKSPACE_TIMEZONE}
    working_dir: /var/www
    container_name: php-7.3-workspace #задаем имя контейнера
    volumes: #указываем связь по каталогам  локальный_пк:контейнер
      - ./.ssh:/home/www-data/.ssh
      - ./www:/var/www
      - ./php/7.3/ini/php.ini:/usr/local/etc/php/php.ini
      - ./php/7.3/workers/supervisor.d:/etc/supervisor.d
    ports: #указываем порты локальная_машина:контейнер
      - "${PHP_7_3_PORT}:9000" #берем значение порта локальной машины из .env и указываем порт контейнера (9000)
      - "7303:7303"
    networks: #опеределяем сеть для контейнера
      - backend

Проверка настроек

После изменения конфигурации, перезапускаем контейнер и проверяем через phpinfo Пример успешной конфигурации: mE4P8.png


Настройка PhpStorm

Настройка Debug

Заходим в PhpStorm, открываем настройки File => Settings => Languages & Frameworks => PHP => Debug => jetbrains://PhpStorm/settings?name=Languages+%26+Frameworks--PHP--Debug

Указываем Debug Port , заносим значение, которое мы указывали при пробросе портов - "7303:7303" Для Локальной машины это вторая цифра, в примере это 7303. Т.е. PhpStorm будет обрщаться к локальному порту 7303, который перенаправит запросы на удаленный порт xdebug, который мы указали в php.ini * xdebug.remote_port=7303 Сохраняем настройки через Apply 3LCgT.png

Настройка DBGp Proxy

Дальше переходим в настройку DBGp Proxy File => Settings => Languages & Frameworks => PHP => Debug => DBGp Proxy jetbrains://PhpStorm/settings?name=Languages+%26+Frameworks--PHP--Debug--DBGp+Proxy

Устанавливаем настройки:

  • IDE key: PHPSTORM
  • Host: host.docker.internal
  • Port: 7303

Все эти настройки мы указывали в php.ini

xdebug.idekey=PHPSTORM
xdebug.remote_host=host.docker.internal
xdebug.remote_port=7303

Сохраняем настройки через Apply gxYrW.png

Настройка Servers

Переходим к настройкам Servers File => Settings => Languages & Frameworks => PHP => Servers jetbrains://PhpStorm/settings?name=Languages+%26+Frameworks--PHP--Servers

Добавляем новый сервер SaZvk.png

Делаем такие настройки:

  • Указываем название сервере
  • Адрес сервера
  • Порт
  • Тип дебага
  • Нажимаем Use path... и указываем путь до нашего проекта на вашей локальной машине

Внимание!!! Host указывайте без http , как в примере bot.project-1.localhost

8psIk.png

Дальше необходимо узнать путь до нашего проекта, в докер контейнере. Здесь можно взять путь с docker-compose.yml или получить путь на прямую с контейнера:

  • Запускаем команду docker exec -i -t a6af79194f31 bash , где a6af79194f31 ID вашего контейнера, узнаете через docker ps
  • Переходим в ваш контейнер в консоли и пишем команду pwd и получаем нужный путь /var/www/bot.project-1.ru

Пример:

bash-5.0$ cd bot.project-1.ru/
bash-5.0$ pwd
/var/www/bot.project-1.ru

После путь указывает в настройках Сервера справа от вашей локальной папки. Мы указали в двух местах.

  • Корневой каталог нашего проекта /var/www/bot.project-1.ru
  • Каталог где находится index.php ``/var/www/bot.project-1.ru/public``` CPjRd.png

И нажимаем Apply

Настройки Debug Configurations

Заходим в настройки, нажимаем Edit Configurations... wSesp.png

Добавляем новую конфигурацию 3VVEP.png

Выбираем PHP Remote Debug

vYsve.png

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

  • Name: Xdebug Remote Debug
  • IDE key(session id): PHPSTORM
  • Server: Выбираем созданный ранее сервер, из выпадающего списка

Пример успешных настроек: 7mr86.png

И нажимаем Apply


Устанавливаем Xdebug helper

В примере, мы работает с Google Chrome. Для установки, посетите магазин и найдите расширение Xdebug helper https://chrome.google.com/webstore/detail/xdebug-helper/eadndfjplgieldjbigjakmdgkmoaaaoc

После установки, включаем режим Debug в плагине yqaKY.png

Включаем режим Дебага elMey.png


Начинаем Debug

Выбираем нашу созданную Debug конфигурацию

TnWJM.png

Устанавливаем точки остановки в приложении

Точки остановки - места, где работа скрипта будет остановлена и вам выведутся значения переменных NlHuU.png

Включаем режим Debug

1VUhW.png

Запускаем наше приложение

После запуска приложения в браузере, оно зависнет (будет грузиться), в это время вы увидете все переменные в точках остановки

hwiKq.png

Здесь мы увидели значения нужных нам переменных, т.е. началась отладка.

В этой статье мы рассмотрели, как настроить отладку в нашем рабочем окружении. Провели отладку приложения. Более детальная работа с Xdebug режимом, будут рассмотрены в других статьях.

Оцените статью: