Локальная отладка (с помощью Flywheel): руководство для начинающих

Опубликовано: 2022-08-13

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

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

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

Что такое Xdebug на локальном компьютере?

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

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

Различия в дампе xdebug var

Если вы не знаете, var_dump() — полезная часть PHP, которая быстро показывает, что не так с вашим кодом. Но разница здесь в том, что если у вас не было Xdebug под рукой, код, созданный при вызове var_dump() было бы гораздо труднее читать. Кроме того, вам придется форматировать PHP особым образом даже при вызове var_dump() в первую очередь.

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

И самое приятное то, что Xdebug по умолчанию включен в локальном режиме, поэтому вам даже не нужно возиться с какими-либо настройками, чтобы начать работу. Просто откройте Local и вперед.

Как отлаживать веб-сайт в локальном режиме

Вы можете отлаживать веб-сайт в Local несколькими ключевыми способами. Вот основные шаги, которые мы будем обсуждать:

  1. Выявление ошибок консоли браузера
  2. Использование монитора запросов
  3. Через Xdebug и VS Code
  4. С Xdebug и PhpStorm
  5. Использование Xdebug для пошаговой отладки

Давайте погрузимся.

1. Определите ошибки консоли браузера

локальная консоль браузера firefox

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

Если вы используете Chrome…

  1. Откройте DevTools, выбрав Дополнительные инструменты > Инструменты разработчика в меню браузера Chrome. Либо нажмите Ctrl/Cmd+Shift+I .
  2. Щелкните вкладку Консоль .
  3. Если есть какие-либо ошибки, они должны быть видны сейчас. Если нет, перезагрузите веб-страницу, чтобы сгенерировать их.
  4. Запишите тип ошибки, ее местонахождение и номер строки в консоли браузера.

Если вы используете Firefox…

  1. Откройте инструменты разработчика браузера, выбрав Дополнительные инструменты > Инструменты веб-разработчика в меню Firefox. Здесь также работает Ctrl/Cmd+Shift+I .
  2. Щелкните консоль вкладка Кроме того, вы также можете получить доступ к консоли напрямую через Дополнительные инструменты > Консоль браузера .
  3. Теперь все ошибки должны быть видны. Если нет, перезагрузите страницу.

Если вы используете Safari…

  1. Включите Инструменты разработчика, выбрав « Настройки» > «Дополнительно» в меню Safari. Option+Cmd+I — ваш друг.
  2. Установите флажок рядом с Показать меню «Разработка» в строке меню . Затем закройте диалоговое окно.
  3. Нажмите «Разработка» > «Показать консоль ошибок» . Та же сделка, что и выше.

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

перейти в папку сайта

2. Используйте Query Monitor для устранения проблем с производительностью сайта

Вы также можете выявлять и устранять проблемы с веб-сайтом непосредственно в WordPress. На самом деле, плагин Query Monitor — отличный выбор для отладки и, в частности, для выявления проблем с производительностью. Это создает полезную пару со встроенными локальными инструментами отладки и особенно полезна для выявления проблем со сторонними плагинами и темами.

Вы можете установить плагин, как и любой другой. Просто перейдите в « Плагины» > «Добавить новый » и найдите его по имени. Найдите его в списке и нажмите « Установить сейчас », затем « Активировать » после загрузки.

установить монитор запросов

Что Query Monitor может вам сказать

После установки плагина вы должны увидеть новый пункт меню в верхней части панели управления WordPress.

меню панели администратора монитора запросов

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

консоль монитора запросов

Помимо прочего, Query Monitor предоставит вам обзор производительности вашей страницы, в том числе:

  • Пиковое использование памяти. Этот инструмент показывает, сколько памяти используется для создания страницы в данный момент времени.
  • Время генерации страницы. Показывает, сколько времени требуется для создания страницы.
  • Время запроса к базе данных. Наконец, этот инструмент показывает, сколько времени потребовалось базе данных, чтобы ответить на запросы темы или плагина.

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

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

3. Настройка Xdebug и VS Code для отладки

Вернувшись в Local, вы можете использовать Xdebug различными способами для выполнения отладки локального сайта. Чтобы, так сказать, получить больше отдачи от затраченных средств, вы можете добавить к уравнению мощь VS Code.

VS Code — это редактор кода с открытым исходным кодом с расширенными инструментами и более интуитивно понятным пользовательским интерфейсом. Это делает процесс построчной отладки более интуитивным и легким для глаз.

Редактор кода Visual Studio Code vscode

На самом деле вы можете подключить VS Code к отладчику Xdebug Step Debugger для достижения большого эффекта. Вот как настроить его для использования внутри Local:

  1. Загрузите VS Code и установите его в соответствии с инструкциями разработчика.
  2. Загрузите и установите расширение отладчика PHP. В документации Local для этой задачи рекомендуется расширение PHP Debug.
  3. В Local щелкните Надстройки > Xdebug + VS Code .
  4. Нажмите «Установить надстройку» .
  5. После этого нажмите «Включить и перезапустить» .
  6. Откройте сайт в Local и перейдите на вкладку Utilities .
  7. Нажмите «Добавить конфигурацию запуска в VS Code» .
  8. VS Code запустится, после чего вы сможете начать процесс отладки.

Если вы не предпочитаете VS Code, вы можете использовать для этой задачи другой инструмент редактирования.

4. Настройка Xdebug и PhpStorm для отладки

Локальные надстройки xdebug и phpstorm

Другой вариант — использовать PhpStorm с Xdebug. Вы можете добавить его в Local через надстройку, и он будет работать в сочетании с Xdebug Step Debugger. Установка и настройка очень похожи на процесс, описанный для VS Code выше. Чтобы использовать его, выполните следующие действия:

  1. Скачайте и установите PhpStorm.
  2. В Local щелкните Надстройки > Xdebug + PhpStorm .
  3. Нажмите «Установить надстройку» .
  4. Опять же, включите и перезапустите после того, как это будет сделано.
  5. Откройте любой сайт в Local и нажмите « Утилиты» . вкладка
  6. Щелкните Добавить конфигурацию запуска в PhpStorm .
  7. Когда PhpStorm активен, установите точки останова, щелкнув полосу в определенной строке кода, где вы хотите установить точку останова.
  8. Нажмите Play , чтобы начать процесс отладки.

Если вам нужны дополнительные рекомендации по процессу отладки, всегда можно воспользоваться пошаговой отладкой.

5. Использование Xdebug для пошаговой отладки

Step Debugging — очень полезный инструмент и часть Xdebug, которая, по сути, помогает вам в процессе отладки. Он работает с VS Code и PhpStorm (а также со многими другими IDE и текстовыми редакторами), предоставляя подробные, но простые в использовании инструменты, шаги и протоколы отладки.

В Local вам не нужно ничего делать для настройки Xdebug — он включен по умолчанию автоматически. Хотя существуют более сложные инструкции по настройке, если у вас сложная среда тестирования (с одновременным участием нескольких систем), мы предполагаем, что вам просто нужно выполнить отладку в одной системе в одной установке Local на данный момент.

Чтобы использовать пошаговую отладку, вам действительно нужно выполнить шаги, описанные в предыдущих двух разделах. Эта функция работает как с VS Code, так и с PhpStorm. Как только все будет настроено, он автоматически установит точки останова и проиграет код один за другим. Это предлагает интуитивно понятный способ запуска вашего кода, просмотра ошибок и исправления их по мере их возникновения.

Отладка в Local Made Easy

Как видите, отладка в Local на самом деле довольно простой процесс, требующий минимальной настройки для начала работы. Основной инструмент отладки уже присутствует по умолчанию. Все, что вам нужно сделать, это настроить предпочитаемый вами текстовый редактор или IDE, настроить одну или две надстройки, и все готово. Конечно, вам нужно будет выполнить реальные исправления ошибок, чтобы привести ваш сайт в первоклассную форму. Но, по крайней мере, сам процесс отладки можно выполнить легко и с минимальными усилиями.

Какие инструменты для отладки в Local вы предпочитаете? Мы будем рады услышать ваши отзывы в комментариях ниже.