VDS Хостинг для Ваших проектов

Инструменты веб-разработчика в Firefox

Январь 16th, 2014 Рубрики: Браузеры и расширения, Интернет

Раньше я уже писал о стандартных инструментах для разработчиков, которые предоставляет браузер Google Chrome да и собственно все на движке Chromium. И ещё с тех пор планировал написать о таковых в браузере Firefox, кстати любимый многими веб-мастерами. Во многом предоставляемые этими двумя мегабраузерами средства для разработчиков схожи. Кроме того, в этой статье будут вкратце рассмотрены два расширения, которые должны быть в арсенале каждого веб-мастера: Firebug и Live HTTP Headers. Так что переходим сразу к делу.

В предыдущих версиях Firefox стандартных инструментов таких как в Хроме не было, поэтому приходилось применять Firebug, который собственно всё компенсировал. Теперь все доступные инструменты находятся в меню Инструменты->Веб-разработка.

В основном они по своему принципу работы и структуре схожи с Хромовскими. Поэтому если у вас нет ещё опыта работы с ними, то советую почитать эту статью, а также посмотреть видео. Основное отличие к сожалению далеко не хорошее – нет просмотрщика и редактора DOM-объектов, так что Firebug всё равно нужен. Т.е. если в Опере и Хроме можно посмотреть (и даже редактировать) некоторые свойства выбранного элемента, то тут предоставляются только общая схема размеров элемента и редактор стилей CSS. Для верстальщика этого вполне достаточно, а вот для программиста клиентского JavaScript – нет.

Консоль ошибок Firefox

Сначала рассмотрим самый простой, но и очень важный и полезный – консоль ошибок. В списке ошибок вы можете наблюдать ошибки компиляции, например когда javascript-код написан неправильно, или случается runtime error. Очень быстро покажет, где что не работает. Предупреждения не являются ошибками, однако по возможности следует придерживаться рекомендаций, которые там приведены. А в разделе «Сообщения» записываются сообщения, которые пишутся скриптом через console.log() Это полезно для отладки скриптов, просмотра переменных и контрольных точек.

консоль ошибок в Firefox

Веб-консоль Firefox

Другой вид консоли Firefox – веб консоль. С её помощью можно видеть последовательность запросов на сервер и их ответы, время ответа. Почти ту же информацию можно видеть в мониторе HandyCache. А кроме этого здесь в консоли вы можете выполнять команды Javascript, относящиеся к контексту текущего окна. В других браузерах инструкции яваскрипт можно выполнять из адресной строки через протокол javascript: однако в Firefox это запрещено ещё издавна, поэтому консоль приходит на помощь. Вызвать её можно через Ctrl+Shift+K. Однако здесь есть неприятный нюанс. Закрыв консоль, она просто скрывается хотя фактически работает и после этого быстродействие резко падает, пока не закрыть эту вкладку. Если попробовать снять флажок из меню, то ничего не получается. Такой странный глюк имеется и сохраняется. Если знаете как по настоящему выключить веб-консоль, пишите в комментариях – буду рад дополнению, самому интересно =)

Инспектор DOM и редактор стилей

Дальше рассмотрим интерфейс инспектора DOM и стилей. Чтобы просмотреть реальную структуру документа и получить сведения о нём, можно щелкнуть правой кнопкой мыши на нём и из контекстного меню выбрать «Исследовать элемент». Или сразу запустить с помощью комбинации клавиш Ctrl+I.

В самом низу видим положение выбранного элемента в общей структуре: кто его родитель, как к нему добраться и т.п. Активировав самую левую кнопочку с изображением курсора мыши, можно выбирать для анализа нужный элемент из страницы щелчком мыши (события click при этом игнорируются). Включив режим HTML документ показывается в его древовидной структуре элементов с выделенным инспектируемым, причём в режиме реального времени. Любая модификация, произведённая скриптом будет здесь отражена. В исходном же коде страницы (Ctrl+U) эти изменения конечно же не видны и представляется лишь изначальный каркас страницы. В этом окне можно на лету редактировать HTML код, изменяя, удаляя, добавляя атрибуты, – и видеть сразу же изменения. С помощью кнопки «Стиль» справа можно отобразить список стилей, применённых прямым или косвенным путём к данному элементу (секция "Правила"). Эти правила можно редактировать, временно включать-отключать и наблюдать изменения. Кстати щёлкнув по месту определения CSS-правила (на сером фоне), открывается встроенный отдельный редактор стилей. А вот секция "Вычислено" показывает финальные работающие CSS-значения с учётом возможных перекрытий. Кстати в самых последних версиях включена ещё вкладка "Box Model", показывающая конечные размеры элемента.

инструмент инспектор DOM в Firefox

Как видим, имеющихся в Хромоподобных брауерах вкладок с сетью, загруженными компонентами, скриптами, отладчиков нет. Всё это направлено в основном на верстальщика. Кстати закрывается инспектор тем же сочетанием, что и открывается, а кнопочки-крестика не нашёл я =)

Расширение Firebug

В этой части я хочу вкратце объяснить как работать с Firebug. Запустить его можно как и DOM-инспектора выше: из контекстного меню элемента выбираем «Инспектировать с Firebug». Также его можно запустить по F12. Загружается панель Firebug, которая очень схожа по строению и функциям с таковой стандартной у Хрома. Работа с DOM-деревом и стилями аналогична выше рассмотренной в стандартном средстве (вкладки HTML,CSS и панель справа). Однако в правой панели уже доступны и Макет, содержащий каркас элемента со всеми отступами и его реально вычисленными размерами, и DOM, где имеется перечень свойств и методов. Доступные для записи свойства можно редактировать.

Следует выделить вкладку «DOM», где представлен список всех объектов на вкладке. Самым верхним и главным здесь является объект window. Ну и естественно доступна вся иерархия объектов.

Вкладка «Сеть» предназначена для анализа сетевого трафика во время загрузки страницы. Аналогична вкладке« Network» у Хрома.

На вкладке «Cookies» будут показаны все установленные куки относящиеся к открытому сайту.

расширение firebug

Расширение Live HTTP Headers

Тоже весьма полезное расширение для вебмастеров. С его помощью вы можете посмотреть заголовки ответа сервера, а также заголовки, которые были отправлены на сервер. Это расширение интегрируется в браузер и в окне "Информация о странице" появляется ещё одна вкладка «Заголовки». На ней указаны отправленные браузером заголовки для текущей страницы и ответ от сервера. Обратите внимание, что заголовки для загрузки компонентов страницы не показываются.

расширение live http headers

А вот если надо узнать список всех заголовков, включая и запросы таких компонентов, как скрипты, изображения, а также отслеживать запросы производимые в реальном времени по AJAX-технологии, то надо открыть отдельное окно этого дополнения из меню «Инструменты»->Просмотр HTTP Заголовков. И с этого момента любые запросы из сервера и на сервер будут протоколироваться на вкладке «Запросы» (ответы сервера) и их можно сохранить в файл, или просто проанализировать.

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

Итак я рассмотрел стандартные инструменты разработчика Firefox, которые как видим немного скуповаты, особенно что касается средств для программистов. Однако эти недостатки полностью покрываются двумя дополнениями для этого браузера: Firebug, который способен полностью заменить стандартные средства и их расширить, и как пользоваться им, и Live HTTP Headers, которое очень помогает в анализе заголовков и отладке работы сервера. Пожалуй на этом всё. Если есть вопросы или дополнение к статье, комментарии к вашим услугам.

Firebug установить в Firefox
Live HTTP Headers установить в Firefox
Понравился пост? Поделись с другими!
Теги: , , , ,
Комментариев пока нет.

Написать комментарий

    Счетчик любви Google b2bbonbone