Firebug для Firefox — отличный веб-отладчик! Может очень многое

Содержание

1 Подробности

Firebug для Firefox – это специальное приложение, которое использует веб-мастер. Программа помогает устранить ошибки в коде, написанном на HTML, редактировать CSS.

Основные функции:

Файербаг сразу показывает на функцию, которая вызвала тот или иной баг.
Выдает предупреждение, если пользователь ввел правило для CSS или для скриптов Джава, которое не существует.
Отслеживает скорость загрузки страницы веб-сайта.
Просматривает HTTP-заголовки, AJAX-запросы.

Подробности

Разработчиком данного приложения является Джо Хьюит. Однако на сегодняшний день версии Фаерфокса выше 57 уже не поддерживают его. Теперь заместо был выпущен мощный инструмент Firefox Devtools, который встроен в расширенную версию браузера «Огненная лисица», выпущенную специально для веб-разработчиков.

Теперь как расширение Фаербаг не найти. Вместо этого пользователю разработчики предоставили мощный и плавный браузер FireFox Quantum. Скачать его можно с сайта разработчика Мозилла.

Процедура установки

Чтобы загрузить его пользователь делает следующие шаги:

Переходит по ссылке и попадет на страницу расширенного издания браузера специально исполненного для разработчиков сайтов (найти URL вы можете в конце статьи).
Кликнуть по синей прямоугольной кнопке.
Открыть загруженный файл.
Дождаться окончания инсталляции.

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

Использование

В использовании нет ничего сложного. Вызвать утилиту для веб-отладки можно с помощью сочетания клавиш Ctrl + Shift + I или единичного нажатия на F12.

Облегчена работа для вебмастера. Теперь не нужно совершать много действий: открывать расширение, изменяя в нем код, обратно переходить на страницу. У разработчика теперь находятся все инструменты под рукой.

Основные элементы управления открыть выйдет так:

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

Скачать Firefox Devtools

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

The story of Firefox and Firebug are synonymous with the rise of the web. We fought the good fight and changed how developers inspect HTML and debug JS in the browser. Firebug ushered the Web 2.0 era. Today, the work pioneered by the Firebug community through the last 12 years lives on in Firefox Developer Tools. Switch to the latest version of Firefox and see the very latest devtools updates.

Tips on making the switchFirebug ReleasesFirebug SourceBlog

There are too many contributors to count but here are the names that come to mind. Thank you for you work and passion for Firebug. It was not possible without you.

All Members

Jan ‘Honza’ Odvarko	Christoph Dorn
John J. Barton	Steven Roussey
Joe Hewitt	Sebastian Zartner
Steve Souders	Pedro Simonetti Garcia
Douglas Crockford	Harutyun Amirjanyan
Dion Almaer	Stampolidis Anastasios
Kevin Sawicky	Joe Walker
Rob Campbell	Farshid Beheshti
Azer Koçulu	Simon Lindholm
Curtis Bartley	Florent Fayolle
Hans Hillen	Jakob Kaltenbrunner
Kevin Decker	Belakhdar Abdeldjalil
Mike Collins	Alistair Laing
Mike Ratcliffe
Austin Andrews
Hernan Rodríguez Colmeiro

Translators

Leszek(teo)Życzkowski (pl-PL)	Dark Preacher (ru-RU)
markh (nl-NL)	Tiago Oliveira (pt-BR)
peter3 (sv-SE)	Diego de Carvalho Zimmermann (pt-BR)
AlleyKat (da-DK)	Alexandre Rapaki (pt-BR)
Hector Zhao, lovelywcm (zh-CN)	Juan Botías (es-ES)
Lukáš «lordfrikk» Kucharczyk (cs-CZ)	Álvaro G. Vicario (es-ES)
Michal Kec (cs-CZ)	Andriy Zhouck (uk-UA)
ReinekeFux (de-DE)	Hisateru Tanaka (ja-JP)
Benedikt Langens (de-DE)	Mohsen Shadroo (fa-IR)
Sebastian Zartner (de-DE)	Eduard Babayan (hy-AM)
l0stintranslation (it-IT)	Eduard Babayan (hy-AM)
gonzalopirobutirro (it-IT)	Tomaž Mačus (sl-SI)
alexxed (ro-RO)	Stoyan Stefanov (bg)
Nicolas Martin (fr-FR)	Alexander Shopov (bg)
Franck Marcia (fr-FR)	Kristján Bjarni Guðmundsson (is-IS)
gLes (hu-HU)	NGUYỄN Mạnh Hùng (vi-VN)
Xavi Ivars — Softcatalà (ca)	Bwah (hr-HR)
gezmen (tr-TR)	Sonickydon (el-GR)
eternoendless (es-AR)	David Gonzáles (es)

Try the new Firefox Quantum developer tools in Developer Edition or update to the latest release version. Inside you will find the latest tools like the first CSS Grid inspector and the JavaScript debugger.

Helpful tips on how to make the switch to Firefox Developer Tools

(Кликайте на вкладки выше, чтобы посмотреть скриншот каждой.)

Firebug интегрируется с браузером Firefox, чтобы замечательно обогатить инструментарий разработчика. Вы сможете редактировать, отлаживать и исследовать CSS, HTML и Javascript вживую, на любой веб-странице.

Подробно об Инструментах разработчика Firefox

Просто и доступно

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

Узнать больше…

Инспектируй и редактируй HTML

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

Узнать больше…

Построй супер-совершенный CSS

Вкладка CSS в Firebug расскажет Вам все, что нужно знать о стилях на странице, и если Вам что-то не очень нравится, можно сделать изменения, которые отобразятся сразу же.

Узнать больше…

Смотри на CSS метрики

Когда CSS-контейнеры не выстраиваются нужным образом — иногда сложно понять, почему. Позвольте Firebug быть Вашими глазами, и он измерит и покажет все сдвиги, margin, padding, рамки и размеры для Вас.

Узнать больше…

Мониторинг сетевых запросов

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

Как отключить JavaScript в разных браузерах

Узнать больше…

Отлаживай и профилируй JavaScript

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

Узнать больше…

Быстро находи ошибки

Когда что-то идет не так, Firebug мгновенно информирует Вас и дает детализированную полезную информацию об ошибках в Javascript, CSS и XML.

Узнать больше…

Исследуй DOM

Document Object Model — громадная иерархия объектов и функций. Firebug позволит Вам быстро находить нужные DOM-объекты и на лету редактировать их.

Узнать больше…

Выполняй JavaScript на лету

Командная строка — один из древнейших инструментов программиста. Firebug дает Вам старую добрую командную строку для javascript, дополненную некоторыми современными удобствами.

Узнать больше…

Логирование для JavaScript

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

Узнать больше…

документацияблог (англ.)обсуждения (англ.)открытый кодписьмо автору Firebug

Хотите использовать Firebug в IE, Opera или Safari?

Прочитайте это

Большое спасибо Jamey Boje за дизайн логотипа Firebug.

Firebug — зарегистрированная торговая марка Parakey, Inc. Оригинальный сайт http://getfirebug.com, перевод Ильи Кантора.

Для вопросов — forum.javascript.ruИспользуемые источники: