02.12.2015      671      2
 

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


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

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

dopolneniy Firefox

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

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


Об авторе: Ксенья Юрьевна Бастрикова

Обсуждение: 2 комментария
  1. Алевтина:

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

  2. Александр Каратаев:

    Хм… Попробую поставить и посмотреть, что за зверь такой… А всяким валидаторам я не доверяю — очень уж у них алгоритмы несовершенные. Насчёт оптимизации css тоже сталкивался — оптимизируешь каким-то сервисом, потом всё коряво выглядит. тут надо осторожно…
    В общем поиграюсь на тестовом блоге. Посмотрим…

Ваш комментарий

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

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

Поиск Яндекса

скрипт против дублей

Мощный SEO плагин Clearfy

Яндекс.Метрика