Расширение Web Developer для Mozilla Firefox имеет в своем составе массу возможностей и инструментов, является своеобразным швейцарским ножом для веб-мастеров.

Автор: Teachvideo.ru
Продолжительность: 5 минут 29 секунд
Разрешение: 800х600
Размер видео файлы: 3.20 Мб
Профессиональная озвучка урока.

Описание плагина WebDeveloper

По названию плагина (WebDeveloper) не сложно догадаться, что он создан в помощь веб-разработчикам. Предназначено данное расширение для целей веб-тестирования. Плагин WebDeveloper позволяет посмотреть страницу в разных разрешениях, с картинками или без, включить/выключить CSS, проконтролировать "куки", проверить страницу на соответствие стандартам посредством бесплатных сетевых сервисов, и многое другое. Некоторые функции WebDeveloper можно использовать не только в целях разработки - например, есть функция Forms - Show passwords, которая показывает в "парольных" полях вместо звездочек реальные символы. Однако в целом плагин будет полезен только веб-разработчикам - но полезен настолько, что без него становится работать даже как-то неуютно.

После установки плагина в FireFox, нажмем правую кнопку мыши и в внизу появившегося списка мы видим название данного плагина, наведя курсор мыши на которое получим список доступных вкладок. Первые две вкладки позволяют просмотреть, как выглядела бы веб-страница без использования тех или иных элементов в веб-дизайне. Вы можете увидеть ваш веб-сайт глазами пользователя, отключившего java-скрипты или пользующегося отключением графики для ускорения загрузки страниц при работе с Интернетом через модемное соединение. Также вы можете проверить схему защиты вашего веб-сайта, основанную на анализе рефереров*. Для этого есть возможность отключения передачи веб-браузером данных о веб-странице, с которой вы зашли на веб-сайт, серверу.

С помощью данных вкладок пользователю доступны такие возможности как отключение куков и анимации в картинках, также можно отключать показ самих рисунков и возможности выполнения скриптов Java на веб-страницах. Кроме того, доступны такие возможности как:

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

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

Следующая вкладка - Ошибок CSS нет: подразумевает работу с таблицами стилей. В контексте работы с таблицами стилей расширение позволяет подключать к просматриваемой странице пользовательскую таблицу стилей, отключать стили браузера по умолчанию. Также доступно не только отключать стили по их типу (например, вы можете отключить только стили, используемые при печати), но и редактировать CSS-таблицы. Еще можно просматривать используемую таблицу стилей в виде веб-страницы прямо во вкладке Firefox и выводить дополнительную информацию о таблицах стилей, используемых в одном из элементов оформления веб-страницы.

Управление стилями с помощью функции редактирования CSS позволяет примерить выбранный вами дизайн прямо во время работы веб-сайта. Вы просто изменяете таблицу стилей и видите, как бы выглядел веб-сайт с отредактированными таблицами стилей. Также очень полезной является возможность просмотра стилей элементов веб-страницы. При активации режима просмотра стилей (View Style Information) появляется курсор, с помощью которого следует выбрать элемент оформления веб-страницы. После выбора этого элемента веб-дизайна во вкладке браузера выводится информация об используемых им стилях оформления. Таким образом, очень просто просмотреть стиль абзаца или гиперссылки, когда происходит наезд частей дизайна или видны какие-либо диспропорции размещения элементов на вашей веб-странице.

Вкладка «Формы» здесь же доступно очищать радиокнопки (Clear Radio Buttons), конвертировать переменные запросов GET в POST и наоборот; выводить данные про поля ввода и прочие элементы веб-форм (Display form details). Не обошлось и без отмены режима «Только просмотр» для полей ввода (Make form fields writable). Кроме того, доступно не только убирать ограничение на максимальную длину поля ввода формы (Remove maximum length), но и показывать пароли (в полях ввода со звездочками), ну и конечно же, просматривать информацию о формах HTML-страницы (View form information)

- Графика: управление картинками
- Инфо: можно получить вспомогательную информацию о веб-странице
- Разное: здесь доступны различные по функциональности дополнения
- Контуры: обрисовка определенных частей веб-дизайна контурными линиями
- Размеры: с помощью данного параметра можно изменить размеры окна браузера
- Инструменты: а здесь доступны инструменты для разработчика
- Код(Х): просмотр исходных кодов страницы.

На остальных настройках WebDeveloper для FireFox мы подробно останавливаться не станем, поскольку все достаточно интуитивно понятно.