Привет. Сегодня хочу рассказать про дополнения к браузерам, необходимые каждому веб-разработчику. Всем известен FireBug — самое мощное и удобное дополнение для FireFox.Но Firebug ничем не сможет помочь при работе с IE, Оперой или Сафари.
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. Если проблем никаких нету — значок зеленый, а если есть проблемы — красный.Internet Explorer Developer ToolbarСкачать
Имеется встроенный зачем-то поисковик, пипетка, возможность изменять размер окна и, опять-таки, зачем-то возможность отсылать страницу другу на мыло. Хотя, может быть это и полезно. Но воспользоваться этой возможностью мне не удалось =(. Кроме этого имеется инспектор:
Способ испектирования кликом или наведением разработчиков не устроил: они придумали штуку поинтереснее. В DebugBar’e надо перетащить прицел на нужный элемент, чтобы увидеть его в дереве.Возможности редактировать CSS нету. Зато есть валидатор и встроенная консоль js.А если покопаться в настройках можно найти и такое:
И смешно и грустно.Известно, что в восьмой эксплорер будет встроен Developer Toolbar. Он будет похож на тот, который описывался в третьем пункте, но надеемся, что будет лучше.DragonFly для Opera
DragonFly встроен в Оперу, начиная с версии 9.5, поэтому устанавливать не надо. Для того, чтобы активировать Драгонфлай переходим в Инструменты → Дополнительно → Средства для разработчиков. А если по английски, то Tools → Advanced → Developer Tools.Сразу предупрежу, что DragonFly находится в стадии Alpha2, этим объясняются многие его глюки.• Возможности списком:• DOM инспектор;• Инспектирование кликом (опять-таки, мы не увидим отступов, как в FF);• Редактирование CSS;• Быстрый доступ к консоли ошибок.DF — что-то вроде отдельной страницы во фрэйме. Если вы его открыли, оно будет открыто для всех вкладок (в отличие от firebug’a). Поэтому перед инспектированием элемента надо выбрать из списка страницу, которую мы хотим просмотреть.К сожалению здесь, как и в IE Dev Toolbar не отображаются динамически создаваемые элементы. И вообще, когда мы инспектируем страницу, никакой js не запускается: ссылки и кнопки не нажимаются. Будем надеяться, что когда DragonFly подойдет к релизу, мы увидим все эти возможности.
Итак, на повестке дня:FireBug для Firefox;Web Developer Toolbar для Firefox;IE Developer Toolbar;DebugBar для IE;DragonFly для Opera;
