WebDeveloper - вебразработчик
В этой статье я хочу познакомить вас с очень полезным инструментом для вебмастера -- дополнением для браузера 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. Можно использовать и альтернативные варианты доступа к инструментам плагина:
- Кликните правой мышью в окне браузера Firefox и в открывшемся меню выберите Web Developer, откроется панель вкладок с инструментами;
- Выберите в меню браузера 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). Настройки программы. Запоминает выбор пользователя для разных меню. Сброс и возврат, изменённой в результате работы страницы, к исходному состоянию.
Далее читайте как работать с WebDeveloper.