Полезные расширения для браузеров Firefox и Opera | Часть 3: плагин Web Developer для Firefox — установка и предоставляемые возможности
Здравствуйте уважаемые читатели блога KtoNaNovenkogo.ru. Предлагаю вашему вниманию очередную стать из рубрики Инструменты вебмастера/Нужные программы, которая будет посвящена рассмотрению возможностей плагина Web Developer для браузера Firefox.
Плагин Web Developer для браузера Firefox — это своеобразный швейцарский нож для вебмастеров — он имеет массу возможностей и инструментов в своем составе. Web Developer ни в коем разе не умоляет достоинства рассмотренного ранее плагина Firebug для браузера Firefox, а скорее очень сильно дополняет его. Если вы еще не очень хорошо знакомы с возможностями плагина Firebug для браузера Firefox, то можете почитать о нем здесь:
- Firebug — самый необходимый инструмент при работе над дизайном сайта
Сегодня же мы подробно рассмотрим работу с плагином Web Developer для браузера Firefox.
Установка плагина Web Developer для браузера Firefox
Скачать плагин Web Developer для браузера Firefox вы можете на . На страницу закачки Web Developer, где вам нужно будет нажать на ссылку «Download for Firefox/Flock/Seamonkey» на зеленом поле внизу страницы. Если совершаете эти действия в браузере Firefox, то сразу же начнется установка плагина, а затем вам предложат перезагрузить браузер для активации плагина.
Если же вы щелкнули по этой ссылке в каком-либо другом браузере, то откроется стандартный диалог загрузки для сохранения этого плагина на вашем жестком диске. Затем вам нужно будет зайти в браузер Firefox, из верхнего меню выбрать «Файл» — «Открыть файл» и найти на вашем жестком диске только что сохраненный плагин. В результате, опять же начнется описанный выше процесс установки плагина.
После перезагрузки Firefox, вы увидите над закладками открытых страниц новую панель плагина Web Developer.
Возможности предоставляемые плагином Web Developer
Все инструменты плагина Web Developer скомпонованы в группы. Щелкнув по названию такой группы вы сможете увидеть все инструменты, которые к ней относятся. Начнем сначала, а именно с группы инструментов «Отключить».
Щелкнув, например, по пункту «Отключить цвета страницы» вы сможете увидеть, как будет выглядеть открытая в браузере страница без цветового оформления. Для того, чтобы вернуть все обратно вам нужно будет повторно зайти в группу «Отключить» и еще раз щелкнуть по пункту «Отключить цвета страницы», в результате чего напротив него снимется галочка и вернется цветовое оформление страницы. В этой группе инструментов можно так же отключить элементы Java и JavaScript.
Следующая группа инструментов «Cookies» предназначена для всеобъемлющей работы с куками открытой страницы. Посмотреть информацию о куках, отключить их или же удалить. За ней следует очень интересная группа инструментов под названием «CSS» плагина Web Developer. В названии этой группы также отображается информация об обнаруженных ошибках CSS на открытой странице.
Вы можете посмотреть как будет выглядеть открытая в браузере страница в случае полного или частичного отключения стилей CSS. Для этого вам нужно будет выбрать один из подпунктов группы «Отключить стили». Можно даже отключить стили, задаваемые каким-то определенным файлом CSS, выбрав этот файл из списка «Отдельный файл». В пункте «Отображать с помощью стиля» можно увидеть как будет выглядеть открытая страница в наладоннике (карманном компьютере) или в версии для печати. Выбрав пункт «Информация о CSS» вы сможете получить полную информацию о используемых на данной открытой странице стилей CSS.
Очень интересную возможность предоставляет пункт «Посмотреть стили элемента». При активации данного пункта вы получите возможность получить подробную информации о любом элементе на открытой странице. Для этого достаточно будет просто подвести к нему мышь и вверху окна браузера, под панелью Web Developer, вы увидите информацию о структуре блоков (контейнеров) в которых находится данный элемент страницы.
Если вы щелкните по какому-то элементу страницы мышью, то внизу окна откроется окно с подробной информацией об используемых для этого элемента стилях. Нечто подобное можно реализовать и воспользовавшись плагином Firebag для FireFox. Группа настроек «Формы» предоставляет вам разнообразные инструменты для работы с формами. Вы сможете посмотреть как устроена заинтересовавшая вас форма, изменить некоторые ее параметры, к примеру, включить отображение в полях паролей вносимых символов или же конвертировать GET-запросы в POST и наоборот.
В группе инструментов «Графика» плагина Web Developer имеются пункты, которые позволят вам отключить показ изображений на открытой в данный момент в браузере странице (либо всех, либо только загруженных с внешних сайтов, либо только анимированных). Так же вы сможете простой установкой галочек рядом с нужными пунктами группы «Графика» настроить отображение рядом с изображениями (на открытой в данный момент странице) информации о содержимом атрибута ALT (альтернативный текст), а также информации о весе данного изображения, его размере в пикселах и пути до файла с изображением.
Так же можно будет настроить показ контуров изображений, найти поврежденные изображения, вывести сводную информацию обо всех изображениях на открытой странице, и, например, настроить показ вместо изображений содержимого атрибута ALT (альтернативный текст). Это позволит вам увидеть, как будет выглядеть страница вашего сайта в браузере с отключенным показом изображений.
Группа настоек «Инфо» плагина Web Developer может предоставить огромное количество информации об открытой в браузере странице в целом. Пунктов в этой группе очень много. Например, активация пункта «Показать размеры блоков» приведет к выделению всех блоков (контейнеров) на странице и демонстрации рядом с ними их точных размеров в пикселях.
Можно будет также посмотреть структуру заголовков данной страницы, информацию о ссылках на странице и многое другое.
В группе инструментов «Разное» плагина Web Developer сосредоточены те возможности, которые не нашли место в других группах инструментов. Интересным инструментом из этой группы является «Линейка», при активации которой вы получаете возможность измерять расстояния между элементами страницы или определять размер в пикселях того или иного блока. После активации линейки курсор мыши превращается в крест и вы можете нажав и удерживая левую кнопку мыши выделить нужный элемент страницы. Под панелью инструментов Web Developer вверху окна браузера вы увидите панель инструмента «Линейка», на которой будет выведена информация о размере выделенной области страницы.
В группе инструментов «Разное» сосредоточенно еще довольно много интересных и полезных инструментов. Например, пункт «Редактор HTML» открывает дополнительное окно с HTML кодом данной страницы. Все вносимые в нем изменения в HTML код будут тут же отображать на странице сайта. Очень удобно для быстрых экспериментов с дизайном сайта. При этом, естественно, никаких изменений в реальных файлах движка сайта производиться не будет. Но зато, вы сможете в реальном времени промоделировать различные варианты построения данной страницы. Если же новый, смоделированный с помощью Firebug вариант кода HTML вас устроит, то придется вносить изменения уже в реальные файлы движка сайта, найти которые вы сможете используя следующий способ: Поиск по содержимому файлов сайта при помощи Total commander.
Группа инструментов «Контуры» плагина Web Developer очень поможет вам при изучении элементов оформления открытой в данный момент в браузере страницы. Активируя тот или иной пункт в группе инструментов «Контуры» вы сможете выделить на странице отдельные типы ее элементов, например, элементы уровня блока (контейнеры), элементы таблиц, фреймы или же ссылки на странице, у которых нет атрибута Title. Очень удобный набор инструментов существенно повышающий наглядность верстки.
В группе инструментов «Размеры» плагина Web Developer собраны несколько инструментов управления размером окна браузера. Можно посмотреть размер текущего окна браузера во всплывающем окне или вывести его в заголовок браузера. Так же можно задать окну браузера произвольный размер, чтобы посмотреть на поведения данной страницы при вносимых изменениях. В группе инструментов «Инструменты» плагина Web Developer собраны инструменты для проверки валидации (соответствия современным требованиям к вебразработке). Можно осуществить проверку HTML, CSS, WAI и Section 508. Проверка осуществляется через онлайновый валидатор от W3C.
Настройки плагина Web Developer можно произвести, выбрав в группе инструментов «Настройки» пункт с аналогичным названием. В заключении хочу сказать, что с помощью возможностей плагина Web Developer можно легко разобраться в том, как устроена та или иная понравившаяся web-страница, а также плагин Web Developer будет очень полезен при создании и отладке сайтов.
На сегодня все. Если вы не хотите пропустить появление новых материалов на этом сайте, то можете подписаться на рассылку новостной ленты через форму, расположенную чуть ниже, или же выбрать удобный для вас способ подписки на странице Подписка. Если у вас остались нерешенные вопросы из области вебмастеринга, то вы можете поискать на них ответы, посетив страницу Вопросы и ответы или же просмотреть статьи рассортированные по рубрикам.
Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru
Почитать еще на эту же тему:
Замечательный плагин, побежал устанавливать
Ян: согласен, Web Developer — замечательный плагин. И так же, как и FireBug должен быть установлен в обязательном порядке.