Показать Меню
falbar Расширение firebug

Обзор расширения Firebug

Расширение firebug

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

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

Сейчас почти у каждого браузера появился свой аналог, но, как по мне, они менее удобны, чем Firebug. Вот что нам предлагают взамен браузеры:

В Safari используется веб-инспектор – Ctrl+Alt+I:

Safari веб-инспектор

Opera использует Dragonfly – Ctrl+Shift+I:

Opera Dragonfly

Internet Explorer – F12:

Internet Explorer

Google Chrome – F12:

Google Chrome

И вот как выглядит сам Firebug, как видно визуальные отличия незначительны – F12:

Firebug

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

Живет Firebug на официальном сайте getfirebug.com. После скачивания и установки расширения, его можно визуально разделить на семь основных частей: консоль, HTML, CSS, JavaScript(сценарии), DOM, сеть, cookies.

Консоль

Наверно самым большим достоинством Firebug являться его консоль, и это неголословное заявление. За время работы я пользовался консолью и у сафари, и у оперы, и у хрома, но ощутить легкость и удобство работы смог именно с этой. Фактически консоль Firebug позволяет отследить все изменения, которые происходят на странице, в том числе и ajax запросы.

Консоль firebug

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

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

HTML и CSS

Работая с HTML и CSS через расширение, мы можем легко управлять структурой и стилями документа. Главное достоинство то, что не нужно каждый раз перезагружать страницу. При таком подходе удобно верстать и редактировать документ, хотя если требуется, чтобы исходный файл менялся, то можно Firebug допилить патчами.

Ещё одна полезная вещь это поиск любого элемента на странице для этого нам нужно нажать на «исследовать элемент» и выбрать интересующий нас фрагмент. Firebug покажет нам его размещение в HTML структуре, а также все относящиеся к нему стили.

HTML и CSS в firebug

Отладчик JavaScript

Когда дело доходит до применения динамики к странице, то с этим возникает множество ошибок. Firebug помогает отследить их, гораздо быстрее, чем «в-ручную» ковыряться в коде. В режиме отладки JavaScript, есть очень удобная возможность установки брейкпоинтов (они могут быть условными). При отладке во время остановки на точке в дополнительном окне будут видны стеки вызванных функций, что ждут возврата. А во вкладке «Наблюдения» дополнительного окна отобразятся значения объектов DOM.

Режим сети

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

Режим сети в firebug

DOM

Объектная модель документа – это то, во что браузер внутри себя превращает загруженную веб-страницу. DOM – это программный интерфейс, позволяющий сценариям JavaScript производить изменения в видимом окне браузера. Окно этого режима содержит иерархию объектов веб-страницы и позволяет ими манипулировать в реальном времени – «на лету», не прибегая к услугам той же консоли.

Cookies

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

Cookies в firebug

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

Подписаться на обновления

Комментариев еще не оставлено