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

панель веб. разработчика

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

 Отключить некоторые функции

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

Другие панели 

  • Cookies клик  открывает большую страницу со списком, отдельные куки можно изменить или удалить. Пока посмотрела, ни к чему не прикасаясь. После просмотра вкладку закрываю и перехожу к следующим пунктам.
  • Ошибки CSS — также открываются строки выпадающего меню. Стили можно отключить. Но я хочу их посмотреть, поэтому нажимаю строку: информации о CSS. Открылся лист со всеми стилями,  встроенными в тему,  плагинов и виджетов. Получается длинная вебстраница.
  •  Формы — при просмотре выделились цветом сайтбары, формы подписки, поиск. Эта вкладка нужна веб мастерам, при создании темы, здесь много строк.
  • Графика — показать атрибуты alt – подсвечивается описания над картинками. Можно просмотреть все страницы сайта и выявить, где описаний нет, чтобы исправить.   Размер картинок нам известен, но здесь  указывается вес и количество изображений. У меня все в порядке – вес небольшой, каждое изображение по 3 кб. Найти поврежденные изображения — на главной странице  — не найдено. Открывается отдельный лист, где есть описания всех изображениях, включая счетчики и фавикон. Когда все посмотрим, галочки снимаем.
  •  Панели информации Строк много, нажимаю «показать id и class», подсвечиваются ссылки, на  месте их расположения на сайте – очень впечатляет. Атрибуты Title, вложенность документов — показываются окраской.
  • Вес документа – страница открылась, но вначале была пустой, нужно подождать, немного. Появляется ценная информация о весе отдельных разделов. Поражает большое количество скриптов и их величина. Стоит подумать, как их можно сократить и уменьшить.
  • Ссылки с главной страницы: учитываются все:  заголовок сайта, категории, теги облака меток, картинки, счетчик, jvascript виджеты, комментарии. По некоторым ссылкам пробовала переходить, комментарии не выходят за пределы сайта, благодаря, плагину. Всего получилось 74 внутренних ссылки.
  • Есть информация о мета тегах главной страницы.
  • Разное — содержат: линейку, лупу, html редактор, скрытые элементы.
  • Контуры — отображаются границы заголовков, ссылок, контуры блоков.  Можно посмотреть одновременно контуры двух или трех элементов сайта.
  • Размеры — показываются размеры окна, области просмотра. Есть возможность подогнать размеры окна и шрифта, нажимая кнопку увеличения и уменьшения.
  • Инструменты — осуществляется переход в валидаторы. Ошибок CSS и HTMI, очень много. Например, вначале проверяется CSS, а потом предлагается сгенерированный корректный файл стилей. Сделала следующее: активировала  другую, простую тему / ненадолго/. Скопировала свой файл стилей, перенесла его в блокнот, сохранила, из редактора сайта удалила. Скачала корректный файл из валидатора и вставила вместо своего. Перешла на сайт. И что вижу, с новыми, корректными стилями? Сайт на месте, но какой? Вид отвратительный: шаблон стал одноколоночным, тексты растянулись от края до края, красок никаких. Скорее вернула свой файл с ошибками и все исправилось.  С другой стороны, ошибки валидации нужно исправлять, но мне это пока недоступно.

dopolneniy Firefox

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

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

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

Комментарии 2

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

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

Добавить комментарий

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