0

Отладка кода 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. Надеюсь, эта статья была вам полезна )