Все о создании сайтов, блогов, форумов, интернет-магазинов, их продвижении в поисковых системах и заработке на сайте

Web Developer для Firefox — установка и возможности

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

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

Сегодня же мы подробно рассмотрим работу с плагином Web Developer для браузера Firefox.

Установка плагина Web Developer в Firefox

Скачать плагин Web Developer для Firefox вы можете на странице автора. На странице закачки плагина Web Developer, вам нужно будет нажать на ссылку «Download for Firefox/Flock/Seamonkey» на зеленом поле внизу окна. Если вы пытаетесь скачать Web Developer из Firefox, то сразу же начнется установка плагина, а затем вам предложат перезагрузить браузер Firefox для активации плагина Web Developer.

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

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

Возможности плагина Web Developer для Firefox

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Можете также посмотреть видео «Web Developer для Firefox»:

У Евгения Попова имеется видекурс по PHP+MySQL, который стоит того, чтобы с ним ознакомиться.

Вы так же можете ознакомиться с другими статьями:

• Полезные программы
  • FileZilla - лучший FTP клиент
  • Яндекс Бар
  • Firebug
  • Web Developer - в помощью начинающему верстальщику
  • SEObar для Opera
  • Красивые кнопки для сайта
  • Notepad++ – Html и PHP редактор
  • Site Auditor — seo анализ сайта и проверка позиций
  • Скорость загрузки сайта - Page Speed
  • Клавиатурный тренажер VerseQ - как научиться быстро печатать

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

• Яндекс Бар — скачать и установить панель Yandex Bar для Mozilla Firefox, Internet Explorer, Opera и Google Chrome, предоставляемые возможности
• Плагин SEObar для браузера Opera — удобный и информативный SEO плагин для Оперы — Часть 4 — Расширения для браузеров Firefox и Opera
• Firebug — где скачать Firebug, как установить и как пользоваться бесплатным плагином для Firefox
• Компонент K2 для создания блогов, каталогов и порталов на Joomla — возможности, установка и русификация
• Бесплатная фотогалерея для Joomla 1.5 — Часть 1 — Возможности фотогалереи Phoca Gallery, установка и русификация компонента Phoca Gallery и плагина Phoca Gallery Plugin
• Красивые шрифты для сайта онлайн — как добавить в Html и CSS web шрифты через Google Font API