Отладка php в браузере firefox
Я решил переработать инструкцию, как отлаживать JavaScript в «Firefox DevTools», потому что среди знакомых фронтендеров слово DevTools, инструменты разработчика, стало синонимом «Chrome DevTools». На Хабре также — по запросу DevTools в релевантной выдаче на первых страницах упоминается только «Chrome DevTools». Я переживаю, что у начинающих фронтендеров сложится впечатление, что других инструментов — нет.
Да, к сентябрю 2021 года браузер Firefox опустился на 4-е место по популярности на компьютерах, его даже обогнал новый Edge. Саму Mozilla, кажется, мы тоже теряем.
Но мне также кажется, что это всё преждевременно. Что мы стали забывать про былые заслуги Firefox. Родоначальник инструментов разработчика Firebug появился в Firefox. Наглядный инспектор гридов и флексов первым появился в Firefox. Режим просмотра «как на мобильных» без открытых DevTools есть только в Firefox.
И, конечно, я вижу, как мы стали забывать, к чему привела монополия Internet Explorer. Кто-то и вовсе этого не застал. Монополия убивает конкуренцию и разрешает монополисту расхлябисто относиться к своему продукту. А один браузер — это монополия.
Я не призываю менять Chrome на Firefox. Я хочу, чтобы мы перестали списывать Firefox со счетов. Если вы пользуетесь Chrome, поддержите его конкурентов ради самого Chrome. Не обязательно деньгами. Достаточно в следующий раз, когда вы будете писать статью о чем-то, что есть во всех DevTools, упомянуть, как это работает в Firefox и Safari.
Знакомимся с отладчиком в Firefox DevTools
Используете для отладки JavaScript-кода только console.log ? В этом нет ничего постыдного. Отладка кода с помощью console.log — это просто, но область применения такой отладки ограничена. Логирование не поможет, если нужно проверить код здесь и сейчас или погрузиться в поисках ошибки в недры программы. В этих случаях вам нужен полноценный отладчик. Отладчик в браузере Firefox содержит всё, что нужно для поиска ошибок в коде. Изучение только основ отладчика позволит вам быстро находить ошибки в коде, и, возможно, сохранит одну-две клавиатуры, разбитые в приступе гнева «Да почему же ты не работаешь, ****!»
Знакомиться будем в процессе отладки простого приложения со списком дел. Конечно же, вам потребуется Firefox. Если браузер у вас не установлен, рекомендуем версию для разработчиков. Сперва взглянем на интерфейс отладчика. Запустите Firefox. Затем нажмите комбинацию клавиш ctrl + shift + I , или command + option + I в macOS. В открывшихся инструментах разработчика выберите вкладку «Отладчик».
Отладчик разделён на три части:
Слева список всех JavaScript-файлов открытой страницы.
По центру область предпросмотра.
Справа панель инструментов.
На панели инструментов можно выделить:
В самом верху кнопки для навигации по коду во время отладки.
Выражения для отслеживания — это набор значений, изменение которых мы хотим отследить во время отладки.
Стек вызовов — список всех вызванных функций до момента остановки во время отладки. Справа от названия функции указаны номер строки и имя файла, где она была вызвана.
Области видимости со списком всех доступных значений на момент остановки во время отладки.
Не пугайтесь незнакомых слов. Каждую часть отладчика и её назначение мы разберём далее. Пока что запомните, где что находится, и отправимся чинить сломанное приложение со списком дел.
Совет в тему
Часто перед публикацией сайта разработчики минифицируют JavaScript-код, чтобы уменьшить размер файла и ускорить загрузку страницы. Пользователю радость, но читать минифицированный код в отладчике невозможно. У Firefox есть решение! Если вы открыли файл с таким кодом, нажмите на кнопку <> под областью предпросмотра. Отладчик попытается превратить минифицированный код в нечто человекочитаемое и покажет результат в новой вкладке.
Давайте потренируемся! Специально для вас мы опубликовали версию приложения с минифицированным кодом:
Откройте инструменты разработчика ( ctrl + shift + I в Windows и Linux, command + option + I в macOS), далее «Отладчик».
Слева, в списке файлов найдите app.js .
Откройте его в области предпросмотра и попробуйте перевести в человекочитаемый вид с помощью отладчика.
Все основные браузеры теперь предоставляют инструменты для тестирования и отладки веб-сайтов на мобильных устройствах. В этой статье я рассмотрю предложения Firefox, а затем сравню их с Chrome и Internet Explorer.
Тестирование в адаптивном режиме Firefox
Самым простым способом тестирования адаптивного дизайна обычно было изменение размера окна браузера. Однако это не всегда практично или точно. Именно здесь Responsive Mode Firefox пытается помочь.
Доступный начиная с Firefox 15, адаптивный режим, также называемый отзывчивым дизайном, является режимом, специально созданным для тестирования мобильной версии веб-сайта.
Вы можете активировать адаптивный режим из записи Responsive Design View в подменю Web Developer главного меню Firefox (или меню Tools в некоторых ОС). Вы также можете использовать кнопку на панели инструментов разработчика или сочетание клавиш Ctrl + Shift + M (или Cmd + Opt + M в Mac OS). Отключите режим с помощью того же меню, сочетаний клавиш или клавиш или закрыв адаптивный интерфейс.
Изменение размера представления
Активировав Responsive Design View, Firefox изменит размер представления, но не окна. Как и при изменении размера окна, вы можете изменить размер представления с помощью мыши, используя элементы управления справа и снизу, а также нижний правый угол представления.
Эти элементы управления полезны, чтобы увидеть, как и когда ваш дизайн адаптируется к своему макету. Вы также можете использовать список предустановок в верхней части представления.
Этот список содержит несколько классических разрешений, таких как 320 × 480 пикселей или 768 × 1024 пикселей. Если вы не можете найти то, что ищете, вы можете определить собственное разрешение, отредактировав текущий выбранный размер (введите в раскрывающемся списке). Это сохранит новое разрешение в выпадающем списке предустановок.
Наконец, вы можете смоделировать изменение ориентации, нажав кнопку поворота в правой части списка.
Сенсорные события
Крайне правая кнопка в представлении «Адаптивный дизайн» позволяет сделать снимок экрана текущего представления, а рядом с ним находится кнопка «Имитация сенсорных событий».
С помощью этой кнопки вы можете преобразовать события мыши в события касания. Таким образом, если вы щелкнете мышью по представлению, Firefox не отправит событие щелчка мыши, а событие касания. Этот перевод может быть полезен, если ваш сайт или приложение требуют сенсорных событий.
Отладка вашего кода с помощью удаленной отладки
Удаленная отладка позволяет получить доступ к инструментарию разработчиков, но для мобильных сайтов.
Чтобы использовать удаленную отладку, вам нужно установить Firefox для Android . Вам понадобится USB-кабель для подключения вашего мобильного устройства к компьютеру. Обратите внимание, что, как и в адаптивном режиме, удаленная отладка появилась в Firefox 15.
Подготовка компьютера
Firefox использует ADB для создания соединения между компьютером и мобильным устройством, поэтому, во-первых, нам нужно установить ADB. В зависимости от системы, которую вы используете, существует несколько способов установки ADB, например, Ubuntu предоставляет пакет adb для установки, как и другие пакеты.
Далее нам нужно включить удаленную отладку в Firefox.
Откройте панель инструментов и панель « Настройки ». На этой панели вы найдете флажок « Включить удаленную отладку ». Установите этот флажок и перезапустите Firefox, если это необходимо.
Подготовка мобильного устройства
На устройстве Android нам нужно включить отладку по USB. Без этого компьютер и мобильное устройство не смогут общаться.
Чтобы включить отладку по USB, откройте настройки вашего мобильного устройства. Вы найдете соответствующий флажок в разделе «Параметры разработчика » этих настроек. Если у вас нет доступа к этим настройкам, вы можете получить доступ, нажав несколько раз на «Номер сборки » в разделе « О телефоне » в настройках вашего мобильного устройства.
Как и на вашем компьютере, вам нужно активировать удаленную отладку в Firefox для Android. Если вы используете Firefox 25 или более позднюю версию, установите флажок « Удаленная отладка » в разделе « Инструменты разработчика » меню «Настройки».
Если вы используете Firefox 24 или более раннюю версию и не хотите обновляться, введите «about: config» в строке URL-адреса. На этой специальной странице devtools.debugger.remote-enabled предпочтение devtools.debugger.remote-enabled и установите для него значение true , нажав кнопку « Переключить », если это необходимо.
Создание соединения
Теперь мы готовы создать наше соединение между компьютером и мобильным устройством. Обратите внимание, что вам не придется выполнять все описанные выше шаги каждый раз, когда вы хотите использовать удаленную отладку. Если вы не отключите его, единственными шагами, которые вам придется выполнять каждый раз, когда вы хотите создать соединение, являются следующие.
Запуск сервера
Начните с подключения мобильного устройства с помощью USB-кабеля. Откройте командную строку и запустите сервер ADB, если он еще не запущен с помощью следующей команды.
Вы убедитесь, что ваше устройство обнаружено ADB. Для этого введите следующую команду.
Вы должны увидеть список подключенных устройств, подобный следующему.
Создание соединения
Теперь мы перешлем сокетное соединение. Команда для ввода зависит от того, какую версию Firefox для Android вы используете.
Если вы используете стабильную версию Firefox для Android 35 или новее, введите:
adb forward tcp:6000 localfilesystem:/data/data/org.mozilla.firefox/firefox-debugger-socket
org.mozilla.firefox должен быть изменен на org.mozilla.firefox_beta если вы используете бета-версию, на org.mozilla.fennec_aurora если вы используете Aurora, или на org.mozilla.fennec если вы используете Nightly.
Наконец, если вы используете Firefox для Android 34 или более ранней версии, введите:
adb forward tcp:6000 tcp:6000
Подключение Firefox
Теперь вы готовы подключить инструменты разработчика Firefox к Firefox для Android. Для этого откройте меню Firefox и выберите пункт « Подключить… » в подменю « Веб-разработчик ».
Откроется новая вкладка с предварительно заполненной формой. Значения по умолчанию должны быть хорошими, поэтому отправьте форму, нажав кнопку « Подключиться ».
Вы сможете выбрать вкладку, которую хотите отладить. Нажмите на тот, который вы хотите, и вы готовы отладить его.
Делай что хочешь!
Выбор вкладки откроет новое окно, содержащее новый набор инструментов, посвященный вкладке, открытой в Firefox для Android. Помимо того, что цель этого набора инструментов не на вашем компьютере, инструменты одинаковы.
Это означает, что вы можете делать с этим набором инструментов все, что угодно, от просмотра и редактирования дерева DOM до отладки сценариев и изменения стилей. Например, вы можете проверить ваше соединение с помощью традиционного alert('Hello World!'); в консоли.
А как насчет других браузеров?
Как и на компьютере, разные браузеры дают разные результаты и разные ошибки на мобильных устройствах. Инструменты Firefox великолепны, но они совместимы только с Firefox и Firefox для Android.
Google Chrome имеет собственный адаптивный режим, доступный из инструментов разработчика. Как и в Firefox, вы можете установить конкретное разрешение, но список разрешений отсутствует. Вместо этого вы можете выбрать конкретное устройство (например, Google Nexus 5 или Apple iPhone 6). Вы также можете определить пользовательский агент или смоделировать тип сети, чтобы проверить, долго ли загружается ваш сайт в мобильных сетях.
Chrome дает возможность удаленной отладки Chrome для Android. Этот инструмент похож на Firefox, поскольку предоставляет набор инструментов, который вы любите, но на мобильном сайте. Способ включения и использования удаленной отладки в Chrome аналогичен тому, который мы используем в Firefox. Вы можете найти точные шаги на официальном сайте Chrome .
Internet Explorer
Internet Explorer имеет собственные инструменты разработки, некоторые из которых предназначены для мобильного мира. С помощью этих инструментов вы можете увидеть, что не так, если загрузка вашего сайта происходит медленно на мобильном устройстве. Как и в Firefox, вы можете симулировать другое разрешение и, как в Chrome, вы можете симулировать другую сеть. Кроме того, Internet Explorer позволяет моделировать конкретное географическое положение.
В браузере Microsoft нет такого инструмента, как удаленная отладка, но он совместим с weinre .
Какие у вас есть опыт и советы по работе с функциями удаленной отладки в веб-браузерах?
Техническому менеджеру в наборе программных проектов, в одной из моих обязанностей входит создание кода отзыва. Одна из вещей, встречается гораздо чаще, чем хотелось бы при выполнении обзоров отладки совершенного кода PHP. Поднимите руку, если вы сделали это:
Самый безопасный метод отладки требуется в настройке IDE, использовать такой инструмент, как Xdebug или Zend Debugger для выполнение кода. Это не всегда практично. Полностью настроить среду отладки, можно и с FirePHP.
FirePHP для безопасной отладки PHP
Настройка FirePHP
Если вы используете Firefox, установите FireBug для расширенного набора инструментов отладки веб-приложений, а затем установите расширение FirePHP.
Если вы используете Chrome, достаточно просто установить только одно расширение FirePHP4Chrome .
Основные регистрации с FirePHP
Следующий код демонстрирует, как включить библиотеку FirePHP и выполнить каждый тип входа.
Приведенный выше код просто включает библиотеку для FirePHP и вызывает различные методы ведения журналов. Есть несколько способов, чтобы вызвать методы в библиотеку, поддерживая чистую глобальную функцию процедурных вызовов, вызов статического метода, и полностью создан вызов объекта. Я использую статические методы, потому что я вообще хочу использовать FirePHP только в одну линию для отправки отладочной информации, и хочу сделать это быстро!
Ниже вы увидите скриншоты с выходом для обоих Firefox и Chrome.
Выход для обоих браузеров Firefox и Chrome
Работа с FirePHP
Пример
Вот пример, чтобы убедить вас использовать FirePHP:
Кэш становится недоступным
Заключение
Самый безопасный способ для отладки PHP кода является использование отладчика среды созданного в IDE. Тем не менее, для более быстрой отладки, а также регистрацию уровня приложений, FirePHP может играть важную роль.
Typically, there are two main ways of debugging server-side code: you can utilize an Integrated Development Environment (IDE) with a built-in debugger or log and perform your debugging processes in a web browser.
This article shares an elegant, simple, and more maintainable way of debugging Ajax apps via the web browser (more specifically for the Mozilla Firefox browser). You’ll learn the basics of leveraging Firefox in conjunction with Firebug and FirePHP to implement FirePHP libraries on web apps and logging messages in the Firebug console.
A Brief Introduction
When Ajax techniques became popular, developers faced a new problem: how can we debug Ajax requests and responses efficiently for complex web applications? If using a debugger was hard enough with the RESTful model, triggering an Ajax-specific request is a pain and a bit more difficult; dumping logs and information pertaining to those Ajax operations had to be done using JSON or XML.
This makes FirePHP ideal not only for debugging your Ajax requests, but also your entire PHP codebase.
So, what is FirePHP?
What Do I Need to Get Started?
If you don’t have all of the above applications installed on your machine, click on their link to learn about how to download them for your particular system.
Installation of the three things above is a straightforward process. FirePHP can be a little tricky to install if you’ve just recently started learning about web development, but there’s good documentation out there about it.
This article is about using FirePHP, so I’ll let you handle the installation part (though feel free to ask in the comments – we’d be happy to help if you encounter issues).
A Couple of Tips
Once you’ve installed FirePHP, and included it in your web application, you are ready to debug and log data. But first, I’d like to share two helpful tips I’ve learned:
You have to disable FirePHP when the site goes live or you will risk exposing sensitive information to anyone that has Firebug/FirePHP installed (we’ll talk about how to do this later down the article).
And then just a general tip for Firebug/FirePHP users: it’s also a good idea to disable or suspend Firebug and FirePHP when you’re just browsing the web because they can really slow down some websites and web applications (such as Gmail, for example).
Getting Started with FirePHP Logging
This is the fun part where we start logging messages and reviewing the basic logging functions.
One thing to note is that, just like PHP, which (at least for PHP4 and PHP5) is a “pseudo object-oriented” language, you can use FirePHP in a procedural or object-oriented (abbreviated OO from now on) manner.
I prefer the object-oriented techniques and I encourage you to use the same pattern as it is considered the most popular and most modern approach to building apps.
The OO API allows you to instantiate a Firebug object to use it or to call its static methods directly. I’m a lazy guy and because static methods are more terse and require less typing, that’s what I use.
Instantiating the OO API Object
In your script, you can use the following code block to create the FirePHP object ($firephp).
OO API with Static Methods
This is the format for calling static methods in your scripts.
The Procedural API
Here’s how to use FirePHP’s Procedural API:
We will not get into any detail about the benefits and coding style of each API, I’ve included them here only so you see what options are available for you. In other words, I don’t want to start a flame war about which procedure is better – it’s up to you to decide and I’ve noted my preference.
Logging Messages and Information in the Firebug Console
Let’s talk about logging messages in the Firebug console (remember, this will only work if you’ve configured your app for FirePHP).
Examples of Basic Logging Calls
If you are ad-hoc debugging a bug, the following examples are what you’ll be interested in utilizing.
This will print a string that you pass to it onto the Firebug console. Using the above example results in the following message:
Passing an array (no more for loops or print_r() in your scripts) outputs the content of your array. The above example will result in the following message in the Firebug console:
Tip: when you hover your mouse on logged variables in the Firebug console, an info window will appear in the web page containing all of its elements. It’s a nifty feature, don’t you agree?
Logging an Information Message
Here is an example of logging information messages using the info method.
This is the message it logs in your Firebug console:
Logging a Warning Message
Here is an example of logging a warning message.
This is the message it logs in your Firebug console:
Logging an Error Message
Here is an example of logging a warning message using the info method.
Here’s what an error message looks like in the Firebug console:
Enabling or Disabling FirePHP Logging
When your site goes live, you can (and should) disable FirePHP logging. Call the following line of code on the first lines of your script.
What’s great about this is that you can leave all of your FirePHP code in your scripts for later use – just pass either true or false when you want to turn logging on or off.
If your application uses a “config file” to keep track of global settings, it is advisable to set a configuration option to enable or disable it.
Conclusion
First, here’s a screen capture showing all of our messages in Firebug all at once (I ran it sequentially).
In this article, we covered the very basics of using FirePHP to help you debug and gain information about your PHP/Ajax applications easier and through the web browser. I hope that this results in you becoming convinced that you should explore your debugging options outside of “old-school” techniques such as using echo or print on top of your web page layout to see what a variable or array contains. Using FirePHP is so easy and convenient, and gives you much more options and data for debugging purposes.
In a future article, I’ll be covering more complex features of FirePHP and using Firebug to make this simple debugging tool a more robust and fully-featured logging framework.
So stick around, don’t forget to subscribe to the Six Revisions RSS feed so you get a note when that article is posted. * Article edits by Jacob Gube
Related content
WebFX Careers
Join our mission to provide industry-leading digital marketing services to businesses around the globe - all while building your personal knowledge and growing as an individual.
Читайте также: