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

| 18.05.2017

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-страница, а также он будет очень полезен при создании и отладке сайтов.