Cредства разработчика в web-браузерах

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

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

• FireBug для Firefox;

• Web Developer Toolbar для Firefox;

• Средства разработчика в IE;

• DebugBar для IE;
• Инструменты разработчика в Google Chrome;

• DragonFly для Opera;

• WebInspector для Safari.

   Всем известен FireBug — самое мощное и удобное дополнение для браузера FireFox. Для браузеров Internet Explorer, Opera, Safari и Google Chrome существует упрощённый вариант — Firebug Lite. Он представляет собой JavaScript-файл, который необходимо включить в отлаживаемую HTML-страницу.

Firebug для Firefox (версия 1.5.0)

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

Firebug — это дополнение (add-on) для Firefox.

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

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

• Инспектирование и редактирование динамически изменяемого HTML;

• Редактирование CSS на лету;

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

   Можно долго рассказывать про эти возможности в деталях, но я думаю, что они всем нашим читателям известны. Firebug настолько популярен, что даже для него или скорее с использованием его начали делать дополнительные плагины. Самые известные из них “Yslow” и “Page Speed”. Оба направлены на исследования скорости загрузки страниц сайта. Выводят кучу полезной информации от простой статистики какой из элементов и сколько времени загружался, до советов с чего надо начать оптимизацию кода для улучшения показателей. Yslow создали парни из Yahoo, а Google подсуетился с Page Speed.

Web Developer Toolbar для Firefox (версия 1.1.8)

   Еще одно полезное дополнение к Firefox-у. Выглядит оно в виде тулбара.

Пройдемся по пунктам:

Отключить

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

Cookies

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

CSS

Самая полезная хотя и не уникальаня фишка Developer Toolbar’a — редактирование CSS на лету. Кроме этого есть возможность просматривать css, запрещать, использовать модель.

Формы

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

Графика

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

Инфо

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

Разное

Самая часто используемая функция — удаление личных данных типа кэша. Кроме этого здесь доступны функции Линейка, Лупа и Направляющие, которые могут быть полезны чтобы подровнять шаблон. Есть редактор HTML. Постоянно что-то попадает сюда новенькое.

Контуры

Выделение разных элементов страницы — таблиц, заголовков, ссылок, фреймов, блоков.

Размеры

Позволяет изменять размер окна браузера под какие-либо стандартные расширения экранов.

Инструменты

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

Код

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

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

Настройки

Собственно настройки самого тулбара.

Средства разработчика в Internet Explorer (версия IE8)

   Когда берешь в руки это Средство разрабочика от ІЕ8 (или ІЕ9), то первое что хочется сделать это, сравнить его с Firebug-ом - настолько похожи у них функции. Сделаем это в отдельной статье позже.

  А пока в кратце. Возможно в нем есть некоторые возможности, которых нету у Firebug. Быстрее всего разработчики этого швейцарского ножа для ИЕ8 тщательно изучили спрос на функции, которыми обладает Firebug и Web Developer Toolbar в Firefox. Как и в Firebug здесь есть возможность инспектировать элемент простым кликом. Но, если в Firebug мы сразу можем увидеть padding’и и margin’ы, то здесь такой возможности нету. Кроме того IE Developer Toolbar не обновляет дерево элементов динамически, как это делает Firebug. И знакомые опции — изменение css на лету, возможность запретить CSS и изображения, возможность быстро очистить кэш и поиграть с куками, быстрый доступ к валидации. Здесь есть встроенный вьювер палитры цветов (color picker), который позволяет получить любой цвет со страницы с помощью пипетки.

DebugBar для IE (версия 5.2.2)

   Трудно сказать, но видимо кто-то настолько любил IE, что не смог вынести долгое время отсутствия в нем Средств разработчика. Вот и появился на свет DebugBar для IE.

   DebugBar - плагин для Internet Explorer, который представляет собой полезный инструмент для веб-разработчиков, позволяющий контролировать код страницы. Просмотр всех Javascript скриптов со страницы. Просмотр используемых cookies с текущей загруженной страницы. Просмотр информации о загруженных графических объектах. Просмотр внешних Javascript и CSS файлов прикрепленных к документу и т.д. Плагин Debugbar состоит из двух частей: Toolbar + Explorer bar. Обе включаются из меню View. Просмотрев дерево сайта, вы сможете редактировать теги и атрибуты листов стилей на лету, во время проверки кода веб-страницы. Также вы сможете провести анализ на валидность кода HTML, с помощью панельки HTML Validator, и оптимизировать его или исправить какие-либо ошибки напрямую из данной программы. С помощью данного инструмента вы сможете полностью проанализировать весь код вашего веб-сайта.

Возможности плагина:
- Меню настройки программы и проверки обновлений
- Кнопка быстрого переключения на основную панель программы
- Оповещение об ошибках кода JavaScript
- Отправка скриншота веб-страницы по электронной почте
- Цветовая пипетка, позволяющая вам узнать шестнадцатеричный код цвета любого пикселя веб-страницы
- Изменение размера окна браузера
- Увеличение масштаба веб-страницы
- Просмотр исходного кода
- Просмотр исходного кода MSHTML
- Просмотр кодового дерева веб-страницы
- Просмотр оригинального исходного кода страницы
- Просмотр вкладок атрибутов
- Редактирование вкладок атрибутов
- Просмотр HTTP и HTTPS заголовков
- Просмотр кукисов веб-страницы
- Проверка HTML кода для главной страницы и страниц, находящихся в фреймах
- Список всех функций javascript
- Просмотр функций кода JavaScript
- Запуск кода JavaScript в загруженной странице
- Получение информации о загруженной веб-странице.

Раз плагин то устанавливается как дополнительная панель к браузеру.
Инспектор выглядит так:

Чтобы увидеть элемент в дереве на него надо перетащить прицел. Возможности редактировать CSS нету. Зато есть валидатор и встроенная консоль js. По все вероятности этот плагин свое прожил.

Инструменты разработчика в Google Chrome (версия 15.0.874.102)

   Хром появился на свет в продвинутом виде, и у него сразу были, пусть и кривые, но все же средства для разработчиков. Заявка была. Развитие пошло.
Теперь это уже довольно внушительный список:
• Elements
• Resources
• Network
• Scripts
• Timeline
• Profiles
• Audits
• Console

   Для того, чтобы проинспектировать какой-либо элемент, на него надо нажать правой кнопкой и в контекстном меню выбрать «Просмотр кода элемента». Либо, вы не поверите, нажатием на F12 ! Знакомая клавиша, не правда ли ?) Назначение вкладок очень похоже, чай ребята тоже не с нуля начинали. На вкладке Resources можно просмотреть ресурсы загружаемой страницы.

А на в вкладке «Network» мы можем увидеть следующее:

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

Особого внимания заслуживают: Timeline и Audits. Вкладка Timeline  позволяет вести запись вашего поведения на странице. Могу и ошибаться, все фичи бурно развиваются.

Audits работает примерно как YSlow и Page Speed, выводя отчет с рекомендациями.

Разработчики Хрома вовремя сообразили что успешность Фаерфокса во многом основана на использовании расширений. Поэтому они не стали выдумывать что-то новое а сразу же внедрили эту возможность и в Хром. Вот здесь описаны лучшие 15 расширений Хрома именно для разработчкиа.

Opera-й и Safari пользуюсь редко поэтому про эти браузеры материал полностью заимствован со стороннего ресурса.


DragonFly для Opera

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

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

• DOM инспектор;

• Инспектирование кликом (опять-таки, мы не увидим отступов, как в FF);

• Редактирование CSS;

• Быстрый доступ к консоли ошибок.

DF — что-то вроде отдельной страницы во фрэйме. Если вы его открыли, оно будет открыто для всех вкладок (в отличие от firebug’a). Поэтому перед инспектированием элемента надо выбрать из списка страницу, которую мы хотим просмотреть.

К сожалению здесь, как и в IE Dev Toolbar не отображаются динамически создаваемые элементы. И вообще, когда мы инспектируем страницу, никакой js не запускается: ссылки и кнопки не нажимаются. Будем надеяться, что когда DragonFly подойдет к релизу, мы увидим все эти возможности.

Web Inspector в Safari

   Для того, чтобы включить в меню Сафари пункт «Разработка», необходимо в настройках (закладка «Дополнительно») включить соответствующий пункт:

В меню «Разработка» нам доступны следующие функции:

Давайте рассмотрим в деталях веб-инспектор:

По умолчанию инспектор открывается в режиме просмотра HTML. Но его можно переключить в режим просмотра DOM. Для этого на верхней плашке имеется переключатель. При наведении на элемент в инспекторе, он будет подсвечен на самой странице. Увидеть отступы, изменить разметку или CSS на лету или увидеть динамические изменение в DOMe на лету, как в FireBug нельзя. Зато, согласитесь, выглядит весьма мило. Если есть желание работать с инспектором в окне браузера, можно нажать на кнопочку в нижнем левом углу.

Еще в сафари доступна такая функция, как «Шкала времени сети», (кнопка «Network» в инспекторе):

Наглядно можно увидеть, когда и как долго грузятся файлы. Также можно просмотреть заголовки запросов, но само содержимое просмотреть, к сожалению, нельзя.