Но Firebug ничем не сможет помочь при работе с IE, Оперой или Сафари.

Итак, на повестке дня:

* FireBug для Firefox;
* DragonFly для Opera;
* WebInspector для Safari;
* Средства для разработчиков в Google Chrome.

Есть, конечно, и другие — о них я обязательно упомяну.

Firebug для Firefox

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

Firebug — это дополнение для Firefox, а значит его надо скачать с сайта Firefox add-ons и установить.

Для того, чтобы вызвать файербаг, достаточно нажать F12.

Возможности этого дополнения:

* Инспектирование и редактирование динамически изменяемого HTML;
* Редактирование CSS на лету;
* Отладка JavaScript, командная строка для выполнения скриптов;
* Мониторинг сетевых запросов — можно увидеть размеры и время загрузки файлов и скриптов, заголовки запросов;
* Анализатор DOM.

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

Кроме самого firebug’a вам может пригодится полезная примочка к нему — FireCookie, c помощью которой (сюрприз :-) можно просматривать и изменять куки.

Web Developer Toolbar для Firefox

Еще одно полезное дополнение к Огнелису. Выглядит оно так:

Разберем по пунктам.

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

Cookies
Полезная опция для работы с куками: их можно просматривать, удалять, запрещать и добавлять.

CSS
Это меню хранит самую крутую фичу Developer Toolbar’a — редактирование CSS на лету. Кроме этого есть возможность просматривать css, запрещать и т.д., и т.п. На мой взгляд здесь очень полезно наличие быстрых клавиш (CTRL+SHIFT+C, к примеру, позволяет сразу перейти к просмотру стилей страницы)

Forms
Все для работы с формами: показывать пароли, показывать информацию о формах, конвертировать методы форм (GET -> POST и наоборот) и многое другое. Полезная функция «Populate Form Fields» для автоматического заполнения полей формы (например, при тестировании сайта, когда функция запоминания паролей в FF отключена. В остальном не вижу в этом пункте ничего полезного.

Images
Здесь есть полезная функция отключения изображений — чтобы посмотреть как выглядит ваш сайт без картинок. Картинки можно обвести, показать их размеры, показать alt-атрибуты.

Information
В этом меню очень много опций. Может быть полезной функция отображения атрибутов class и id на странице. Кроме этого интересен пункт «View Color Information» — чтобы быстро получить информацию о цветах, которые используются на странице. «View document size» — просмотр размера страницы. «View Response Headers» — просмотреть заголовки страницы.

Miscellaneous
Самая часто используемая функция — очистка кэша. Кроме этого здесь доступны функции «Page ruler» — линейка, «Page Magnifier» — лупа и «Line guides» — несколько линий, которые могут быть полезны чтобы подровнять шаблон.

Outline
Выделение разных элементов страницы — таблиц, заголовков, ссылок, фреймов, блоков. Resize
Позволяет изменять размер окна браузера под какие-либо стандартные расширения экранов. Tools
Здесь хранятся фичи для валидации страниц. Как локальных, так и внешних. Удобный и быстрый доступ к валидации HTML, CSS, и прочего. Для валидации HTML можно использовать клавосочетание CTRL+SHIFT+H.

View Source
Просмотр исходного кода. Возможность просмотра в внешнем приложении, просмотр сгенерированного кода.

То, что находится в правом углу мне нравится больше всего. Это быстрый валидатор HTML, CSS и индикатор ошибок JS. Если проблем никаких нету — значок зеленый, а если есть проблемы — красный.

Opera with DragonFly

DragonFly встроен в Оперу, начиная с версии 9.5, поэтому устанавливать не надо. Для того, чтобы активировать Драгонфлай переходим в Инструменты → Дополнительно → Средства для разработчиков. А если по английски, то Tools → Advanced → Developer Tools.
Сразу предупрежу, что DragonFly находится в стадии Alpha2, этим объясняются многие его глюки.

Возможности списком: