Рубрики
WordPress Разработка

Отладка кода WordPress-проетка с помощью Zend Debugger и Eclipse PDT

Что делать, когда явных ошибок в коде нет, но на выходе вы получаете совсем не тот результат на который рассчитывали?

Использовать функции print_r() и var_dump(), чтобы узнать значения переменных в определенных местах скрипта – это, конечно, прошлый век. Гораздо удобнее использовать отладчик (debugger). В нашем случае Zend Debugger в связке с Eclispe PDT.

Если вы следовали предыдущим инструкциям по установке Zend Server CE и Eclipse PDT, то все необходимые компоненты для отладки кода с помощью Zend Debugger уже установлены.
Также на одном из предыдущих шагов нами был создан WordPress-проект для редактирования темы Twenty Eleven.

Чтобы приступить к отладке нам понадобится создать в Eclipse новый WordPress-проект. Сразу предвижу вопросы – почему нельзя использовать старый? Ответ  – можно, но чисто опытным путем пришел к тому, что лучше работать с отдельным проектом, в который будут входить не только файлы темы/плагина, но и вся установка WordPress целиком. Такой подход имеет свои плюсы – вы легко сможете производить отладку кода тем/плагинов как на публичных страницах, так и в панели управления, настроив точки запуска всего дин раз. Проект, созданный по предыдущей схеме, не дал бы это сделать так просто. Также вы сможете устанавливать точки остановки в исходном коде WordPress (хотя бы просто в исследовательских целях) – серьезное преимущество недоступное для проекта включающего только файлы темы или плагина.

  • Начинаем с создания в Eclipse нового PHP-проекта:

    Создание нового проекта
    Создание нового проекта
  • Добавляем к проекту файлы WordPress, установленного на веб-сервер. Открываем свойства проекта (правый клик на имени проекта -> Properties), переходим к разделу Build Path. Удаляем существующую папку с именем проекта (выделить и нажать Remove):
    Очистка Build Path (1)
    Очистка Build Path (1)

    На вопрос удалить ли эту папку из Include Path отвечаем – Да:

    Очистка Build Path (2)
    Очистка Build Path (2)

    Далее нажимаем “Link Source…”, находим папку установки WordPress и добавляем ее к проекту:

    Добавляем в Build Path файлы WordPress
    Добавляем в Build Path файлы WordPress
  • Возвращаемся к свойствам проекта, раздел PHP Debug:
    PHP Debug
    PHP Debug

    Включаем опцию “Enable project specific settings” (особые установки для проекта).
    В поле Base Path вводим имя папки установки WordPress на веб-сервере: /_wordpress-clean/ – обратите внимание на косые черты с обеих сторон.
    Base Path должен быть таким, чтобы Auto-generated Base Url совпадал с адресом сайта (http://localhost/_wordpress-clean/).

  • Далее открываем общие настройки Eclipse (Главное меню -> Window -> Preferences) и переходим в раздел PHP -> PHP Servers. Выделяем сервер по умолчанию (localhost) и нажимаем Edit:
    PHP Servers
    PHP Servers

    Переходим к закладке Path Mapping (преобразование пути) и нажимаем Add (добавить):

    Path Mapping (1)
    Path Mapping (1)

    В открывшемся окне, в графе “Path on server” указываем физический путь к папке установки WordPress.
    В графу Path in Workspace вставляем путь к папке WordPress, находящейся внутри нашего проекта (та папка , что была добавлена через Link Source):

    Path Mapping (2)
    Path Mapping (2)
  • Не закрывая окно общих настроек Eclipse переходим к разделу PHP -> Debug -> Workbench Options:
    Workbench Options
    Workbench Options

    Здесь несколько полезных настроек:
    Allow multiple debug sessions (разрешить несколько сессий отладки) – чтобы не запутаться опция лучше отключить (Never) или хотя бы предупреждать, что существуют незаконченные сессии (Prompt).
    Switch back to PHP perspective when debugging has terminated (вернуться в обычный режим редактирования по завершении сессии отладки) – я предпочитаю автоматический переход отключать (Never).
    Workbench options: Open in browser – вывод результата работы скрипта в браузер (актуально только для режима одиночного скрипта – PHP Script).
    Workbench options: Open PHP Debug Views – открывает окно браузера и текстовое окно с результатами работы скрипта. Предпочитаю отключать.

  • Общая настройка завершена. Переходим непосредственно к отладке. Открываем интересующий файл темы. Например wp-content/themes/twentyeleven/index.php. Допустим мы хотим посмотреть состояние переменных в момент вызова функции get_header(). Для этого устанавливаем breakpoint (точка остановки) с помощью двойного клика по номеру строки:

    Установка breakpoint
    Установка breakpoint
  • Теперь создаем точку запуска для отладки публичных страниц WordPress. Открываем index.php, находящийся в корне установки WordPress (с него начинается запуск публичной части WordPress и наша сессия отладки), далее кнопка Debug -> Debug As -> PHP Web Page:
    Запуск сессии отладки (публичные страницы)
    Запуск сессии отладки (публичные страницы)

    В открывшемся окне указываем адрес запуска, т.е адрес нашего WordPress-сайта (http://localhost/_wordpress-clean/):

    Адрес запуска
    Адрес запуска
  • После нажатия Ок, откроется веб-браузер, но страница будет пуста. Возвращаемся в Eclipse. Режим PHP Debug уже запущен:
    PHP Debug Perspective
    PHP Debug Perspective

    Открыт файл index.php, мы в самом начале отладки. Но уже сейчас можно посмотреть значения глобальных массивов $_GET и $_COOKIE.
    Обратите внимание на панель управления:

    Управление сессией
    Управление сессией

    1 – Remove All Terminated Launches – удаление сессий.
    2 – Resume – продолжить. Используйте, чтобы сразу перейти к следующей точке остановки.
    3 – Suspend – пауза.
    4 – Terminate – завершение текущей сессии.
    5 – Step Into – шаг внутрь. Используйте, чтобы перейти внутрь вызываемой функции. Таким образом можно пошагово проследить выполнение всего скрипта.
    6 – Step Over – перепрыгнуть шаг. Используйте, если вы не хотите углубляться в вызовы функций текущей строки и сразу перейти к следующей строке.
    7 – Step Return вернуться на уровень вверх. Например вы вошли в функции с помощью “шаг внутрь”, с помощью шага назад можно вернуться на предыдущий уровень выполнения скрипта.

  • Чтобы сразу перейти к нашей точке остановки используем кнопку Resume (F8):
    Точка остановки
    Точка остановки

    Вот для чего все и затевалось. В окне Variables (переменные) значение всех переменных на момент вызова функции get_header()!
    Чтобы завершить загрузку страницы, опять нажимаем Resume – сессия переходит в состояние terminated. На самом деле сессия не уничтожена, она в режиме ожидания действий пользователя в браузере. Откройте браузер – вы увидите страницу, которая была сгенерирована в ходе сессии отладки. Переход по любой ссылке вновь активирует сессию. Таким образом можно посмотреть, что будет происходить со скриптом на внутренних страницах, даже перейти в панель управления. Некоторые функции скрипта могут быть задействованы только при запуске со страницы сайта – например обработка данных форм и т.п.

  • Завершаем сессию с помощью кнопки Remove All Terminated Launches:
    Завершение сессии отладки
    Завершение сессии отладки

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

  • Что делать, если сервер закрывает соединение до того, как вы закончите сессию отладки? Выглядит это так: вы еще изучаете очередную точку остановки, скрипт не завершил свою работу, а браузер уже отключился, и вместо итоговой страницы предлагает сохранить файл. В этом случае надо увеличить время ожидания отклика веб-сервера (Response Timeout). Для Zend Server Apache это делается так: откройте файл “Папка установки Zend Server\ZendServer\etc\ZendEnablerConf.xml”, найдите строчку:
    <Timeouts connectionTimeout="60" requestTimeout="120" />

    и замените на

    <Timeouts connectionTimeout="60" requestTimeout="600" />

    или на любую другую устраивающую вас величину. Значение указывается в секундах.
    Сохраните файл и перезапустите Apache.

  • Теперь попробуем запустить отладку в панели управления WordPress. Открываем файл wp-content/themes/twentyeleven/functions.php. Функция twenty_eleven_admin_header_image() вызывается только в панели управления на странице Внешний вид -> Заголовок. Устанавливаем точку остановки внутри этой функции:

    Брейкпоинт в functions.php
    Брейкпоинт в functions.php
  • Создаем точку запуска для отладки страниц в панели управления. Открываем файл wp-admin/index.php, далее кнопка Debug -> Debug As -> PHP Web Page:
    Запуск сессии отладки (панель управления)
    Запуск сессии отладки (панель управления)

    В открывшемся окне указываем адрес панели управления WordPress-сайта ( http://localhost/_wordpress-clean/wp-admin/):

    Адрес запуска
    Адрес запуска

    Далее запускается уже известный вам процесс отладки…
    Обратите внимание, что сначала сессия сразу перейдет в состояние terminated (если не сработают другие точки остановки), т.к. на главной странице панели управления наша функция не вызывалась. Только когда в браузере вы откроете страницу Внешний вид -> Заголовок, вот тогда точка остановки сработает.

  • Что делать если в процессе отладки возникают проблемы с загрузкой стилей панели управления?
    Проблема со стилями
    Проблема со стилями

    Необходимо скачать и установить плагин Q2W3 Debug. Он отключает ускоренную загрузку стилей через load-style.php, и загружает стили по старинке.
    Также имейте в виду, что выполнение Ajax-запросов может досрочно завершить сессию. Лучше избегать вызова ajax-функций, которые не планируете отлаживать.

  • Подведем итог. У нас теперь есть проект для отладки тем и  плагинов. Две точки запуска для быстрой отладки панели управления и публичных страниц. Также этот проект можно использовать в исследовательских целях для углубленного изучения внутренней кухни WordPress. Надеюсь, эта статья была вам полезна )

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *