Web Developer mozilla расширение для браузеров

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

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

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

меню Firefox

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

dopolneniy Firefox

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

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

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

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

Обсуждение: 1 комментарий
  1. Сергей

    Привет! Можешь поделиться русской версией расширения!?

Оставить комментарий

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Что будем искать? Например,Человек

Мы в социальных сетях