В этой статье я хочу познакомить вас с очень полезным инструментом для вебмастера -- дополнением для браузера Firefox, плагином Web Developer. Название плагина говорит само за себя: Web Developer – вебразработчик. Понятно, что плагин создан для вебразработчиков, то есть для нас с вами. Предназначен плагин Web Developer для получения информации и тестирования сайта. Какие возможности предоставляют инструменты плагина? Вы сможете включить и выключить изображения, обнаружить все элементы ссылок, просмотреть формы, проверить страницы сайта на соответствие стандартам и многое другое. Сведения, полученные в результате тестирования, помогут вам не только в разработке сайта, с помощью плагина вы сможете найти скрытые ссылки, повреждённые изображения и т.п. Рассмотрим установку плагина Web Developer в браузер Firefox.

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

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

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

1 - В строку поиска скопируйте название нужного дополнения. В открывшемся списке выберите необходимый плагин для установки и запустите установку.
2 - Если же вы уже скачали дополнение на свой компьютер, откройте меню инструментов и выберите «Установить дополнение из файла».

Панель инструментов плагина Web Developer

После успешной установки Web Developer вы начнёте работать с инструментами плагина. Для работы удобнее всего использовать встроенную в браузер панель инструментов Web Developer. Можно использовать и альтернативные варианты доступа к инструментам плагина:

1. Кликните правой мышью в окне браузера Firefox и в открывшемся меню выберите Web Developer, откроется панель вкладок с инструментами;
2. Выберите в меню браузера Firefox «Инструменты» и в открывшемся подменю наведите курсор на Web Developer extension.

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

Инструменты плагина Web Developer сгруппированы по типу выполняемых операций, что удобно и позволяет интуитивно понимать работу того или иного инструмента.

Давайте рассмотрим панель инструментов Web Developer. На схеме ниже показаны варианты панели инструментов плагина Web Developer с разной языковой локализацией.

На панель инструментов плагина вынесены названия групп инструментов. Если вы кликните по названию группы, откроется вкладка с вложенными в эту группу инструментами. Инструментов в плагине довольно много, но когда вы начнёте работать с Web Developer, поймёте, насколько легко разобраться в работе каждого инструмента. Для того, чтобы включить инструмент, кликните по инструменту, напротив появится галочка. Для выключения – галочку убираем. Рассмотрим каждую группу инструментов плагина Web Developer.

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

«Cookies» . Проверка работоспособности сайта в условиях ограниченной способности браузера.

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

«Формы» (Forms). Можно просматривать элементы форм с их атрибутами, включить показ паролей в полях ввода со звёздочками, очищать радиокнопки, конвертировать переменные запросов и др.

«Графика» (Images). Управление изображениями. Можно получить информацию о размере, весе изображений, найти повреждённые изображения и многое другое.

«Инфо» (Information). Получаем дополнительную информацию о сайте. Можно просмотреть порядок расположения и величину блоков Div, параметры ссылок и объектов, атрибуты Title, значения атрибутов Id и Class, получить подробную информацию об элементах, таблицах, цветах, якорях и многое другое.

«Разное» (Miscellaneous). Здесь находятся разные по функциональности инструменты. Например, инструмент «Линейка», с помощью которого можно измерять объекты. Для этого нужно нажать правую кнопку мыши и выделить нужный объект. Выделение будет иметь форму прямоугольника. Для изменения размера, прямоугольник нужно потянуть за уголок или ввести данные в пикселях на панели инструментов плагина.

«Контуры» (Outline). Выделяет элементы вебдизайна контурными линиями. Хочу обратить особое внимание на пункт «Контур ссылок» - «Внешних ссылок». Этот инструмент поможет вам найти спрятанные и закодированные ссылки.

«Размеры» (Resize). Можно посмотреть размер окна и области просмотра. Также можно изменить размеры окна браузера, увеличить или уменьшить разрешение, что позволить проверить работу сайта при различных значениях разрешения экрана.

«Инструменты» (Tools). Инструменты для вебразработчика. Можно проверить на валидность код HTML, CSS, RSS-ленту с помощью бесплатных сетевых сервисов. Также можно проверить наличие двойных якорей, битых ссылок, просмотреть Консоль ошибок.

«Код» (View Source). Можно посмотреть исходный код страницы. Показывает список фреймов с возможностью просмотра их исходного кода. Показывает сгенерированный код так, как его видит браузер.

«Настройки» (Options). Настройки программы. Запоминает выбор пользователя для разных меню. Сброс и возврат, изменённой в результате работы страницы, к исходному состоянию.

У Вас недостаточно прав для добавления комментариев. Возможно, Вам необходимо зарегистрироваться на сайте.

UK US (also Web developer) noun [C] IT, INTERNET someone whose job is to create websites: »She works as a web developer for a financial services company … Financial and business terms

Web developer - A web developer is a software developer or software engineer who is specifically engaged in the development of World Wide Web applications, or distributed network applications that are run over the HTTP protocol from a web server to a web browser … Wikipedia

web developer - noun A person who develops applications designed to be used via the Internet … Wiktionary

Web Developer (Mozilla extension) - Web Developer is an extension for Mozilla based web browsers which adds powerful editing and debugging tools for web developers. It has been tested to be compatible with Firefox, Flock, and Seamonkey. The extension was developed by… … Wikipedia

Web developer toolbars - Special toolbar for web developers. These toolbars usually provide one or a combination of debugging, CSS, HTML, DOM, JavaScript, and other tools which aid in web development. The toolbars are generally created by 3rd party companies, but do not… … Wikipedia

Web developer toolbars - Панель инструментов для веб разработчика. Отображает дополнительную информацию о странице. Является консолью, отладчиком, Javascript, CSS, Содержание 1 Для Internet Explorer 2 Для Firefox 2.1 Для Firebug 3 Для Opera … Википедия

Web-Developer Server Suite - Infobox Software name = Web.Developer Server Suite developer = Anatoly M. operating system = Windows genre = WAMP license = GPL website = Web.Developer Server SuiteThe Web.Developer Server Suite is an… … Wikipedia

Web developer toolbar - Barre d outils pour développeurs web Les barres d outils pour développeurs web sont des extensions de l interface de différents navigateurs, qui permettent l analyse et la modification immédiate du contenu, du code HTML, CSS et du DOM d une page… … Wikipédia en Français

Microsoft Visual Web Developer - Este artículo o sección necesita una revisión de ortografía y gramática. Puedes colaborar editándolo (lee aquí sugerencias para mejorar tu ortografía). Cuando se haya corregido, borra este aviso por favor. Microsoft Visual Web Developer es un… … Wikipedia Español

Visual Web Developer - Outil de développement Web, Microsoft Visual Web Developer est un ensemble d outils et d utilitaires visant à créer des sites Web ASP.NET version 2.0. Visual Web Developer introduit dans l environnement de développement intégré (IDE) un ensemble… … Wikipédia en Français

Книги

• Web Development with the Mac , Aaron Vegh. Everything you need to know to create Web sites using your Mac Create and deploy striking Web sites and apps on a Mac for your own business or for clients using the essential techniques in… Купить за 3330.68 руб электронная книга
• Visual Web Developer 2005 Express Edition For Dummies , Alan Simpson. Visual Web Developer Express Edition is a low-cost, entry-level version centered around pre-built projects that new developers can easily deploy and customize for their own sites Explains how… Купить за 1665.01 руб электронная книга

Web Developer Mozilla невероятно полезное расширение. Оно устанавливается в браузерах и приносит блогеру исчерпывающую информацию о состоянии сайтов. Вначале это плагин мог быть установлен только в Firefox, но в дальнейшем, тот же автор — Крис Педерик, разработал его и для Chrome. Можно скачать и установить его, в последней версии, на английском языке.

Web Developer mozilla русская версия

Для Российского блогера есть возможность установки этого расширения на русском языке, но в этом случае устанавливается не последняя версия, а предшествующая — Web Developer 1.19.

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

Чтобы включить русский язык нужно перейти по ссылке к версиям . В новом окне выберем номер 1.19, нажмем кнопку «добавить в Firefox». После перезагрузки браузера, верхняя панель расширения окажется на русском языке. Дальше все становится понятным. Загрузим вначале свой сайт, и начнем его анализировать, при помощи многочисленных опций, верхней панели.

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

Web Developer mozilla отключить некоторые функции

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

• • Отключаю «кэш» и «мелкий шрифт», но отключить можно java script и другие функции.

• • «Cookies клик» открывает большую страницу со списком. Здесь отдельные куки можно изменить или удалить, но пока посмотрела, ни к чему не прикасаясь. После просмотра вкладку закрываю и перехожу к следующим пунктам.

• • «Ошибки CSS» — также открываются строки выпадающего меню. Стили можно отключить. Но я хочу их посмотреть, поэтому нажимаю строку: информации о CSS. В результате открылся лист со всеми стилями, встроенными в тему, плагинов и виджетов, получается длинная вебстраница.

«Формы» — п ри просмотре сайта выделились цветом сайтбары, формы подписки, поиск. Эта вкладка нужна веб мастерам, при создании шаблонов, потому здесь много строк с параметрами.

Web Developer mozilla — другие панели для оценки сайта

• • Графика — показать атрибуты alt – подсвечивается описания над картинками. Можно просмотреть все страницы сайта и выявить, где описаний нет, чтобы исправить. Размер картинок нам известен, но здесь указывается вес и количество изображений. У меня все в порядке – вес небольшой, каждое изображение по 3 кб. Найти поврежденные изображения — на главной странице — не найдено. Открывается отдельный лист, где есть описания всех изображениях, включая счетчики и фавикон. Когда все посмотрим, галочки снимаем.

• • На панеле информации строк много. Нажимаю «показать id и class», при этом подсвечиваются ссылки, на месте их расположения, то есть на сайте. Это очень впечатляет, потому что атрибуты Title и вложенность документов — показываются окраской.

• • Вес документа – страница открылась, но вначале была пустой. Загрузку нужно подождать, немного. Однако вскоре появляется ценная информация о весе отдельных разделов. Поражает большое количество скриптов и их величина. Стоит подумать, как их можно сократить и уменьшить.

• • Ссылки с главной страницы. Учитываются все: заголовок сайта, категории, теги облака меток, картинки, счетчик, jvascript виджеты, комментарии. По некоторым ссылкам пробовала переходить, на страницы сайта. Адреса в комментариях закрыты, благодаря, Однако количество ссылок не уменьшается из-за особенностей кода Word Press, который сложно исправить. Всего получается по 74 — 86 внутренних ссылок, но по правилами SEO, не допускается, чтобы их количество превышало 100.
  • Есть информация о мета-тегах главной страницы.

Информация разное

• • Разное — содержат: линейку, лупу, html редактор, скрытые элементы.

• • Контуры — отображаются границы заголовков, ссылок, контуры блоков. Можно посмотреть одновременно контуры двух или трех элементов сайта.

• • Размеры — показываются размеры окна, области просмотра. Есть возможность подогнать размеры окна и шрифта, нажимая кнопку увеличения и уменьшения.

• • Инструменты — осуществляется переход в сервисы валидаторов. У меня при проверке выявилось много ошибок CSS и HTMI. Например, вначале проверяется CSS, а потом предлагается сгенерированный корректный файл стилей.

• • По данному совету сделала следующее: активировала другую, простую тему /ненадолго/. Скопировала свой файл стилей, перенесла его в блокнот, сохранила, а из редактора сайта удалила. Скачала корректный файл из валидатора и вставила вместо своего.

• • Перешла на сайт. И что вижу, с новыми, корректными стилями? Сайт на месте, но какой? Вид отвратительный. Шаблон стал одноколоночным. Тексты растянулись от края до края, красок нет никаких.
  • Потому скорее вернула свой файл с ошибками CSS и все исправилось. С другой стороны, ошибки валидации нужно исправлять, но мне это пока недоступно.

Для браузера Chrom

Версия веб. разработчика для браузера Chrom, тем же автором, усовершенствована и дополнена. По сравнению с расширением для браузера Mozilla, немного другие опции. Текст английский, но некоторые открывающиеся страницы переводятся.

Лучше, когда человек хотя бы знаком с английским языком, потому что в Интернете это нужно. После просмотра в веб. разработчике, представления о структуре блога улучшаются.

Анализ в этом расширении должен быть постоянным, потому установить его желательно в браузере каждому блогеру. Хотя бы для того, чтобы контролировать у себя количество ссылок, на каждой странице.

Шаг 1. Устанавливаем последнюю версию

Английскую, при этом самую свежую, версию приложения Web Developer в Firefox или в Chrom можно установить через настройки браузера. Для Firefox: открываем в опции " Дополнения" (можно открыть нажатием комбинации трёх клавиш Ctrl+Shift+A ) раздел " Расширения" — см. Рис. 1 или Рис. 2.

В поисковой строке вводим запрос:

При установке приложения выполняем предлагаемые в Диалоге действия. Если все выполнили последовательно, то в списке расширений у вас появится ещё одно дополнение — Web Developer (Рис. 3).

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

Шаг 2. Руссифицируем Web Developer

Для «перевода» названий опция Web Developer на русский язык придется «понизить» установленную версию до 1.1.9. На момент написания данного блога ни одна более «высокая» версия не поддерживала возможность перехода на русский. Поэтому придется отдельно скачать расширение и самим его загрузить в браузер. Переходим по ссылке:

Наведите мышь чуть правее от названия нужной нам версии 1.1.9. Высветится опция «Добавить в Firefox».

Небольшое дополнение: Статья была написана в 2013 году. В середине 2016 года Mozilla Firefox ограничила доступ к некоторым более ранним расширениям и дополнениям. Поэтому, если у вас установлена самая последняя версия Mozilla Firefox, то напротив расширения Web Developer версии 1.1.9 будет как бы неактивная кнопка «Добавить в Firefox» (ниже комментарий, что не доступно для данной версии Mozilla Firefox). Не пугайтесь! Всё равно нажимайте на «серую» кнопку «добавить». Подтвердите желание установить и установка пройдет.

Mozilla попросит перезагрузки. Сделать ее сразу после установки приложения или отложить на следующий раз, решать вам. Принципиального значения не имеет, так как приложение Web Developer перейдёт на русский язык только после перезагрузки и займет свое место в панели инструментов.

Влад Мержевич

Хотя расширение имеется для двух разных браузеров, версия под Firefox находится в актуальном состоянии и регулярно обновляется, чего не скажешь о версии под Chrome. К тому же поддерживает русский язык. Поэтому в дальнейшем описание будет идти только для Firefox.

Установка происходит довольно просто, достаточно зайти браузером Firefox на сайт автора и нажать «Download», после чего вы будете перемещены на сайт, где надо щёлкнуть по «Добавить в Firefox» (рис. 7.1).

Рис. 7.1. Добавление в Firefox

Также можно зайти напрямую на страницу с расширением.

После добавления появится окно с предупреждением (рис. 7.2), жмём кнопку «Установить сейчас» и процедура установки закончена.

Рис. 7.2. Установка Web Developer

Ещё одним способом установки разных расширений является использование меню Инструменты > Дополнения . В окне поиска набираем «web developer», жмём Enter , в списке ниже появится нужное нам дополнение (рис. 7.3).

Рис. 7.3. Окно с дополнениями Firefox

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

Рис. 7.4. Web Developer в браузере

Пройдёмся по пунктам меню Web Developer.

Отключить кэш

Отключает встроенный кэш браузера. Обычно изображения и копии просмотренных страниц сохраняются браузером на локальном диске для экономии времени загрузки. При повторном открытии страницы, браузер сравнивает локальную копию с оригиналом и если они совпадают, то загружается локальная копия. В некоторых случаях происходит загрузка локальной версии страницы, даже при изменении оригинала. К примеру, в настройках браузера может быть установлена проверка каждые два часа, обновилась ли на сервере сохранённая в кэш страница. Впрочем, Firefox не позволяет проводить тонкую настройку кэша наподобие Opera.

Обновить страницу в обход кэша можно также комбинацией клавиш Ctrl +F5 , она поддерживается всеми браузерами.

Java - язык программирования, разработанный компанией Sun Microsystems. Небольшие программы на этом языке (так называемые апплеты) используются для расширения функциональности веб-страниц. В Firefox встроена поддержка этого языка, которую можно отключить через этот пункт меню. В версии Firefox 3.6 не работает.

Отключить JavaScript

Язык программирования, предназначенный для работы скриптов - интегрированных с веб-страницей программ. JavaScript широко используется при создании веб-страниц для расширения их функциональности, например создать различные меню, формы, эффекты и др. Если выбрать пункт Отключить JavaScript > Полностью , то вся функциональность на сайте перестанет работать. Этот пункт меню можно использовать для проверки работы сайта без скриптов, а также для обхода различных ограничений, которые устанавливают авторы сайтов, вроде отключения работы правой кнопки мыши. Web Developer говорит, что нет таких ограничений, которые нельзя было бы обойти.

Отключить META-переадресацию

С помощью тега можно осуществить автоматическую переадресацию на указанный документ через определённый промежуток времени. Для этого используется тег и значение Refresh атрибута http-equiv (пример 7.1).

Пример 7.1. Автоматическая переадресация

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

Отключить минимальный размер шрифтов

В настройках Firefox можно установить минимальный размер шрифта, он будет использоваться для текста, размер которого меньше указанного. Это позволяет сделать просмотр страниц более удобным для чтения, особенно на сайтах, у которых текст отображается шрифтом, размер которого слишком мал для комфортного восприятия.

Чтобы установить минимальный размер шрифта, выберите в меню Инструменты > Настройки... , откройте панель Содержимое и щёлкните по кнопке Дополнительно в группе Шрифты и цвета. Вы можете выбрать минимальный размер шрифта из выпадающего меню Наименьший размер шрифта .

Web Developer позволяет быстро включать или отключать эту возможность. Однако, если минимальный размер шрифта в настройках не задан, этот пункт никак не влияет на результат.

Отключить цвета страницы

Выключает любые цвета, заданные с помощью свойства background или background-color . Затрагиваются также фоновые рисунки, которые установлены с помощью background .

Отключить блокировщик Popup

Всплывающие окна обычно используются для рекламы, поэтому в браузерах они обычно блокируются и не допускаются. Данный пункт позволяет быстро включить и выключить эту опцию.

Отключить прокси

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

Отключить Referrers

Referrer это один из заголовков протокола HTTP и позволяет получить адрес страницы, с которой пользователь пришёл на сайт. Если вы печётесь о безопасности своих данных, включите этот пункт.

Кукисы или куки, как их называют на жаргоне, это небольшие текстовые файлы на локальном компьютере, в которых сохраняется полезная для сайта информация. С помощью куки можно запомнить имя пользователя, его статус и другую информацию, которая используется на сайте. Firefox задаёт настройки куки через меню Инструменты > Настройки... , панель Приватность . В целях безопасности вы вообще можете отключить приём куки с сайтов.

Сами куки представляют собой набор некоторых параметров:

• уникальное имя;
• значение;
• путь - отправлять куки только при совпадении пути и адреса страницы, путь «/» обозначает любую страницу;
• домен - для какого адреса сайта актуальна запись;
• дата истечения - сообщает браузеру, когда куки можно удалить.

Отключить Cookies

Отключает приём куки с сайтов.

Удалить Cookies сессии

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

Удалить Cookies для домена

Удаляет все куки для сайта, который в данный момент открыт в браузере.

Удалить Cookies для пути

Удаляет все куки для сайта, путь которых совпадает с путём сайта открытого в браузере.

Информация о Cookies

Открывается дополнительная страница, где в табличной форме представлены все куки с данного сайта. Их параметры можно отредактировать или вообще удалить куки (рис. 7.5).

Рис. 7.5. Информация о куки с сайта youtube.com

Добавить Cookies

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

Рис. 7.6. Окно для добавления

Добавление обычно требуется для отладки работы куки и поведения сайта при их наличии.

CSS

Это меню отвечает за стили текущей страницы.

Отключить стили

Предназначено для отключения стилей по какому-либо признаку.

Все стили

Отключает все используемые на странице стили.

Стиль браузера по умолчанию

Отключает стиль для всех элементов, к которым он добавляется по умолчанию браузером. К примеру, текст внутри

и

Имеет разный размер.

Заголовок

После отключения стиля размер текста у этих элементов будет одинаковый.

Встроенные стили

Отключает стиль внутри тега