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

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com! В рамках рубрики «Инструменты вебмастера» хочу познакомить вас с дополнением Web Developer Firefox, который дает возможность оптимизаторам осуществить многогранный анализ любого ресурса, а также оказывает существенную помощь вебмастерам в разработке и редактировании сайтов.

Кстати, вы можете получить полезную информацию, ознакомившись с обзорами, представляющими как наиболее популярные плагины Google Chrome, так и расширения для Firefox. Дополнения Фаерфокс, если брать общую ситуацию, несколько превосходят по функциональным возможностям и удобству использования свои аналоги для других популярных браузеров (Opera, IE, Google Chrome), по крайней мере, на текущий момент ситуация такова.

Установка Вэб Девелопер

Поэтому, несмотря на то, что основную работу с сайтом я выполняю в Хроме, очень часто переключаюсь на Mozilla Firefox, когда нужно задействовать то или иное дополнение. Кстати, на страницах блога вы сможете найти вполне информативный обобщающий материал о самых востребованных браузерах (здесь), на основании которого, вполне вероятно, сделаете свой выбор.

Не является исключением и плагин Вэб Девелопер для Мазилы, который для меня несколько более удобен в использовании, чем его братишки для Хрома или Оперы, хотя выполняет тождественные операции. Скачать Web Developer можно c сайта разработчика. После того, как попадете на страницу, нужно нажать на одну из ссылок «Download for Firefox», «Download for Chrome» или «Download for Opera» для загрузки дополнения в соответствующий браузер.

После этого вас перебросит на страницу загрузки, где надо кликнуть по зеленой кнопке в правом верхнем углу «Добавить в Firefox» («Добавить в Chrome», «Добавить в Opera»). Если вы находитесь в том же web-браузере, плагин для которого загружаете, то сразу начнется инсталляция Developer, по окончании которой последует предложение перезагрузить браузер для вступления изменений в силу.

Если же вы находитесь, скажем в Хроме, а загружаете дополнение для Фаерфокс, то после перехода по ссылке «Download for Firefox» со страницы автора плагина попадаете на официальную страницу Mozilla, где кликаете по ссылке на серой кнопке «Загрузить сейчас», после чего откроется обычное диалоговое окно загрузки и вы сохраняете файл на жестком диске своего компьютера. Далее устанавливаете Вэб Девелопер обычным способом, активировав сохраненный установочный файл.

Важнейшие опции плагина Web Developer

Итак, после перезагрузки web-браузера наверху увидите панель, которую имеет этот плагин для Firefox (описываю на примере Мазилы, для Оперы и Хрома картинка немного другая, но суть остается той же):

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

Отмечу, что когда кликаете по какой-либо строчке с инструментом, то появляется галочка, которая является показателем активации данной функции и означает, что опция работает в данный момент. При повторном нажатии галочка исчезает, что приводит к деактивации инструмента.

1. «Disable cache» - отключить кэш браузера. Одним нажатием мышки отключаем кеш, эта функция может быть полезна во многих случаях. Кликнув по «Disable Minimum Font Size», вы можете отключить минимальный размер шрифта на вебстарнице, а активировав «Disable Page Colors» - выключить цветовое оформление данной страницы.

2. Группа опций «Cookies» предназначена для священнодействий с куками обозревателя. Здесь можно отключить все куки (Disable All Cookies), добавить (Add Cookie...), удалить куки домена (Delete Domain Cookies), посмотреть подробную информацию о куках (View Cookie Information).

Рассмотрим еще некоторые функции, которыми обладает это дополнение Firefox и которые могут быть востребованы оптимизатором или вебмастером в первую очередь.

3. Скажем, вкладка «CSS» Web Developer, которая содержит несколько очень важных пунктов.

Можно посмотреть, как будет выглядеть страница в веббраузере, если полностью или частично отключить стили CSS. Для этого надо нажать строку «Disable Styles». Появится подменю, в котором можно выбрать то действие, которое необходимо:

3.1. «Disable All Styles» - отключить все стили.

3.2. «Disable Browser Default Styles» - отключить стили в браузере по умолчанию. То есть к каждому элементу применяются стили, которые не заданы явно в соответствующем документе (например, в файле style.css). В каждом случае предусмотрены значения свойств для каждого элемента по умолчанию. Так вот эти значения можно отключить и посмотреть, как в этом случае будет оформлена web-страница.

3.3. Если поставите галочку напротив пункта «Display Style Information» (посмотреть информацию о стилях), то получите полновесную информацию о любом элементе на странице. Для этого достаточно подвести курсор к нужному элементу, который мгновенно будет заключен в красную рамку и в строке напротив надписи «Web Developer» увидите данные о структурной составляющей всех контейнеров div для этого элемента.

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

4. Еще одна интересная группа функций, которую имеет плагин Firefox Web Developer - «Forms»:

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

5. Далее, подраздел «Images» (изображения) дополнения Developer. C помощью различных опций этого раздела есть возможность проводить разные манипуляции с изображениями на вебстранице Фаерфокс. Вот некоторые пункты из этой группы.

5.1. «Disable Images» - у этой опции есть несколько подфункций:

  • «Disable All Images» - отключить все изображения;
  • «Disable External Site Images» - отключить изображения стороннего сайта;
  • «Disable Image Animations» - выключить анимацию изображений.

5.2. «Display Alt Attributes» - при активации этой опции появится информация об атрибуте Alt (альтернативный текст) для всех HTML картинок на web-странице, который играет наиважнейшую роль в деле оптимизации и продвижения ресурса.

5.3. «Display Image File Size» - показать размер файла изображения. После того, как отметите галочкой эту строку, увидите инфу о весе (в килобайтах) всех картинок, которые находятся на странице. Очень удобно для подготовки к оптимизации изображений. Кстати, одну из составных частей оптимизации картинок, а именно сжатие, очень удобно осуществлять в программе для просмотра изображений FastStone Image Viewer.

Кроме того, используя вкладку «Images», можно найти испорченные изображения, скрыть изображения фона, скрыть картинки и т.д.

6. Группа опций «Information» позволяет получить всеобъемлющую информацию об открытой в Фаерфокс вебстранице. Здесь очень много пунктов. Например:

6.1. «Display Id & Class Details» - показать Id (идентификаторы) и class (классы) всех элементов.

6.2. «Display Link Details» - показать информацию обо всех ссылках. Здесь на свет божий вылезут все характеристики и атрибуты HTML гиперссылок.

6.3. С помощью опции «View Document Size» есть возможность проанализировать данные о весе всей страницы и каждой из ее составляющих, открытой в Фаерфоксе:

7. Посредством следующей группы «Miscellaneous» (разное) можно осуществлять разнообразные действия по редактированию элементов вебстраницы, открытой в Файрфоксе. Например, здесь присутствует замечательный инструмент «Line Guides» (линейка). После активации данной функции появятся вертикальные и горизонтальные линии, цвет которых можно изменить по своему усмотрению, кликнув по кнопке «Color»:

Кнопки «Add Horizontal Line Guides» и «Add Vertical Line Guides» позволяют добавить любое количество горизонтальных и вертикальных линий для редактирования. Все эти линии можно передвигать на нужное расстояние с помощью обретшего форму креста курсора. С правой стороны строки «Web Developer Line Guides» появится надпись, информирующая об изменении позиции передвигаемых линий, которые позволяют редактировать различные элементы на web-странице.

При активации функции «Edit HTML» можно редактировать HTML код в появившемся внизу окне, причем все вносимые изменения будут видны сразу. Естественно, реальное редактирование файлов производится не будет. Это очень удобно, когда необходимо поэкспериментировать с дизайном сайта.

8. Вкладка инструментов «Outline» (контур) Web Developer сильно поможет вебмастерам при анализе различных элементов открытой в браузере Firefox web-страницы. Если активировать поочередно различные функции из выпадающего меню этой группы, то можно выделить особым образом разные области элементов страницы.

Например, нужно выделить заголовки посредством обведения их контуром. Для этого надо выбрать из выпадающего меню строку «Outline Headings». В результате получите картину, где заголовки будут заключены в рамки:

При выборе из списка функции «Show Element Tag Names When Outlining» (показать наименование тега выделенного элемента) активируется инструмент, который отметит, например, теги заголовков:

9. Группа «Resize» (изменение размеров) плагина Developer - с помощью находящихся здесь инструментов можно производить разнообразные действия по изменению размеров окна браузера Фаерфокс, в том числе задать ему произвольный размер и посмотреть, как изменится вид элементов данной страницы.

10. «Tools» (инструменты) дополнения Вэб Девелопер позволяют провести валидацию HTML кода и проверку корректности CSS документа в соответствии с современными требованиями, регламентированными Международным Консорциумом W3C.

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

Еще статьи по данной теме:
Самые интересные публикации из рубрики: Инструменты вебмастера

6 отзывов

  1. Василий

    Игорь, а я ждал статью про это расширение. Про Web Developer знаю давно, оно даже установлено у меня в браузере. Теперь можно будет поучиться его использовать. Firebug вот немного освоил. На большее, к сожалению, времени не хватает.
    Вы правильно заметили про функциональность дополнений браузеров. Мне часто приходится улыбаться, когда читаю про "крутое" дополнение к какому-нибудь браузеру. Авторам таких статей даже невдомек, что это это расширение не может сравниться с оригиналом для Firefox. Поэтому это мой основной браузер.
    Спасибо за статью.

  2. Юрий

    Хороший плагин Web Developer. Я даже статью о нем писал, и приводил примеры, как им пользоваться. Больше я им не пользуюсь, потому что нашел этому плагину альтернативу.

  3. Игорь

    Ну, здесь, Василий, я Вами полностью согласен. Что касается дополнений Firefox, здесь они точно впереди планеты всей. Хотя я работаю в Хроме (привычка, знаете ли).

  4. Игорь

    Юрий, какова же альтернатива, поделитесь. 🙂

  5. Юрий

    Здравствуйте.У меня не устанавливается плагин Web Developer, подскажите ,почему? все время выдает ошибку,Спасибо,

  6. Игорь Горнов

    Юрий, а Вы загружаете его с официального сайта? Если да, проверьте обновления браузера и, в случае необходимости обновите. Ежели это не поможет, попробуйте переустановить браузер.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Чтобы ввести любой код, вставьте его между [php] и [/php]. Ссылка (URL), помещенная в текст комментария, не будет активной. C целью ее выделения и более удобного копирования можно заключить ее между тегами <pre> и </pre>.