Web Developer для Firefox — установка и возможности плагина для верстальщиков и вебмастеров

19 января, 2010

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Предлагаю вашему вниманию очередную статью, которая будет посвящена рассмотрению возможностей плагина для Firefox (тут много дополнений и расширений для Мазилы) под названием Web Developer.

Этот плагин для браузера Firefox (здесь описано пять секретов Фаерфокса, которых вы не знали) — своеобразный швейцарский нож для вебмастеров, имеющий массу возможностей и инструментов в своем составе.

Web Developer ни в коем разе не умоляет достоинства рассмотренного ранее плагина Firebug, а скорее очень сильно дополняет его. Если вы еще не очень хорошо знакомы с возможностями Фаербага, то можете почитать о нем по приведенной ссылке.

Установка и возможности ВебДевелопера


Скачать плагин можете здесь. На странице закачки вам нужно будет нажать на ссылку «Download» на зеленом поле внизу окна. Если вы пытаетесь скачать его из-под Фаерфокса, то сразу же начнется его установка, а затем вам предложат перезагрузить браузер для активации плагина.

Если же вы захотите скачать его в каком-либо другом браузере (тут мы выбирали лучший браузер и им оказался...), то откроется стандартный диалог загрузки для сохранения. Затем вам необходимо будет зайти в Firefox, из верхнего меню выбрать «Файл» — «Открыть» и найти на вашем жестком диске только что сохраненный файл. В результате, опять же начнется описанный выше процесс установки.

После перезагрузки обозревателя вы увидите над закладками открытых страниц новую панель Web Developer.

Все его инструменты скомпонованы в группы в этой панели. Щелкнув по названию такой группы вы сможете увидеть все вложенные инструменты, которые к ней относятся. Начнем сначала, а именно с группы инструментов «Отключить».

Щелкнув, например, по пункту «Отключить цвета страницы» вы сможете увидеть, как будет выглядеть открытая в браузере вебстраница без цветового оформления. Для того, чтобы вернуть все обратно нужно будет повторно зайти в группу «Отключить» и еще раз щелкнуть по пункту «Отключить цвета страницы», в результате чего напротив него снимется галочка и вернется цветовое оформление вебстраницы. В этой группе инструментов можно так же отключить элементы Java и JavaScript.

Следующая группа инструментов — «Cookies». Предназначена для всеобъемлющей работы с куками открытой вебстраницы. Посмотреть информацию о них, отключить или же удалить их. За ней следует очень интересная область под названием «CSS». В ее названии также отображается информация об обнаруженных ошибках CSS (здесь находится первая статья из серии уроков по CSS) на открытой в браузере вебстранице.

Вы можете посмотреть, как будет выглядеть открытая в браузере вебстраница в случае полного или частичного отключения стилей CSS через Web Developer. Для этого вам нужно будет выбрать один из подпунктов этой группы «Отключить стили». Можно даже отключить стили, задаваемые каким-то определенным файлом CSS, выбрав его из списка «Отдельный файл».

В пункте «Отображать с помощью стиля» можно увидеть, как будет выглядеть открытая в браузере вебстраница в наладоннике (карманном компьютере) или в версии для печати. Выбрав пункт «Информация о CSS» получим полную информацию о используемых на данной открытой странице стилей CSS.

Очень интересную возможность предоставляет плагин Web Developer в пункте «Посмотреть стили элемента». При его активации вы получите доступ к подробной информации о любом элементе на открытой вебстранице. Для этого достаточно будет просто подвести к нему мышь и вверху окна Мазилы вы увидите информацию о структуре блоков, в которых находится данный элемент вебстраницы.

Если щелкните по какому-то элементу вебстраницы с активированным плагином Web Developer мышью, то внизу окна откроется окно с подробной информацией об используемых для этого тега CSS стилях. Нечто подобное можно реализовать и воспользовавшись Фаербагом. Группа настроек «Формы» предоставляет нам разнообразные инструменты для работы с Html формами.

Вы сможете посмотреть как устроена заинтересовавшая вас Html форма, изменить некоторые ее параметры, к примеру, включить отображение в полях паролей вносимых символов или же конвертировать GET-запросы в POST и, наоборот.

Другие инструменты этого замечательного плагина


В области «Графика» имеются пункты, которые позволят вам отключить показ картинок (либо всех изображений, либо только загруженных с внешних ресурсов, либо только анимированных). Так же вы сможете простой установкой галочек рядом с нужными пунктами в меню «Графика» настроить отображение рядом с изображениями информации о содержимом атрибута ALT (альтернативный текст), а также информации о весе данного фото, его размере в пикселах и пути до файла с изображением.

Так же можно будет настроить в плагине Web Developer показ контуров изображений, найти поврежденные картинки, вывести сводную информацию обо всех фотографиях на открытой вебстранице и, например, настроить показ вместо них содержимого атрибута ALT.

В области «Инфо» данный плагин может предоставить огромное количество информации об открытой в браузере вебстранице в целом. Пунктов в этом меню очень много. Например, активация пункта «Показать размеры блоков» приведет к выделению всех блоков (DIV контейнеров) на вебстранице и демонстрации рядом с ними их точных размеров в пикселях.

Можно будет также с помощью плагина Web Developer посмотреть структуру заголовков данной страницы, информацию о ссылках на ней и многое другое.

В области «Разное» сосредоточены те возможности, которые не нашли место в других группах инструментов. Интересной из этой группы является «Линейка», при активации которой вы получаете возможность в измерять расстояния между элементами вебстраницы или определять размер в пикселях того или иного блока.

После активации линейки из состава плагина курсор мыши превращается в крест и вы можете, нажав и удерживая левую кнопку мыши, выделить нужный элемент страницы. Под панелью инструментов Web Developer вверху окна браузера Firefox находится панель инструмента «Линейка», на которой будет выведена информация о размере выделенной области.

В области «Разное» сосредоточенно еще довольно много интересных и полезных возможностей. Например, пункт «Редактор HTML» открывает дополнительное окно с HTML кодом данной страницы. Все вносимые в нем изменения будут тут же отображать в браузере. Очень удобно для быстрых экспериментов с дизайном сайта. При этом, естественно, никаких изменений в реальных файлах движка веб проекта производиться не будет.

Но зато вы сможете с помощью Web Developer в реальном времени промоделировать различные варианты построения данной страницы через Firefox. Если же новый, смоделированный с помощью него вариант кода вас устроит, то придется вносить изменения уже в реальные файлы движка вебсайта, найти которые вы сможете, используя способ описанный для Тотал Коммандера — поиск по содержимому файлов.

Область «Контуры» очень поможет вам при изучении элементов оформления вебстраницы. Активируя тот или иной пункт в меню «Контуры» можете выделить на странице отдельные типы ее элементов, например, элементы уровня блока (DIV контейнеры), элементы Html таблиц (здесь теги таблиц очень подробно описаны), фреймы (тут про теги Iframe и Frame статья живет) или же ссылки на странице, у которых нет атрибута Title. Очень повышает наглядность верстки.

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

В группе «Инструменты» собраны возможности для проверки валидации (соответствия современным требованиям к вебразработке). Можно осуществить проверку HTML, CSS, WAI и Section 508. Проверка осуществляется через онлайновый валидатор от W3C.

Настройку плагина можно произвести, выбрав в группе инструментов «Настройки» пункт с аналогичным названием. В заключении хочу сказать, что с помощью возможностей Web Developer можно легко разобраться в том, как устроена та или иная понравившаяся web-страница, а также он будет очень полезен при создании и отладке сайтов.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Подборки по теме:

Комментарии и отзывы

Ян

Замечательный плагин , побежал устанавливать 🙂

Max D

всё бы хорошо в ваших статьях, но очень мало иллюстраций и текст длинноват.

Archy

Спасибо, не знал, юзал только firebug.

Videotutor

К этому плагину рекомендую «Toggle Web Developer Toolbar» — он помогает скрыть всю панель Web Developer, когда она не нужна. Один клик — и она появится.

Юлия

Дима, а есть ли такой же Web Developer для Chroma?

Андрей

Все бы хорошо, только этот плагин не позволяет локальные страницы шинковать(

Сергей

Как РУССИФИЦИРОВАТЬ Web Developer? Нигде нет русской версии или руссификатора.

Bingam

Нашла, не знаю как локализировать 1.2.1

Web Developer 1.2.1 Русская локализация для FF и Chrome

http://softvopros.ru/forum/topic_262

Аэн

Откройте скачанный файл браузером и он запросит подтверждение установки

Рома

Как руссифицировать плагин? Настройки языка не нашел.

Анна К.

Рома!

Сверху был дан ответ от Bingam, где взять русский.

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

Дмитрий! Спасибо большое, что порекомендовали его.

Подписаться не комментируя