Web developer для firefox на русском

Web developer для firefox на русском

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com! В рамках рубрики «Инструменты вебмастера» хочу познакомить вас с дополнением Web Developer Firefox, который дает возможность оптимизаторам осуществить многогранный анализ любого ресурса, а также оказывает существенную помощь вебмастерам в разработке и редактировании сайтов.

Кстати, вы можете получить полезную информацию, ознакомившись с обзорами, представляющими как наиболее популярные плагины Google Chrome, так и расширения для Firefox. Дополнения Фаерфокс, если брать общую ситуацию, несколько превосходят по функциональным возможностям и удобству использования свои аналоги для других популярных браузеров (Opera, IE, Google Chrome), по крайней мере, на текущий момент ситуация такова.

Установка Вэб Девелопер

Поэтому, несмотря на то, что основную работу с сайтом я выполняю в Хроме, очень часто переключаюсь на Mozilla 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, то откроется выпадающее меню, где выбираете тот инструмент плагина, который нужен на данный момент.

Отмечу, что когда кликаете по какой-либо строчке с инструментом, то появляется галочка, которая является показателем активации данной функции и означает, что опция работает в данный момент. При повторном нажатии галочка исчезает, что приводит к деактивации инструмента.

1. «Disable cache» — отключить кэш браузера. Одним нажатием мышки отключаем кеш, эта функция может быть полезна во многих случаях. Кликнув по «Disable Minimum Font Size», вы можете отключить минимальный размер шрифта на вебстарнице, а активировав «Disable Page Colors» — выключить цветовое оформление данной страницы.

2. Группа опций «Cookies» предназначена для священнодействий с куками обозревателя. Здесь можно отключить все куки (Disable All Cookies), добавить (Add Cookie. ), удалить куки домена (Delete Domain Cookies), посмотреть подробную информацию о куках (View Cookie Information).

Читайте также:  Wap spaces ru вход

Рассмотрим еще некоторые функции, которыми обладает это дополнение Firefox и которые могут быть востребованы оптимизатором или вебмастером в первую очередь.

3. Скажем, вкладка «CSS» Web Developer, которая содержит несколько очень важных пунктов.

Можно посмотреть, как будет выглядеть страница в веббраузере, если полностью или частично отключить стили CSS. Для этого надо нажать строку «Disable Styles». Появится подменю, в котором можно выбрать то действие, которое необходимо:

3.1. «Disable All Styles» — отключить все стили.

3.2. «Disable Browser Default Styles» — отключить стили в браузере по умолчанию. То есть к каждому элементу применяются стили, которые не заданы явно в соответствующем документе (например, в файле style.css). В каждом случае предусмотрены значения свойств для каждого элемента по умолчанию. Так вот эти значения можно отключить и посмотреть, как в этом случае будет оформлена web-страница.

3.3. Если поставите галочку напротив пункта «Display Style Information» (посмотреть информацию о стилях), то получите полновесную информацию о любом элементе на странице. Для этого достаточно подвести курсор к нужному элементу, который мгновенно будет заключен в красную рамку и в строке напротив надписи «Web Developer» увидите данные о структурной составляющей всех контейнеров div для этого элемента.

Ежели кликнуть мышью по выбранному элементу с данной активированной функцией плагина Developer, то внизу окна браузера Firefox откроется выделенное пространство с подробной информацией о стилях CSS для этого элемента. Нечто подобное можно реализовать при помощи плагина Firebug для Firefox.

4. Еще одна интересная группа функций, которую имеет плагин Firefox Web Developer — «Forms»:

Здесь появляется широкое поле для деятельности. Можно взглянуть на информацию об HTML формах на данной web-странице, подвергнуть их редактированию с получением немедленного результата онлайн.

5. Далее, подраздел «Images» (изображения) дополнения Developer. C помощью различных опций этого раздела есть возможность проводить разные манипуляции с изображениями на вебстранице Фаерфокс. Вот некоторые пункты из этой группы.

5.1. «Disable Images» — у этой опции есть несколько подфункций:

  • «Disable All Images» — отключить все изображения;
  • «Disable External Site Images» — отключить изображения стороннего сайта;
  • «Disable Image Animations» — выключить анимацию изображений.

5.2. «Display Alt Attributes» — при активации этой опции появится информация об атрибуте Alt (альтернативный текст) для всех HTML картинок на web-странице, который играет наиважнейшую роль в деле оптимизации и продвижения ресурса.

5.3. «Display Image File Size» — показать размер файла изображения. После того, как отметите галочкой эту строку, увидите инфу о весе (в килобайтах) всех картинок, которые находятся на странице. Очень удобно для подготовки к оптимизации изображений. Кстати, одну из составных частей оптимизации картинок, а именно сжатие, очень удобно осуществлять в программе для просмотра изображений FastStone Image Viewer.

Кроме того, используя вкладку «Images», можно найти испорченные изображения, скрыть изображения фона, скрыть картинки и т.д.

6. Группа опций «Information» позволяет получить всеобъемлющую информацию об открытой в Фаерфокс вебстранице. Здесь очень много пунктов. Например:

6.1. «Display Id & Class Details» — показать Id (идентификаторы) и class (классы) всех элементов.

Читайте также:  Hp deskjet f380 отзывы

6.2. «Display Link Details» — показать информацию обо всех ссылках. Здесь на свет божий вылезут все характеристики и атрибуты HTML гиперссылок.

6.3. С помощью опции «View Document Size» есть возможность проанализировать данные о весе всей страницы и каждой из ее составляющих, открытой в Фаерфоксе:

7. Посредством следующей группы «Miscellaneous» (разное) можно осуществлять разнообразные действия по редактированию элементов вебстраницы, открытой в Файрфоксе. Например, здесь присутствует замечательный инструмент «Line Guides» (линейка). После активации данной функции появятся вертикальные и горизонтальные линии, цвет которых можно изменить по своему усмотрению, кликнув по кнопке «Color»:

При активации функции «Edit HTML» можно редактировать HTML код в появившемся внизу окне, причем все вносимые изменения будут видны сразу. Естественно, реальное редактирование файлов производится не будет. Это очень удобно, когда необходимо поэкспериментировать с дизайном сайта.

8. Вкладка инструментов «Outline» (контур) Web Developer сильно поможет вебмастерам при анализе различных элементов открытой в браузере Firefox web-страницы. Если активировать поочередно различные функции из выпадающего меню этой группы, то можно выделить особым образом разные области элементов страницы.

Например, нужно выделить заголовки посредством обведения их контуром. Для этого надо выбрать из выпадающего меню строку «Outline Headings». В результате получите картину, где заголовки будут заключены в рамки:

При выборе из списка функции «Show Element Tag Names When Outlining» (показать наименование тега выделенного элемента) активируется инструмент, который отметит, например, теги заголовков:

9. Группа «Resize» (изменение размеров) плагина Developer — с помощью находящихся здесь инструментов можно производить разнообразные действия по изменению размеров окна браузера Фаерфокс, в том числе задать ему произвольный размер и посмотреть, как изменится вид элементов данной страницы.

10. «Tools» (инструменты) дополнения Вэб Девелопер позволяют провести валидацию HTML кода и проверку корректности CSS документа в соответствии с современными требованиями, регламентированными Международным Консорциумом W3C.

Пожалуй, на сегодня все. Надеюсь, вы приняли к сведению те полезные функции, которые предлагает плагин Developer для браузера Firefox, и воспользуетесь ими на благо своих проектов. На десерт незабвенная комическая миниатюра «Поликлиника» от Владимира Винокура:

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

Firefox Developer Edition — Русский

Ваша система может не удовлетворять требованиям Firefox, но вы можете попробовать одну из этих версий:

Firefox Developer Edition — Русский

Ваша система не удовлетворяет требованиям для запуска Firefox.

Ваша система не удовлетворяет требованиям для запуска Firefox.

Пожалуйста, следуйте этим инструкциям, чтобы установить Firefox.

Firefox Developer Edition автоматически осуществляет обратную связь с Mozilla. Подробнее

Повышенная производительность

CSS-движок нового поколения

Firefox Quantum включает в себя новейший CSS-движок, написанный на Rust, содержащий в себе передовые инновации и фантастическую скорость.

Новые инструменты

Неактивный CSS

Инструменты разработчика Firefox теперь затемняют CSS-правила, не влияющие на страницу. При наведении на значок информации, вы увидите полезное сообщение о том, почему CSS не применяется, включая подсказки о том, как устранить саму проблему.

Читайте также:  Браузер для flash игр

Новые инструменты

Инструменты разработчика Firefox

Новые инструменты разработчика Firefox — мощны, гибки и хорошо настраиваемы. В них есть лучший в своём классе отладчик JavaScript, который может эмулировать поведение других браузеров, и построен на React и Redux.

Инновационные функции

Управление CSS-сеткой

Firefox — единственный браузер с инструментами, созданными специально для построения и дизайна с помощью CSS-сетки. Эти инструменты позволяют визуализировать сетку, отображать связанные имена областей, предпросматривать трансформации на сетке и многое другое.

Краткая информация

Панель шрифтов

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

Разрабатывайте. Кодите. Тестируйте. Улучшайте.

Создавайте и улучшайте свои сайты
с помощью Инструментов разработчика Firefox

Инспектор

Изучайте и совершенствуйте код, чтобы создавать попиксельно-идеальные макеты.

Консоль

Отлаживайте CSS, JavaScript, а также проблемы с сетью и безопасностью.

Отладчик

Мощный отладчик JavaScript с поддержкой вашего любимого фреймворка.

Контролируйте сетевые запросы, которые могут замедлить или заблокировать ваш сайт.

Панель хранилища

Добавляйте, редактируйте и удаляйте кэш, куки, базы данных и данные сессий.

Режим адаптивного дизайна

Тестируйте сайты на эмулируемых устройствах в вашем браузере.

Визуальное редактирование

Точная настройка анимаций, выравнивания и отступов.

Производительность

Разблокируйте узкие места, обеспечьте упрощение процессов и оптимизируйте производительность.

Память

Находите утечки памяти и уменьшите её потребление вашим приложением.

Редактор стилей

Редактируйте и управляйте всеми CSS-таблицами стилей в вашем браузере.

Выскажитесь

Отзывы делают нас лучше. Расскажите нам, как мы можем улучшить браузер и инструменты веб-разработчика.

Принять участие

Помогите нам в создании последнего независимого браузера. Пишите код, исправляйте баги, создавайте дополнения и многое другое.

Загрузите браузер Firefox, созданный для разработчиков

Firefox Developer Edition — Русский

Ваша система может не удовлетворять требованиям Firefox, но вы можете попробовать одну из этих версий:

Firefox Developer Edition — Русский

Ваша система не удовлетворяет требованиям для запуска Firefox.

Ваша система не удовлетворяет требованиям для запуска Firefox.

Пожалуйста, следуйте этим инструкциям, чтобы установить Firefox.

Спасибо!

Если вы ранее не подтверждали подписку на новостную рассылку Mozilla, вам, возможно, придется сделать это. Пожалуйста, проверьте свой почтовый ящик или спам-фильтр, чтобы посмотреть, не пришло ли от нас письмо.

The Web Developer extension adds various web developer tools to the browser.

Метаданные расширения

Используется

Сообщить о нарушении правил этим дополнением

Если вы считаете, что это дополнение нарушает политики Mozilla в отношении дополнений, или имеет проблемы с безопасностью или приватностью, сообщите об этих проблемах в Mozilla, используя эту форму.

Не используйте эту форму, чтобы сообщать об ошибках или запрашивать новые функции в дополнении; это сообщение будет отправлено в Mozilla, а не разработчику дополнения.

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

Это дополнение может:

  • Получать доступ к вашим данных на всех сайтах
  • Помещать данные в буфер обмена
  • Получать доступ к истории браузера
  • Получать доступ ко вкладкам браузера

Узнать больше о разрешениях

«>

Ссылка на основную публикацию
Adblock detector