Отладка php в браузере

Дебаг и профилирование PHP-кода с помощью Xdebug

С помощью систем профилирования можно собрать информацию о том, какие функции и вызовы сколько потребляют процессорного времени, что позволяет выявить наиболее медленные, ресурсоемкие участки PHP-программы.

Существуют «классические» методы отладки — echo, var_dump, print_r, но в этой статье поговорим о более продвинутом способе дебага — xDebug. Расширение php xDebug предназначено для пошагового выполнения кода и просмотра значений переменных, что поднимает программирование на PHP на новый уровень.

В этой статье рассматривается настройка xDebug в IDE PhpStorm.

Подключение xDebug

Для работы xDebug PHP должен работать в режиме CGI. Для переключения режима работы PHP откройте раздел Сайты панели управления, нажмите на кнопку «PHP» напротив нужного домена и поставьте галочку «Режим CGI». На переключение режима работы может потребоваться до 15 минут.

ОТЛАДКА КОДА В БРАУЗЕРЕ

Для включения расширения xDebug нужно добавить следующие строки в конец файла cgi-bin/php.ini (находится в каталоге сайта):

В случае, если указанный порт занят, попробуйте выбрать другой порт.

В некоторых случаях может потребоваться указать полный путь к файлу расширения!
При этом первая строка должна иметь следующий формат:

Например, для PHP 5.4 на сервере hugo путь будет таким:

Часть пути, включающая версию PHP Extension может отличаться в зависимости от сервера и версии PHP. Посмотреть нужную версию можно при помощи функции phpinfo().
Как создать файл с вызовом функции описано далее в статье.

Если каталог cgi-bin и/или файл php.ini отсутствуют, их нужно создать:

При необходимости вместо 5.6 можно вызвать PHP другой версии:

Для проверки настроек нужно создать в корне сайта файл x.php со следующим содержимым:

В браузере проверяем, подхватились ли настройки php.ini:

В этом примере рассматривается настройка порта 8014. Проверка того, свободен ли выбранный порт (выполняется на Вашем компьютере):

Можно выбрать и стандартный порт xDebug — 9000.

Настройка работы IDE PhpStorm с xDebug

Со справкой по установке IDE PhpStorm можно ознакомиться на официальном сайте разработчиков.

Для обеспечения совместной работы xDebug и IDE PhpStorm необходимо создать туннель к серверу с локального компьютера. Команда для Linux и OS X:

Отладка PHP приложений с помощью Xdebug

Если Вы используете ОС Windows — Вам понадобится утилита PuTTy, процесс ее установки и настройки описан в этой статье. Для настройки туннеля нужно указать имя сервера либо его IP. Уточнить эту информацию можно в Личном кабинете, в таблице «Общая информация». Порт по умолчанию остается 22, протокол — SSH:

После этого нужно открыть вкладку «Tunnels» и настроить так, как указано на скриншоте. После ввода настроек нужно нажать кнопку «Open»:

Здесь нужно нажать на «Да«:

После чего вводим логин и пароль (они такие же, как и для доступа к Личному кабинету).
Если ранее была настроена авторизация по ключам — вводить логин и пароль не потребуется.

Не забудьте включить SSH в Личном кабинете. Для этого нужно в Панели Управления аккаунтом нажать на переключатель напротив пункта SSH-доступ. Он находится на главной странице слева, в блоке «Тех. информация»:

Если Вы работаете с FTP-аккаунтом, то SSH должен быть включён для него. SSH для FTP-аккаунтов включается в разделе FTP переключателем напротив нужного аккаунта.

Рассмотрим настройку PhpStorm с уже созданным локальным проектом.

Для отображения файлов сайта в PhpStorm нужно произвести некоторые настройки. Во вкладке «Settings» нужно настроить порт, на котором будет работать PhpStorm. В рассматриваемом примере это порт 8014, однако, Вы можете оставить порт по умолчанию — 9000.

Как поставить поисковик Яндекс по умолчанию

Затем во вкладке «Servers» нужно настроить подключение PhpStorm к Вашему техническому домену account.beget.tech на 80 порт (либо 443, если для домена выпущен SSL-сертификат и сайт работает по HTTPS) (необходимо указать домен, на котором ранее был установлен XDebug). В настройках подключения также требуется указать соответствие путей, для этого отметьте галочкой пункт «Use path mappings». В левой части приведён локальный список файлов, справа указывается путь на сервере.

Как правило требуется задавать соответствие только для корневого каталога веб-сервера:

При использовании фреймворков, таких как Yii, Laravel или Symfony, необходимо отдельно указывать пути к директориям, в которых размещаются исходные коды проекта и корневой каталог веб-сервера.
Пример корректной настройки маппингов для проекта на Symfony:

Далее во вкладке «DBGp Proxy» указываем IDE-key PHPSTORM, который был ранее указан в файле php.ini, затем адрес сервера, который можно посмотреть в Личном кабинете, в таблице «Тех. информация«, и указываем удаленный порт, с которого будeт приходить отладочная информация. Нужно будет нажать «Apply«, затем «OK«:

Для корректной работы дебага может потребоваться настройка конфигурации развёртывания проекта. Для этого откройте пункт меню «Tools» — «Deployment» — «Configuration«. Здесь потребуется указать настройки для подключения к серверу по FTP либо SFTP. Мы рекомендуем использовать протокол SFTP — он более стабилен и безопасен.

В качестве имени хоста укажите Ваш технический домен. Далее укажите логин и пароль для входа в систему. При использовании SFTP можно выбрать ключ, с которым выполняется авторизация по SSH.

После этого нажмите на кнопку «Autodetect» рядом с пунктом «Root path» — будет определён домашний каталог учётной записи.

При использовании SFTP нажимать на кнопку обзора файловой системы (кнопка с тремя точками справа от поля Root Path) на этой вкладке не нужно. Обзор файловой системы по SFTP начинается с корневого каталога, доступ к которому запрещён, поэтому при попытке просмотра файловой системы возникнет ошибка Permission Denied.

После этого на вкладке «Mappings» укажите каталог, в котором размещены файлы проекта (здесь уже можновоспользоваться функцией обзора файловой системы сервера). Для большинства сайтов путь будет вида «/site/public_html«. При использовании Yii, Symfony, Laravel и некоторых других фреймворков — /site (если Вами не была изменена структура проекта по умолчанию). В нашем примере используется Symfony, поэтому путь указываем без «public_html«

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

Сейчас нужно выставить брейкпоинт, указанный первым пунктом. Выбрав нужную строку php-кода, нужно нажать на область справа от номера строки либо нажать сочетание клавиш «Ctrl+F8«, после чего включить прослушивание порта (стрелка 2), на который xDebug будет посылать ответ при запуске скрипта.

После этого можно открыть сайт в браузере. При первом входящем подключении от Xdebug будет запрошена информация о конфигурации проекта, необходимо выбрать текущий проект и конфигурацию деплоя, которая была настроена ранее. После этого нажмите кнопку «Accept».

По достижении точки останова в PhpStorm откроется дебаг-панель, где будут отображены значения всех переменных на момент обработки кода на месте брейкпоинта:

Также для наглядности значения переменных для исполненных участков кода указываются прямо в редакторе:

Для продолжения работы скрипта требуется нажать на кнопку «Resume Program» в дебаг-панели либо клавишу F9.

Удачной работы! Если возникнут вопросы — напишите нам, пожалуйста, тикет из Панели управления аккаунта, раздел «Помощь и поддержка».

Источник

Начала отладки и профилирования веб-приложений

Много существует статей на Хабре, описывающих интересные и сложные аспекты веб-разработки, но много существует читателей, которые, находясь в начале своей карьеры веб-разработчика, хотели бы видеть материал, который позволил бы сделать первый шаг от «PHP за 24 часа» до разработки на серьезном уровне, и я хотел бы поделиться своим опытом в этом деле.

Как почистить историю браузера хром на андроиде

Особенности веб-приложения делают его разделенным на две части: клиентскую и серверную. На стороне клиента работает код на JavaScript (может быть, где-то можно найти и VBScript, но мы, пожалуй, не будем рассматривать этот случай), на серверной же — много что, в принципе, но мы рассмотрим PHP, наиболее популярный язык для серверной части веб-приложений. Так же интересно было бы поговорить об отладке и профилировании Flash-приложений на клиентской стороне, но затронутая тема и так обширна, так что пока оставим это.

Так же можно отнести к задачам отладки клиентского кода анализ и валидацию HTML кода. Это, вроде бы, задача не совсем из области программирования, но также немаловажная.

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

Отладка и профилирование клиентского кода

«Классическим» способом отладки кода на JavaScript является использование функции alert и ее производные. Помнится, в начале своей карьеры лично я написал функцию print_r для JavaScript, так как не видел возможности для вывода отладочной информации по массивам и объектам. Выглядело это примерно так:

О каком-либо профилировании речи, конечно, не велось совсем.

При таком подходе даже информация об объекте console производит революцию.

Специфика клиентской стороны веб-приложения требует отладки кода во всех популярных браузерах. Конечно, чаще всего хватает и отладки в Internet Explorer’е и любом нормальном другом браузере, но мы рассмотрим все варианты.

Mozilla Firefox

Наверно, именно Firefox можно назвать пионером отладки клиентского кода. Долгое время его указывали как браузер, наиболее подходящий для разработки, а все благодаря расширению Firebug, которое содержит, наверно, все нужные возможности, кроме валидации HTML кода.

Так же, начиная с версии 4, появилась встроенная Веб-консоль, которая реализует часть функций вкладки «Консоль» и «Сеть» Firebug’а, а так же некоторые возможности по отладке CSS.

Начиная с версии 6, появился Простой редактор JavaScript, который так же реализует одну из функций Firebug’а, и позволяет писать и выполнять код прямо в браузере.

Начиная с версии 10 появился Инспектор страниц, который позволяет изучать HTML код и CSS свойства, то есть, реализует функции вкладки «HTML».

За валидацию HTML кода как правило отвечает расширение Html Validator. Как раз его иконку, указывающую на количество ошибок на главной странице сайта habrahabr.ru, можно видеть в правом нижнем углу браузера на картинке с Инспектором страниц.

Так же, пользуясь случаем, укажу, что для этого браузера есть множество расширений, позволяющих облегчить жизнь, о чем на Хабре уже была соответствующая статья.

Google Chrome и Safari

Эти браузеры, основанные на WebKit, обладают встроенным инструментом разработки Web Inspector, который очень хорошо развит и реализует практически те же функции, что и Firebug. При этом, надо отдать ему должное, он не замедляет работы браузера, что водится за «старшим братом».

В Chrome он может быть вызван по нажатию клавиш Ctrl+Shift+I или просто по F12 . В Safari он хорошо спрятан, и для его использования нужно включить возможности разработки в настройках браузера. Позже инструменты разработчика станут доступными из пункта «Разработка» главного меню или по сочетанию клавиш Ctrl+Alt+I .

Для валидации HTML кода так же нужно устанавливать сторонние расширения. К примеру, для Chrome, это может быть Validity. Для Safari пока не удалось подобрать ничего подходящего.

Opera

Opera так же имеет встроенный инструмент для разработчиков, который называется «Opera Dragonfly», и может быть вызван в любой момент по сочетанию клавиш Ctrl+Shift+I . Он похож на то, что нам представляет WebKit, и имеет подобные возможности и плюсы, хотя, на мой лично взгляд, менее удобен.

Как подсказал товарищ homm, в Опере есть простое средство отправить страницу на валидацию в validator.w3.org. В контекстном меню области отображения сайта есть пункт «Соблюдены ли веб-стандарты», который как раз и отвечает за это.

Что значит подтвердить учетную запись на госуслугах

С расширениями для валидации HTML в каталоге Оперы напряженная ситуация. По этой причине у расширения Validator нет альтернатив.

Internet Explorer

Начиная с версии 8 и здесь появился инструментарий разработчика. Он предоставляет примерно те же возможности, что и в случаях остальных браузеров, но, как и в других аспектах своей деятельности, Internet Explorer предоставляет их с некоторыми особенностями и непередаваемым изяществом. Важным пунктом является возможность эмуляции более старых версий, а так же режима совместимости.

Принято считать, что в версиях 7-, над которыми пролились моря слез верстальщиков и JS-программистов, подобных инструментов нет. Существует стороннее решение, Companion.JS, о котором была соответствующая статья. Конечно, его возможности значительно уступают привычным инструментам, но это средство хотя бы позволяет отлаживать код более продвинуто, чем «alert-ориентированная отладка».

Товарищ atd подсказал, что и для этих многострадальных версий «родной» инструментарий под названием «Internet Explorer Developer Toolbar» был, но требовал отдельной установки: www.microsoft.com/download/en/details.aspx?id=18359

Так же товарищ k12th напомнил, что при наличии Visual Studio можно отлаживать код в ней (компоненты «Web Development Tools»). Так же можно найти информацию о бесплатной версии Visual Web Developer Express.

Отладка и профилирование серверного кода

Xdebug

Как мы договорились в начале, мы рассматриваем случай, когда на сервере используется PHP. Тут «классическим» методом отладки являются echo , print_r и var_dump , но есть так же и средство для отладки, как в лучших домах — Xdebug. Лично для меня, в связи со спецификой обучения в институте, это выглядело «прямо как в Delphi».

Расширение xdebug позволяет как минимум прогонять код по шагам и просматривать значения переменных, что поднимает программирование на PHP на новый уровень. О тонкостях работы с xdebug была соответствующая статья. XDebug обычно доступен в репозиториях GNU/Linux, в Windows его так же не слишком сложно установить, скопировав dll файл.

При использовании этого расширения, с сервера на компьютер разработчика поступает входящее соединение (по умолчанию на порт 9000), которое он должен обработать. Для этого необходимо соответствующим образом настроить свою IDE.

Кстати говоря, использование IDE так же является непременным условием движения вперед. Некоторые программисты считают, что разницу между программированием в блокноте с подсветкой кода и в IDE можно увидеть только на крупных проектах, но лично я придерживаюсь мнения, что разница видна даже на программе «Hello world!» — одна автоподстановка имен и аргументов стандартных функций чего стоит.

XHProf
О расширении

Да, xdebug предоставляет возможности по профилированию, но разработка Facebook’а для этих целей, XHProf, лично мне больше нравится. Я, сказать честно, не проводил никаких тестов, но считается, что данное расширение гораздо лучше подходит для production-серверов и для профилирования при реальных нагрузках.

Установка

К сожалению, это расширение не входит ни в какие репозитории. Оно входит в PECL, но по какой-то причине его установка штатным путем часто вызывает проблемы. По этой причине приходится проводить установку из исходников.

Файл конфигурации xhprof.ini предоставляет нам примерно такие возможности:

[xhprof]
extension=/usr/local/lib/php/extensions/no-debug-non-zts-20090626/xhprof.so
; Каталог для логов
xhprof.output_dir=»/var/log/xhprof/»

Профилирование

Каталог, который мы получаем, распаковав архив, содержит помимо исходников расширения так же и веб-интерфейс для изучения результатов профилирования, и библиотеки для профилирования приложения.

Приведем пример профилирования. В код приложения нужно включить следующие элементы:

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

Для анализа результатов нужен тот самый веб-интерфейс. Его можно взять в каталоге $XHPROF_DIR/xhprof_html/ — условно обозначим его так. К примеру, мы расположили его в доступном веб-серверу месте, и он доступен по адресу example.com/system/xhprof/ , тогда для анализа результата работы нам нужно обратиться к нему следующим образом:

Мы получим подобный результат:

Профилирование можно включать в код приложения на постоянной основе или, например, сделать так, чтобы оно запускалось случайно с определенной вероятностью или по наличию определенного условия. Например, так:

Браузер мазила с поиском Яндекса

В таком случае можно, имея жалобы от клиентов или подозрения, обратиться к результатам профилирования за определенный временной промежуток. С помощью параметра namespace можно определить, какая именно часть приложения (какой скрипт, контроллер, экшн) профилировались.

Профилирование SQL запросов

Как правило, именно работа с базой данных является узким местом в приложении. По этой причине рекомендуется проводить профилирование запросов. К примеру, рассмотрим часть класса, являющегося оберткой вокруг функций расширения mysql. Да, я знаю, что это расширение не очень любят и желают ему смерти не меньше, чем старому-доброму IE6.

Я не призываю его использовать, просто именно такой класс есть у меня под рукой.

Здесь данные профилирования запросов хранятся в таблице profiler_queries . Эта таблица может иметь тип MyISAM или Archive, так как они предоставляют возможность совершать отложенные вставки, что не создает излишней задержки ответа при профилировании. Так же для лучшего поиска запросов в таблице лучше создать столбец типа INT , куда будет писаться crc32-хеш запроса, по которому нужно создать индекс.

Заключение

Статья получилась достаточно большой. Возможно, здесь я прошелся по верхам и затронул темы, которые уже затрагивались, но если бы я в свое время прочитал что-то подобное — статью, где вся информация собрана вместе и даны полезные ссылки, это оказало бы мне неоценимую помощь. Я надеюсь, что и моя статья поможет кому-нибудь на пути к просветлению.

Источник

Настройка отладки php-кода при помощи Xdebug

Настройка отладки php-кода при помощи Xdebug

Классические методы отладки на PHP — использование функций error_log, print_r и var_dump. Их проблема в том, что они не помогают отслеживать сам процесс работы кода. Однако с этой задачей справляется Xdebug — один из самых популярных инструментов среди PHP-разработчиков, которые хотят работать, а не страдать.

В этой статье будет рассмотрена отладка PHP с помощью связки Xdebug и VSCode. Если вы пользуетесь PHPStorm, то проблем тоже не будет — настройка выполняется даже проще и быстрее.

Возможности Xdebug

Xdebug — это расширение для PHP, которое позволяет использовать удаленный отладчик в IDE через брейк-пойнты. С его помощью вы можете отслеживать значения переменных. Как итог — ошибки в коде обнаруживаются быстрее, чем при использовании error_log, print_r и var_dump.

Еще одна полезная функция — трассировка стека. Она выводит подробный путь, который привел приложение к ошибке. Он содержит параметры, переданные в функцию. Xdebug также можно использовать как профайлер для поиска узких мест кода. Если добавить внешние инструменты, то получится визуализировать графики производительности.

Например, можно использовать WebGrind — набор PHP-скриптов для удобного вывода статистики прямо в браузере.

Кроме того, с помощью Xdebug вы можете проследить, какая часть кода выполняется в процессе запроса. Это дает информацию о том, как хорошо код покрыт тестами.

Подключение Xdebug

Для работы Xdebug PHP должен быть в режиме CGI. Посмотрим на примере хостинга Timeweb, как его включить.

Подключаемся к серверу через SSH. Можно использовать консоль в панели управления Timeweb.

Переходим в папку cd-bin сайта:

Создаем символическую ссылку командой:

Остаемся в директории cgi-bin и копируем файл php.ini:

Добавляем в файл .htaccess сайта две строки:

Теперь мы можем управлять параметрами PHP директивами в файле php.ini. Он находится в папке cgi-bin. Открываем его и вставляем в конце следующие строки:

Если указанный порт занят, укажите другой. Можно использовать стандартный для Xdebug — 9000. В качестве idekey я указал VSCODE.

Если будете настраивать конфигурацию для PHPStorm, впишите его.

Настройка PHP для Xdebug

Чтобы проверить, работает ли Xdebug, создадим в корне сайта файл Myfile.php со следующим содержимым:

Открываем файл в браузере и проверяем, что все параметры указаны верно.

Организация удаленного подключения

Чтобы выполнять PHP Debug на локальной машине, нужно настроить связь IDE и сервера через SSH-туннель.

Как сменить время в Яндекс Браузере

На Linux все выполняется парой команд.

Приватный ключ сохраняется на локальной машине, а публичный добавляется на сервер. Подробнее об этом, а также о настройке SSH на Windows, вы можете узнать из этой статьи.

На Linux туннель создается командой:

На Windows туннель настраивается через утилиту PuTTY.

  1. На вкладке Session указываем имя сервера и номер порта 1024. Проверяем, чтобы был отмечен протокол SSH.
  2. Переходим в раздел Connection — Data. Указываем логин.
  3. Переходим в раздел Connection — SSH — Tunnels. Указываем параметры так, как указано на скриншоте. Номер порта пишем тот, который используется в конфигурации PHP на сервере.
  4. Возвращаемся в раздел Session и нажимаем на кнопку Open. Подтверждаем корректность ключей (только первый раз).

Сессия сохранится под тем именем, которое мы указали в разделе Session. В дальнейшем нужно будет просто запускать ее заново.

Настройка VSCode

Чтобы работать с Xdebug в VSCode, установим два расширения: Sync-Rsync и PHP Debug. Первое нужно для работы с удаленным сервером, второе — для отладки скриптов.

  1. Открываем в VSCode раздел Extensions (можно использовать сочетание клавиш Ctrl+Shift+X).
  2. Находим и устанавливаем расширение Sync-Rsync.
  3. Находим и устанавливаем расширение PHP Debug.

После установки расширений создаем на локальной машине пустую папку и открываем ее через VSCode: «Файл» — «Открыть папку».

Добавляем подпапку .vscode, создаем внутри нее файл settings.json и прописываем в нем настройки для Sync-Rsync.

Путь /home/user/.ssh/id_rsa — это место, где лежит файл с закрытой частью SSH-ключа.

После сохранения файла settings.json нажимаем в VSCode F1, выполняем команду Sync Remote to Local. В локальную папку, указанную в настройках, скопируются все файлы с сервера.

Синхронизация с сервером

Затем нажимаем на иконку отладки и на шестеренку. В папке .vscode появится файл launch.json. В него тоже нужно внести изменения:

На этом настройка IDE завершена. Можно приступать к тестированию кода.

Debug кода

Мы настроили среду, теперь разберемся, как пользоваться Xdebug.

  1. Изменим содержимое файла Myfile.php, который мы создали при подключении отладчика. Добавим в него функцию, которую хотим проверит ь.
  2. Чтобы загрузить измененный файл на сервер, нажимаем на клавишу F1 и выполняем команду Sync-Rsync: Sync Local to Remote.
  3. Открываем файл в браузере и проверяем, что синхронизация работает.
  4. Расставляем в VSCode брейк-пойнты, которые нужны для отладки.

Переходим в режим «Отладка» и проверяем, что выделен пункт Listen for XDebug. Нажимаем на зеленый треугольник или на клавишу F5.

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

Отладчик Xdebug

Профилирование с визуализацией результатов

Чтобы использовать Xdebug profiler на полную мощность, установим WebGrind. Это набор скриптов, который выводит статистику в браузере. С его помощью можно посмотреть список вызванных функций, количество вызовов, общее затраченное время на вызов и выполнение.

  1. Скачиваем WebGrind с GitHub.
  2. Загружаем архив на сервер и распаковываем файлы в корне сайта.
  3. Создаем папку, в которой будут храниться логи.
  4. Добавляем в файл php.ini две директивы:

Затем нужно открыть файл config.php, который находится в распакованной папке webgrind-master. В нем отредактируем две строки:

После такой настройки можно выполнять на Xdebug профилирование. Открываем наш тестовый скрипт в браузере. Затем переходим по ссылке www.domain/webgrind-master.

В выпадающем списке выбираем только что запущенный скрипт и нажимаем на кнопку Update.

Функции можно скрывать или раскрывать, чтобы посмотреть развернутую статистику. Инструмент также умеет отображать графы вызова функций — для этого используется режим Show Call Graph.

Вывод: когда использовать Xdebug?

Xdebug существенно упрощает отладку PHP-кода. Конечно, если ваш текущий инструментарий удовлетворяет все потребности в поиске багов, то устанавливать дополнительное расширение смысла нет. Но, как показывает практика, без Xdebug сложно провести правильное модульное тестирование или отладку через удаленные брейк-пойнты с возможностью пошаговой проверки кода.

Источник
Рейтинг
Загрузка ...