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

Здравствуйте, уважаемые читатели блога сайт! В рамках рубрики «Инструменты вебмастера» хочу познакомить вас с дополнением Web Developer 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, то откроется выпадающее меню, где выбираете тот инструмент плагина, который нужен на данный момент.

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

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

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

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

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

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

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

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

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

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

6.1. «Display Id & Class Details» - показать всех элементов.

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

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» можно редактировать в появившемся внизу окне, причем все вносимые изменения будут видны сразу. Естественно, реальное редактирование файлов производится не будет. Это очень удобно, когда необходимо поэкспериментировать с дизайном сайта.

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

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

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

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

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

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

Итак, вы решили стать Веб разработчиком . Вы знаете три магических термина HTML / CSS / JS и полагаете, что станете востребованным специалистом, как только освоите все три в совершенстве. Вы представляете, как будете учить их последовательно, один за другим. Заполните портфолио. Найдёте вакансию Junior. Утрёте нос сомневавшимся.

На самом деле, даже Фронтенд разработчик – вымирающий вид. Но не потому, что работы становится меньше:) Скорее – наоборот. Ежедневно растущая сумма знаний не оставляет шансов для широких категорий. Абстрактные «программисты» существуют только в фильмах о хакерах и в народном представлении. Так и фронтенд разработчики, постепенно, становятся абстракцией, разделяясь на всё более узкие специальности.

К сожалению, большинство рекрутеров плохо представляют специфику работы людей, которых они трудоустраивают. Сделаем скидку на то, что IT-рекрутинг тоже молодая дисциплина. Вольно или невольно – рекрутеры создают своего рода «дезинформационное поле».

Если у вас есть опыт аренды жилья, вы, вероятно, сталкивались с фразой «Интернет Wi-Fi». Риэлторы обожают это словосочетание. Не пытайтесь объяснить им, что Wi-Fi это способ раздачи от подведённого источника, и вас интересует именно последний. «Интернет Wi-Fi» может оказаться чем угодно: ADSL, 3G, оптоволокном...

Фундаментальное непонимание ничуть не мешает риэлторам тиражировать бессмысленную фразу. Та же история с рекрутерами.

Давайте разберёмся, какие титулы вакансий, подходящие под определение «веб-разработки», популярны сегодня. Сразу отмечу, что данный гайд не претендует на полноту и отражает точку зрения человека, использующего JS как основной язык.

Титулы вакансий

Web Developer

Синонимы: веб-разработчик , веб-инженер

Обычно, подразумевает использование каких-либо CMS. Некоторые люди на полном серьёзе считают, что начинающие используют «простые CMS», а эксперты – «продвинутые CMS». Хинт: если человек спрашивает – Какую CMS используете? у компании программистов в конференц-зале – вероятно, он полный нуб. И это не обвинение, а констатация факта. Серьёзные современные проекты не используют CMS, ну разве что в качестве вспомогательного инструмента. Wordpress для ведения блога компании – да, возможно. Wordpress в качестве магазина – уже сомнительно. «Социальная сеть на Joomla» – фантазии подростка. CMS имеют свое место на рынке, но они давно перестали быть «государствообразующим» элементом.

«Делать сайт на CMS» примерно тоже самое, что «клепать дизайны под ThemeForest». «Копейка рубль бережёт!» – Nuff Said.

Веб-инженер занимается контентом, «правит» вёрстку, делает разное и (occasionally) программирует. Web Developer – это низший уровень из всех возможных «веб-разработчиков». В случае с фрилансом, под веб-разработчиком , обычно, подразумевается «человек-оркестр», а точнее – «человек-батрак».

Срчно!!! Ищем терпеливого веба-разработчека!

CSS / HTML Developer / Markup Developer

Синонимы: верстальщик

Должность, на которой требуется верстать дизайн. Требования к знанию JS и программирования минимальные или отсутствуют. Желательно необходимо знание основ дизайна, т.к. дизайн почти никогда не переводится из PSD в HTML один-к-одному. «Pixel-Perfect» – фраза-«звоночек». Маркер менеджера-самодура, ни имеющего ни малейшего понятия о том, как работает браузер и замеряющего качество работы попиксельным (с зумом!) сравнением PSD макета и HTML страницы. Попытки объяснить разницу между рендерингом шрифта в фотошопе и в браузере, обычно, воспринимаются как «споры вместо работы». Избегайте «попиксельных» вакансий всеми силами.

Верстальщик всегда дорабатывает за дизайнером. Веб-программист всегда дорабатывает за верстальщиком. Соседние пары в этой цепочке почти всегда недолюбливают друг-друга по этой причине.

Иван не только знает всё о профессиях из этой статьи, но и поможет их освоить, составить правильное резюме и подготовиться к собеседованию.

FrontEnd Designer / Web Designer

Синонимы: веб-дизайнер

Самизнаетекто™. От специалиста требуется знание визуального дизайна (возможно, дизайна интерфейсов), знание типографики, владение Photoshop. Знание JS, обычно, не требуется.

На западном рынке, дизайнеры обычно занимаются и вёрсткой. Во-первых современная вёрстка, с учётом респонсив- и адаптив- приставок и анимаций посредственно описывается статической картинкой. Вы часто видели дизайнера показывающего анимацию и мобильную версию? Я тоже. Обычно, их возможности ограничиваются выбором из библиотечных анимаций (подобранных программистом!). Во-вторых (но по той же причине), настоящему специалисту часто оказывается проще сделать дизайн сразу в виде вёрстки. Зачем делать работу X + Y, если можно обойтись Y?

На нашем рынке, ввиду технологического отставания, дизайнеры и верстальщики – разные люди.

Interface Developer / UI-UX Designer

Похоже на предыдущий вариант, но с упором на дизайн интеракций. Специалисты на этой должности, обычно, много общаются с программистами, с клиентами, с менеджерами, потом опять с программистами... По этой причине, желательно знание основ разработки ПО и коммуникативные навыки. Очень часто, вакансия также требует знания специфики мобильной разработки, т.к. двух UI/UX экспертов нанимают довольно редко. Имейте в виду, что по этому направлению сложно найти материал для самообучения, что может идти как в плюс (меньше конкуренция) так и в минус (сложнее освоить). Если же вы способны учиться на примерах – проблем быть не должно.

Mobile / Tablet FrontEnd Developer

Должность для разработчика, специализирующегося на мобильных устройствах. Требуется знание специфики платформ IOS и Android. React Native – современный вариант этой специализации, позволяющий использовать веб-технологии для создания нативных приложений. Хинт: веб-приложения, гибридные приложения, нативные приложения и нативные приложения на веб-технологиях – это всё разные вещи.

FrontEnd Developer / Engineer

Синонимы: фронтендщик, фронтенд-разработчик

Обобщённое название должности для разработчика, владеющего HTML / JS / CSS. Обычно встречается в небольших компаниях, где на одного человека возлагается широкий спектр задач. Знание дизайна, вероятно, не требуется, но будет идти как бонус. В современных условиях, всё чаще заменяется на титул конкретной технологии: jQuery Developer , Backbone Developer , React Developer , Angular Developer ... Умения программировать и верстать входят в пакет требований.

JS Developer / FrontEnd Programmer

Синонимы: JS разработчик * / JS программист

То же, что и предыдущее, с большим упором на программирование и меньшим на вёрстку и дизайн. Вообще, термин Developer (Engineer в меньшей степени) вместо Programmer , может означать что программирования будет меньше, а «всякой всячины» – больше. Кроме случаев, когда язык программирования указан явно (JS developer ~= JS programmer).

JS Developer может означать и FullStack (см. ниже). В этом случае, компания, вероятно, планирует определиться с вашей специализацией позже – когда будут ясны ваши сильные и слабые стороны. Или же когда иные рабочие места распределятся. Поэтому, JS Developer почти всегда идёт в паре с Junior или Senior / Middle .

FrontEnd SEO expert

Редкая должность, на которой требуется оптимизировать HTML код согласно требованиям и пожеланиям поисковых систем (Google / Yandex). Специфические знания: микро-форматы, микро-разметка. Учитывая, что SEO вымирает и заменяется классическим маркетингом – рекомендую избегать всего, что содержит данный акроним. Если поиск работы не ваше хобби, конечно.

FrontEnd Accessibility expert

Упор на оптимизацию сайта под специальные ридеры (например, для людей с ограниченным зрением). Исключительно редкая должность. Занесена в Красную книгу. Встречается только на крупных проектах.

FrontEnd Dev. Ops

Должность для специалиста по вопросам сборки, автоматизации, интеграции фронт-енд приложений. Встречается, преимущественно, в крупных компаниях, т.к. подразумевает довольно узкий спектр задач. Актуальные знания: Webpack / Gulp / Grunt. Со временем, у вас начнут спрашивать чем вы, собственно, занимаетесь...

FrontEnd Testing / QA

Должность для специалиста по тестированию / контролю качества фронтенд приложений. Встречается в крупных и средних компаниях. Актуальные знания: юнит-тесты, функциональные тесты, A/B тесты, ручное тестирование и автоматизация. Коммуникативные способности входят в список требований.

Многие люди ошибочно полагают, что «тестировщик» – более простая работа, чем «программист». Да, иногда встречаются вакансии где можно «кликать по ссылкам» и «составлять отчёты». Но это исключения.

Заставить Selenium NightmareJS гулять по приложению, создавая скриншоты и выполняя регресионные тесты не так уж и просто. Ведь это, по сути, фуллстек разработка. Работа ведётся сразу в нескольких средах (Electron + Chromium) и требует хороших фундаментальных знаний.

FullStack Developer / Engineer / Programmer

Должность для эксперта по полному стеку веб-технологий. Подразумевает понимание клиент-серверного взаимодействия, опыт работы с базами данных, знание асинхронного программирования и др. Выбор серьёзно настроенных людей.

FullStack делится на две категории: FullStack-JS и всё остальное . В первом случае, как несложно догадаться, на сервере и на клиенте используется JS. Во втором случае – на сервере используется Ruby / Python / PHP.

Для начинающих, чтобы не распыляться между разными языками и платформами, настоятельно рекомендую отдавать предпочтение первому варианту (по возможности). Учить сразу несколько языков – работа на износ.

FullStack JS предполагает использование феб-фреймворков на базе NodeJS. Это может быть монолитный фуллстек фреймворк (типа MeteorJS), реактивный бекенд с минималистичным клиентом (типа HorizonIO) или сборка из независимых библиотек (типа KoaJS + ReactJS). Все они имеют свои преимущества и недостатки.

FullStack JS часто используется в приложениях реального времени: чаты (а-ля Slack / Gitter), финансовые приложения (масштабируемость, PayPal...), игровые сервера. Возможность пушить информацию на клиент (создавая риал-тайм) практически «из коробки» – основной двигатель роста этой технологии.

Architect

Высший градус классического программирования. Любая вакансия со словом Architect предполагает Senior специалиста и, вероятно, не представляет интереса в краткосрочной перспективе для вас, дорогой читатель.

Lead

Вакансии лида бывают очень разные. Сколько компаний – столько разных лидов. С другой стороны, этот тот случай, когда человек определяет место, а не место – человека. Для начинающих – интереса не представляет, т.к. Junior Lead – такой же нонсенс как Junior Architect.

NodeJS Developer / Backend JS Developer

JS бекендщик. «Великий и ужасный» NodeJS – что только не говорили по его поводу. Восхваления, обвинения в «хипстерстве» – было всё...

Я постоянно пользовался Firefox. Он меня вполне устраивал, особенно в процессе разработки и тестирования сайта. я попробовал сразу же после его выхода. Понравилась скорость рендеринга страниц.

Но через небольшое отрезок времени вернулся к Firefox, по причине отсутствия расширений и дополнений таких как Google Page Rank и панель веб-разработчика Webdev. Теперь с проблем нет, их уже существует большое множество.

Плагин FireBug для Firefox

Это основной плагин веб-разработчика. Вы можете редактировать, выполнять отладку, просматривать CSS, HTML и JavaScript. Результат внесенных изменений отображается мгновенно. Плагин FireBug очень удобен для поиска фрагмента кода, отвечающего за вывод того или иного блока на странице, и, соответствующего ему CSS-стиля.

Плагин имеет замечательную функцию Inspect, с помощью которой можно посмотреть какие тэги и свойства определяют положение отдельного элемента на странице. Кроме того, во вкладке Layout можно посмотреть какие поля и отступы заданы для этого элемента.

Этот плагин является дополнением к FireBug. C помощью него можно легко разместить в вашем макете изображения и посмотреть на эскиз как бы в уже готовом виде. Для этого надо выбрать картинки и разместить их прямо на странице. Картинки полупрозрачные, легко перетаскиваются мышкой.

Скачать плагин Pixel Perfect для Firefox.

HTML Validator упростит процесс создания валидной HTML разметки в соответствии с веб-стандартами. Теперь нет необходимости не нужно заходить на официальную страницу валидатора.

Плагин подробно показывает ошибки и точное место, а также объяснит, как эту ошибку исправить. Работает в фоновом режиме и встроен в страницу просмотра исходного кода. Очень экономит время.

В данный момент, одним из лидирующих направлений разработки ПО является веб-разработка. Под веб-разработкой подразумевается разработка интернет сервиса или веб-приложения, его обслуживание, поддержка, а также оптимизация под поисковые системы (SEO).

Junior веб-разработчики занимаются собственно созданием несложных веб-приложений, причем преимущественно клиентской разработкой и частично серверным программированием, хотя серверная часть в таких приложениях обычно не очень сложная. Более опытные веб-девелоперы работают еще над сложными частями серверной логики и интеграцией с внешними системами. Для SEO часто нанимают отдельного человека или целую команду специалистов.

Для подтверждения квалификации Junior Web Developer, нужны такие знания:

• Программирование (знание систем счисления, элементарных алгоритмов)
• Языки представления HTML/XML/CSS (основные понятия и принципы, синтаксис)
• Язык JavaScript (синтаксис, обработка событий, работа с DOM)

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

Необходимые тесты

Программирование - Основы

Поскольку от Junior"а требуется знание JavaScript, ему необходимо знать азы программирования. В этом тесте собраны довольно элементарные вопросы по булевой алгебре, системам счисления (особенно двоичной и шестнадцатиричной), простым алгоритмам.

HTML - Основы

Тест HTML проверяет знания Junior"ом основных тегов и элементов языка, которые будут необходимы в работе. Также в тесте есть вопросы по некоторым аббревиатурам, браузерам и косвенно о XML.

CSS - Основы

Junior"у необходимо наряду с HTML знать и CSS, так как иначе разработка более-менее серьезного сайта будет сопряжена с трудностями. Тест покрывает знания основных свойств и атрибутов, box-модели, селекторов.

XML - Основы

Знание XML не настолько критично для Junior"а как знание HTML/CSS, но требуется больше как базовое, которое пригодится Junior"у в будущем. Кроме того, нельзя забывать, что на XML основаны большинство других форматов разметки: тот же XHTML, WSDL или набирающий популярность со стандартизацией HTML 5 SVG. Вопросы теста в основном теоретические, покрывающие знание базовой спецификации XML.

JavaScript - Основы

Если, в начале 2000-х годов знание JavaScript Junior"ом было необязательным, то сейчас, спустя 10 лет, это одно из первоочередных требований. Знание JavaScript, помимо динамических возможностей в браузере клиента, открывает путь к изучению более сложных технологий, таких как AJAX, которые позволяют создавать насыщенные интернет приложения (Rich Internet Applications, RIA). Вопросы теста проверяют синтаксис, основные функции и объекты JavaScript.

Написание статьи

Тематика статьи предлагается администрации и либо принимается либо отвергается с предложением альтернативной. Тематика должна касаться предметной области. Это требование проверяет умение Junior"а быстро вникнуть в суть определенной технологии/подхода/фреймворка. Как вариант можно предложить на рассмотрение администрации 3-4 темы для статьи, а администрация предложит для написания одну из них. Написанная вами статья не должна быть ранее опубликова на других ресурсах.

Составление вопросов

Необходимость составления вопросов преследует те же цели, что и написание статьи: умение аналитически подходить к освоению нового, отделять важные аспекты от неважных. Тематики вопросов также согласовываются с администрацией (это нужно так как в некоторых тестах довольно много вопросов и при добавлении еще одного высока вероятность, что похожий вопрос уже есть).

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

Ждем Ваших комментариев и отзывов.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

посмотреть еще ролики можно перейдя на

Вам может быть интересно

SEObar - удобный и информативный SEO плагин для Оперы
Firebug - как пользоваться лучшим плагином для вебмастеров
Оптимизация и сжатие CSS в Page Speed - как отключить внешние файлы стилей и объединить их в один для ускорения загрузки
Rds Bar и Page Promoter бар в помощь вебмастеру
Safari - где скачать и как настроить под себя бесплатный браузер для Windows от Apple
Расширения и темы для Google Chrome
Плагины и темы для Mozilla Firefox - какие дополнения и расширения стоит скачать и установить