Возможно ли включить устаревшие расширения в Firefox?

Общий обзор встроенных средств отладки веб-страниц и веб-приложений

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

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

Firebug создан программистом Джо Хевиттом и, как мы уже говорили, предназначен для инспекции ошибок веб-страниц — разметки HTML, стилей CSS, сценариев JavaScript. Также при помощи этого расширения можно оценить проблемные места при загрузке страницы в браузер.

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

Основных режимов отладки шесть — это HTML, CSS, JavaScript, консоль, DOM и сеть. Для каждого из режимов предусмотрена в главном меню веб-отладчика своя собственная вкладка. Кстати, Firebug русифицирован.

Рассмотрим работу в каждом из режимов подробнее.

Отладка HTML. Инспектировать HTML-страницу при помощи Fireburg — одно удовольствие. Нажимаем в главном меню иконку со стрелочкой, наводим курсор на элемент веб-страницы, и тут же в окне HTML появится подсвеченный код этого элемента. И уже не нужно мучительно долго искать глубоко скрытый в коде проблемный элемент. Также в правом вспомогательном окошке появятся дополнительные сведения о стиле, расположении элемента и его свойствах DOM.

Содержимое подсвеченного элемента лёгким движением руки можно тут же отредактировать и сразу же увидеть произведённые изменения.

Поддерживается сворачивание («фолдинг») кода. Также «Огнежук» позволяет активно использовать кнопки Tab и «вверх-вниз». Tab используется для перемещения по атрибутам элемента при редактировании. А при помощи клавиш «вверх», «вниз» можно переключать значение атрибутов. То есть Firebug увеличит или уменьшит значение числового атрибута на 1, если нажать, соответственно, «вверх», «вниз».

Важным является специальная вкладка в дополнительном вторичном окне под названием «Макет». Каждый элемент веб-страницы содержится в последовательно вложенных контейнерах margin, border, padding. Вкладка «Макет» отражает в виде символических разноцветных прямоугольников сами эти контейнеры. Изменять их значения можно точно так же, как и значения других элементов html, и тут же видеть, как меняется при этом вид страницы.

Редактирование CSS. Ремонтировать стили CSS можно как во вторичном окне режима HTML, так и в отдельном собственном режиме. Редактирование CSS тоже очень удобное: здесь можно и нужно пользоваться клавишами «вверх- вниз». Это позволяет изменять не только значения селекторов CSS, но и сами селекторы, так как Firebug содержит полный словарь ключевых слов каскадных таблиц стилей.

Любое свойство CSS можно быстро отключить и обратно включить, нажимая появляющуюся слева при наведении курсора на CSS-свойство серенькую кнопку.

При наведении курсора на свойство цвета или изображения появляется маленькое окно просмотра этого цвета или картинки. Причём в случае изображения отображаются его размеры.

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

«Огнежук» демонстрирует график загрузки по каждому файлу. На графиках разными цветами будет отображаться время http-запроса, время получения данных, время ожидания данных.

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

Отладчик JavaScript. Firebug — это мощный отладчик для сценариев JavaScript. Для этой отладки существует специальный отдельный режим «Сценарии». Здесь имеется возможность устанавливать брейкпоинты одним кликом на номере строки кода. Причём брейкпоинты могут быть условные, то есть, например, срабатывать только при нажатии кнопки на странице.

При отладке во время точек останова в дополнительном окне будет демонстрироваться стек вызовов функций, что ждут возврата. А во вкладке «Наблюдения» дополнительного окна отобразятся значения объектов DOM.

Консоль. Очень классная вещь. Консоль Fireburg — это практически как bash в Linux. Представляет собой командную строку. Здесь можно набирать и выполнять команды JavaScript как по отдельности, так и целыми сценариями.

Причём консоль Firebug имеет собственные специальные команды. Например, имеется команда console.log, что похожа на printf в «си»:

>>> console.log("Hello, world!") Hello, world!

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

Режим DOM (Document Object Model). Объектная модель документа — это то, во что браузер внутри себя превращает загруженную веб-страницу. DOM — это программный интерфейс, позволяющий сценариям JavaScript производить изменения в видимом окне браузера. Окно этого режима Firebug содержит иерархию объектов веб-страницы и позволяет ими манипулировать в реальном времени на лету, не прибегая к услугам той же консоли.

И ещё одной главной фишкой Firebug являются расширения, которым стоит посвятить отдельную статью. Как и сам браузер Firefox, «Огненный жук» может увеличивать свои возможности за счёт дополнительных расширений, начиная с подсветки синтаксиса и заканчивая встроенным справочником HTML. Эта возможность расширений и делает на текущий момент Firebug беспрекословным лидером, по сравнению с другими браузерами.

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

MS Internet Explorer 8. Аналог Firebug в IE 8 по своему функционалу повторяет большую часть режимов расширения Firefox. Имеется режим HTML с фолдингом и CSS, позволяющий одним кликом выбрать нужный для редактирования элемент на странице, а также наблюдать за изменениями в реальном времени. Имеется дополнительная раскладка — аналог вкладки «Макет». Однако «юниксовые» клавиши tab «вверх-вниз» не задействованы.

Для отладки JavaScript есть соответствующие режимы «Сценарий» и «Профиль». Консоль тоже присутствует скромненько в дополнительной вкладочке. Однако команды console.log не поддерживаются. Возможно, пока не поддерживаются. И весьма досадно, нет режима «Сеть», позволяющего оценить скорость загрузки веб-страницы. Также нет удобного инструмента для инспекции DOM.

Однако есть в средстве разработки IE 8 переключение режимов обозревателя между движком IE 7 и IE 8. Для многих веб-дизайнеров это важная функция.

Apple Safari. Браузер Safari также может похвастать средством, аналогичным Firebug, причём более стильным по дизайну, чем неказистый IE 8. Имеется просмотр HTML, CSS, «Макета элементов». Но навигация и поиск нужного элемента исключительно внутри html-кода. Редактирование атрибутов найденного элемента тоже весьма примитивное без клавиш tab «вверх-вниз». Но имеется при этом просмотр и изменения свойств DOM элемента.

Режим «Сеть» присутствует. Присутствует отладка и профилирование JavaScript. И имеет место быть продвинутая консоль с автодополнением, а также командой console.log.

Google Chrome. Средство разработки в «Хромом» практически аналогично по внешнему виду аналогу из Apple Safari. В третьей версии «гуглобраузера» данная функциональность сильно урезана. Есть только просмотр кода, режим «Сеть» и консоль. Но можно сказать, что средства отладки Google Chrome и Apple Safari будут полностью идентичны и внешне, и внутренне, так как используют один и тот же движок WebKit.

Opera Dragonfly. «Стрекозоид» браузера Opera практически повторяет интерфейс «Огненного жука» с главным и дополнительным окном. Просмотр html-кода и стилей осуществляется в единой закладке DOM. Присутствует «фолдинг» кода. При этом в дополнительном окне присутствует и функциональность, обеспечиваемая клавишами tab и «вверх-вниз», как и в Firebug. Вкладка «Контейнер» носит только информационный характер.

Консоль присутствует и содержит командную строку, что позволяет выполнять сценарии JavaScript в интерактивном режиме. Имеется отладчик и логирование выполнения сценария. Однако отсутствует фича console.log.

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

Таким образом, альтернативы уступают в функциональности и удобстве Firefbug, но, как говорится в таких случаях, вполне сойдут для сельской местности. Первое же знакомство со встроенными в браузеры средствами отладки стоит однозначно на данный момент начинать с Firebug для Firefox.

Михаил АСТАПЧИК

61

• 24Аналоги программы
• 15Похожие программы

Firebug Editor Обзор

Предназначенный для веб-разработчиков, Firebug позволяет вам просматривать и редактировать код ваших веб-страниц в окне браузера. Он также позволяет вам просматривать компоненты HTML, CSS и JavaScript на вашей веб-странице, поэтому, если что-то не отображается должным образом — элемент находится не в том месте, текст не отображается так, как вы ожидаете, или фрагмент JavaScript не делает то, что должен — намного проще разобраться, что пошло не так, и исправить это. Надстройка, в частности, работает с CSS. Firebug позволяет сразу увидеть, какие правила CSS применяются к конкретному элементу. Тестирование различных правил больше не требует кропотливого изменения кода в редакторе, его загрузки в веб-пространство и обновления страницы каждый раз, когда вы хотите что-то попробовать. Вы можете ввести новый код в Firebug и сразу увидеть, как он повлияет на страницу, над которой вы работаете. Несмотря на то, что Firebug сам по себе является достаточно сложным, чтобы поддерживать свои собственные дополнения, расширяя его функциональность — обеспечивая информация, специфичная для такого пакета, как, например, Drupal, или добавление справочных материалов. Помимо того, что Firebug является инструментом разработки, он также может улучшить ваше понимание веб-программирования, позволяя вам детально просматривать код любого существующего веб-сайта. В отличие от команды «Просмотреть исходный код», которая дает вам лишь ограниченный обзор основных функций веб-страницы, Firebug предоставляет значительную информацию о каждом элементе, чтобы вы могли быстро получить представление о том, как был достигнут определенный внешний вид или функция. : Мощный бесплатный инструмент для веб-разработки, который также помогает глубже понять веб-программирование. Con: Не совместим с более ранними версиями Firefox. Заключение: Firebug является удивительно мощным дополнением для веб-браузера Firefox.

Читать описание

Программа	Firebug
Лицензия	Бесплатная
Исходный код	Открытый
Разработчик	Joe Hewitt
Официальный сайт

Firebug Firefox 57– расширение, которое служит для отладки страницы в режиме реального времени и просмотра исходного кода сайта. Изменения отображаются только на вашем компьютере, после перезагрузки все вернется к прежнему виду. Появление релиза расширения произвело переворот в веб-разработке. Ни один браузер не позволял проводить отладку на том уровне, на котором это делал Firebug.

Отладка html

Firebug показывает разметку html в реальном времени после всех трансформаций и подключения модулей. Инструмент помогает понять, что именно отвечает за отображение конкретного блока. Там же можно вносить изменения, параллельно наблюдая за тем, как ведет себя весь контент. Имеется возможность скопировать исходный код.

  Zenmate для Mozilla Firefox

Отладка CSS

Дает возможность посмотреть, какие стили принимает элемент. Отображены в порядке применения, overridden-свойства вычеркиваются. Если в параметре указана ссылка на изображение или цвет, то предпросмотр покажет его. Firebug Firefox 57 показывает ссылку на исходный файл, откуда принято это свойство. Дополнение подсвечивает все отступы, что дает понять, какие именно свойства нужно изменить, чтобы блок принял нужную позицию.

  Русификатор для Mozilla Firefox

Отслеживание сетевых запросов

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

Отслеживание сетевых запросов позволит оценить эффективность использования кэширования на сайте. Анализируйте HTTP-заголовки и мониторьте XMLHttpRequest c помощью Firebug Firefox 57

Мониторинг javascript

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

Основные достоинства:

• показ html кода «как он есть»;
• мощный отладчик javascript;
• изменение свойств элементов в реальном времени.

Поддерживаемая версия Firefox

Любые версии, старше Firefox 56, Firebug Firefox 57 не поддерживает

Mozilla Firefox 57 под названием Quantum вышла в ноябре 2017 года. Разработчики постарались над обновлением – «Лиса» получила новый интерфейс и стала работать гораздо быстрее предыдущей версии. Однако после обновления движка браузера многие дополнения перестали работать.

Одно из таких дополнений – Firebug. Это связано с тем, что начиная с Firefox Quantum в браузер был интегрирован новый одноименный движок.

К сожалению, аналогов Firebug для Firefox 57 нет. Однако по словам разработчика плагина, функционал слился со встроенным отладчиком кода Developer Tools и большинство функций Firebug доступны без установки сторонних аддонов.

Используемые источники:

• https://www.kv.by/archive/index2009391105.htm
• https://jpnsoft.ru/firebug/
• https://firefox-browsers.ru/firebug-dlya-mozilla-firefox-57.html