Я постоянно пользовался Firefox. Он меня вполне устраивал, особенно в процессе разработки и тестирования сайта. я попробовал сразу же после его выхода. Понравилась скорость рендеринга страниц.
Но через небольшое отрезок времени вернулся к Firefox, по причине отсутствия расширений и дополнений таких как Google Page Rank и панель веб-разработчика Webdev. Теперь с проблем нет, их уже существует большое множество.
Плагин FireBug для Firefox
Это основной плагин веб-разработчика. Вы можете редактировать, выполнять отладку, просматривать CSS, HTML и JavaScript. Результат внесенных изменений отображается мгновенно. Плагин FireBug очень удобен для поиска фрагмента кода, отвечающего за вывод того или иного блока на странице, и, соответствующего ему CSS-стиля.
Плагин имеет замечательную функцию Inspect, с помощью которой можно посмотреть какие тэги и свойства определяют положение отдельного элемента на странице. Кроме того, во вкладке Layout можно посмотреть какие поля и отступы заданы для этого элемента.
Этот плагин является дополнением к FireBug. C помощью него можно легко разместить в вашем макете изображения и посмотреть на эскиз как бы в уже готовом виде. Для этого надо выбрать картинки и разместить их прямо на странице. Картинки полупрозрачные, легко перетаскиваются мышкой.
Скачать плагин Pixel Perfect для Firefox.
HTML Validator упростит процесс создания валидной HTML разметки в соответствии с веб-стандартами. Теперь нет необходимости не нужно заходить на официальную страницу валидатора.
Плагин подробно показывает ошибки и точное место, а также объяснит, как эту ошибку исправить. Работает в фоновом режиме и встроен в страницу просмотра исходного кода. Очень экономит время.
Шаг 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 () под названием Web Developer.
Этот плагин для браузера Firefox () — своеобразный швейцарский нож для вебмастеров, имеющий массу возможностей и инструментов в своем составе.
Web Developer ни в коем разе не умоляет достоинства рассмотренного ранее , а скорее очень сильно дополняет его. Если вы еще не очень хорошо знакомы с возможностями Фаербага, то можете почитать о нем по приведенной ссылке.
Установка и возможности ВебДевелопера
Вы сможете посмотреть как устроена заинтересовавшая вас Html форма, изменить некоторые ее параметры, к примеру, включить отображение в полях паролей вносимых символов или же конвертировать GET-запросы в POST и, наоборот.
Другие инструменты этого замечательного плагина
В области «Графика» имеются пункты, которые позволят вам отключить показ картинок (либо всех изображений, либо только загруженных с внешних ресурсов, либо только анимированных). Так же вы сможете простой установкой галочек рядом с нужными пунктами в меню «Графика» настроить отображение рядом с изображениями информации о содержимом атрибута ALT (альтернативный текст), а также информации о весе данного фото, его размере в пикселах и пути до файла с изображением.
Так же можно будет настроить в плагине Web Developer показ контуров изображений, найти поврежденные картинки, вывести сводную информацию обо всех фотографиях на открытой вебстранице и, например, настроить показ вместо них содержимого атрибута ALT.
В области «Инфо» данный плагин может предоставить огромное количество информации об открытой в браузере вебстранице в целом. Пунктов в этом меню очень много. Например, активация пункта «Показать размеры блоков» приведет к выделению всех блоков (DIV контейнеров) на вебстранице и демонстрации рядом с ними их точных размеров в пикселях.
Можно будет также с помощью плагина Web Developer посмотреть структуру заголовков данной страницы, информацию о ссылках на ней и многое другое.
В области «Разное» сосредоточены те возможности, которые не нашли место в других группах инструментов. Интересной из этой группы является «Линейка», при активации которой вы получаете возможность в измерять расстояния между элементами вебстраницы или определять размер в пикселях того или иного блока.
После активации линейки из состава плагина курсор мыши превращается в крест и вы можете, нажав и удерживая левую кнопку мыши, выделить нужный элемент страницы. Под панелью инструментов Web Developer вверху окна браузера Firefox находится панель инструмента «Линейка», на которой будет выведена информация о размере выделенной области.
В области «Разное» сосредоточенно еще довольно много интересных и полезных возможностей. Например, пункт «Редактор HTML» открывает дополнительное окно с HTML кодом данной страницы. Все вносимые в нем изменения будут тут же отображать в браузере. Очень удобно для быстрых экспериментов с дизайном сайта. При этом, естественно, никаких изменений в реальных файлах движка веб проекта производиться не будет.
Но зато вы сможете с помощью Web Developer в реальном времени промоделировать различные варианты построения данной страницы через Firefox. Если же новый, смоделированный с помощью него вариант кода вас устроит, то придется вносить изменения уже в реальные файлы движка вебсайта, найти которые вы сможете, используя способ описанный .
Область «Контуры» очень поможет вам при изучении элементов оформления вебстраницы. Активируя тот или иной пункт в меню «Контуры» можете выделить на странице отдельные типы ее элементов, например, элементы уровня блока (DIV контейнеры), элементы Html таблиц (), фреймы ( статья живет) или же ссылки на странице, у которых нет атрибута Title. Очень повышает наглядность верстки.
В меню «Размеры» собраны несколько возможностей управления размером окна браузера. Так же можно задать окну произвольный размер, чтобы посмотреть на поведения данной страницы при вносимых изменениях.
В группе «Инструменты» собраны возможности для проверки валидации (соответствия современным требованиям к вебразработке). Можно осуществить проверку HTML, CSS, WAI и Section 508. Проверка осуществляется через онлайновый валидатор от .
Настройку плагина можно произвести, выбрав в группе инструментов «Настройки» пункт с аналогичным названием. В заключении хочу сказать, что с помощью возможностей Web Developer можно легко разобраться в том, как устроена та или иная понравившаяся web-страница, а также он будет очень полезен при создании и отладке сайтов.
Удачи вам! До скорых встреч на страницах блога сайт
посмотреть еще ролики можно перейдя на");">
Вам может быть интересно
SEObar - удобный и информативный SEO плагин для Оперы
Firebug - как пользоваться лучшим плагином для вебмастеров
Оптимизация и сжатие CSS в Page Speed - как отключить внешние файлы стилей и объединить их в один для ускорения загрузки
Rds Bar и Page Promoter бар в помощь вебмастеру
Safari - где скачать и как настроить под себя бесплатный браузер для Windows от Apple
Расширения и темы для Google Chrome
Плагины и темы для Mozilla Firefox - какие дополнения и расширения стоит скачать и установить
Здравствуйте, уважаемые читатели блога сайт! В рамках рубрики «Инструменты вебмастера» хочу познакомить вас с дополнением Web Developer Firefox , который дает возможность оптимизаторам осуществить многогранный анализ любого ресурса, а также оказывает существенную помощь вебмастерам в разработке и редактировании сайтов.
Кстати, вы можете получить полезную информацию, ознакомившись с обзорами, представляющими как наиболее популярные , так и . Дополнения Фаерфокс, если брать общую ситуацию, несколько превосходят по функциональным возможностям и удобству использования свои аналоги для других популярных браузеров ( , ), по крайней мере, на текущий момент ситуация такова.
Установка Вэб Девелопер
Поэтому, несмотря на то, что основную работу с сайтом я выполняю в Хроме, очень часто переключаюсь на , когда нужно задействовать то или иное дополнение. Кстати, на страницах блога вы сможете найти вполне информативный обобщающий материал о самых востребованных браузерах (), на основании которого, вполне вероятно, сделаете свой выбор.
Не является исключением и плагин Вэб Девелопер для Мазилы, который для меня несколько более удобен в использовании, чем его братишки для Хрома или Оперы, хотя выполняет тождественные операции. Скачать Web Developer можно c сайта разработчика . После того, как попадете на страницу, нужно нажать на одну из ссылок «Download for Firefox», «Download for Chrome» или «Download for Opera» для загрузки дополнения в соответствующий браузер.
После этого вас перебросит на страницу загрузки, где надо кликнуть по зеленой кнопке в правом верхнем углу «Добавить в Firefox» («Добавить в Chrome», «Добавить в Opera»). Если вы находитесь в том же web-браузере, плагин для которого загружаете, то сразу начнется инсталляция Developer, по окончании которой последует предложение перезагрузить браузер для вступления изменений в силу.
Если же вы находитесь, скажем в Хроме, а загружаете дополнение для Фаерфокс, то после перехода по ссылке «Download for Firefox» со страницы автора плагина попадаете на официальную страницу Mozilla , где кликаете по ссылке на серой кнопке «Загрузить сейчас», после чего откроется обычное диалоговое окно загрузки и вы сохраняете файл на жестком диске своего компьютера. Далее устанавливаете Вэб Девелопер обычным способом, активировав сохраненный установочный файл.
Важнейшие опции плагина Web Developer
Итак, после перезагрузки web-браузера наверху увидите панель, которую имеет этот плагин для Firefox (описываю на примере Мазилы, для Оперы и Хрома картинка немного другая, но суть остается той же):
Все опции поделены на группы, в каждой из которых есть возможность выбрать нужную функцию. Например, если щелкнуть по группе «Disable» (отключить) дополнения Developer, то откроется выпадающее меню, где выбираете тот инструмент плагина, который нужен на данный момент.
Отмечу, что когда кликаете по какой-либо строчке с инструментом, то появляется галочка, которая является показателем активации данной функции и означает, что опция работает в данный момент. При повторном нажатии галочка исчезает, что приводит к деактивации инструмента.
4. Еще одна интересная группа функций, которую имеет плагин Firefox Web Developer - «Forms»:
Здесь появляется широкое поле для деятельности. Можно взглянуть на информацию об на данной web-странице, подвергнуть их редактированию с получением немедленного результата онлайн.
5. Далее, подраздел «Images» (изображения) дополнения Developer. C помощью различных опций этого раздела есть возможность проводить разные манипуляции с изображениями на вебстранице Фаерфокс. Вот некоторые пункты из этой группы.
5.1. «Disable Images» - у этой опции есть несколько подфункций:
- «Disable All Images» - отключить все изображения;
- «Disable External Site Images» - отключить изображения стороннего сайта;
- «Disable Image Animations» - выключить анимацию изображений.
5.2. «Display Alt Attributes» - при активации этой опции появится информация об , который играет наиважнейшую роль в деле оптимизации и продвижения ресурса.
5.3. «Display Image File Size» - показать размер файла изображения. После того, как отметите галочкой эту строку, увидите инфу о весе (в килобайтах) всех картинок, которые находятся на странице. Очень удобно для подготовки к . Кстати, одну из составных частей оптимизации картинок, а именно сжатие, очень удобно осуществлять в .
Кроме того, используя вкладку «Images», можно найти испорченные изображения, скрыть изображения фона, скрыть картинки и т.д.
6. Группа опций «Information» позволяет получить всеобъемлющую информацию об открытой в Фаерфокс вебстранице. Здесь очень много пунктов. Например:
6.1. «Display Id & Class Details» - показать всех элементов.
6.2. «Display Link Details» - показать информацию обо всех ссылках. Здесь на свет божий вылезут все характеристики и атрибуты .
6.3. С помощью опции «View Document Size» есть возможность проанализировать данные о весе всей страницы и каждой из ее составляющих, открытой в Фаерфоксе:
7. Посредством следующей группы «Miscellaneous» (разное) можно осуществлять разнообразные действия по редактированию элементов вебстраницы, открытой в Файрфоксе. Например, здесь присутствует замечательный инструмент «Line Guides» (линейка). После активации данной функции появятся вертикальные и горизонтальные линии, цвет которых можно изменить по своему усмотрению, кликнув по кнопке «Color»:
Кнопки «Add Horizontal Line Guides» и «Add Vertical Line Guides» позволяют добавить любое количество горизонтальных и вертикальных линий для редактирования. Все эти линии можно передвигать на нужное расстояние с помощью обретшего форму креста курсора. С правой стороны строки «Web Developer Line Guides» появится надпись, информирующая об изменении позиции передвигаемых линий, которые позволяют редактировать различные элементы на web-странице.
При активации функции «Edit HTML» можно редактировать в появившемся внизу окне, причем все вносимые изменения будут видны сразу. Естественно, реальное редактирование файлов производится не будет. Это очень удобно, когда необходимо поэкспериментировать с дизайном сайта.
8. Вкладка инструментов «Outline» (контур) Web Developer сильно поможет вебмастерам при анализе различных элементов открытой в браузере Firefox web-страницы. Если активировать поочередно различные функции из выпадающего меню этой группы, то можно выделить особым образом разные области элементов страницы.
Например, нужно выделить заголовки посредством обведения их контуром. Для этого надо выбрать из выпадающего меню строку «Outline Headings». В результате получите картину, где заголовки будут заключены в рамки:
При выборе из списка функции «Show Element Tag Names When Outlining» (показать наименование тега выделенного элемента) активируется инструмент, который отметит, например, теги заголовков:
9. Группа «Resize» (изменение размеров) плагина Developer - с помощью находящихся здесь инструментов можно производить разнообразные действия по изменению размеров окна браузера Фаерфокс, в том числе задать ему произвольный размер и посмотреть, как изменится вид элементов данной страницы.
10. «Tools» (инструменты) дополнения Вэб Девелопер позволяют провести и в соответствии с современными требованиями, регламентированными Международным Консорциумом W3C.
Пожалуй, на сегодня все. Надеюсь, вы приняли к сведению те полезные функции, которые предлагает плагин Developer для браузера Firefox, и воспользуетесь ими на благо своих проектов. На десерт незабвенная комическая миниатюра «Поликлиника» от Владимира Винокура:
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, немного другие опции. Текст английский, но некоторые открывающиеся страницы переводятся.
Лучше, когда человек хотя бы знаком с английским языком, потому что в Интернете это нужно. После просмотра в веб. разработчике, представления о структуре блога улучшаются.
Анализ в этом расширении должен быть постоянным, потому установить его желательно в браузере каждому блогеру. Хотя бы для того, чтобы контролировать у себя количество ссылок, на каждой странице.
