WebDeveloper

С этим уроком также смотрят
  • Обучающий курс по лучшим расширениям для Mozilla Firefox®

    – 0– 5587

  • Обучающий курс по лучшим расширениям для Mozilla Firefox®

    – 2– 3615

  • Обучающий курс по лучшим расширениям для Mozilla Firefox®

    – 1– 4410

Подробный обзор плагинов и расширений для упрощения жизни пользователей браузера Mozilla Firefox®.

Посмотрите, наверняка найдете для себя какое-то полезное дополнение или плагин для Firefox®!

  • Обзор расширений Mozilla Firefox

Подробный обзор плагинов и расширений для упрощения жизни пользователей браузера Mozilla Firefox.

Посмотрите, наверняка найдете для себя какое-то полезное дополнение или плагин для FireFox!

Обновлен: 4 июня 2012

Обучающий курс по лучшим расширениям для Mozilla Firefox®,
Полезные программы и утилиты

Loading the player...
Скачать урок
Текст урока

WebDeveloper — плагин FireFox для веб-разработчиков


По названию плагина (WebDeveloper) не сложно догадаться, что он создан в помощь веб-разработчикам. Предназначено данное расширение для целей веб-тестирования. Плагин WebDeveloper позволяет посмотреть страницу в разных разрешениях, с картинками или без, включить/выключить CSS, проконтролировать "куки", проверить страницу на соответствие стандартам посредством бесплатных сетевых сервисов, и многое другое. Некоторые функции WebDeveloper можно использовать не только в целях разработки - например, есть функция Forms - Show passwords, которая показывает в "парольных" полях вместо звездочек реальные символы. Однако в целом плагин будет полезен только веб-разработчикам - но полезен настолько, что без него становится работать даже как-то неуютно.

После установки плагина в FireFox, нажмем правую кнопку мыши и в внизу появившегося списка мы видим название данного плагина, наведя курсор мыши на которое получим список доступных вкладок. Первые две вкладки позволяют просмотреть, как выглядела бы веб-страница без использования тех или иных элементов в веб-дизайне. Вы можете увидеть ваш веб-сайт глазами пользователя, отключившего java-скрипты или пользующегося отключением графики для ускорения загрузки страниц при работе с Интернетом через модемное соединение. Также вы можете проверить схему защиты вашего веб-сайта, основанную на анализе рефереров*. Для этого есть возможность отключения передачи веб-браузером данных о веб-странице, с которой вы зашли на веб-сайт, серверу.

С помощью данных вкладок пользователю доступны такие возможности как отключение куков и анимации в картинках, также можно отключать показ самих рисунков и возможности выполнения скриптов Java на веб-страницах. Кроме того, доступны такие возможности как:

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


Возможности вроде отключения куков очень полезны при тестировании на пригодность применения готовых веб-приложений — например, онлайн-магазинов. При этом очень легко отследить работоспособность выбранной вами системы в условиях ограниченных способностей браузера пользователя. Отключение куков или java-скриптов — одна из возможных мер обеспечения повышенной безопасности для браузеров, применяемая также и в критических по безопасности системах, поэтому следует проверять, работоспособны ли схемы навигации вашего сайта с отключенными java-скриптами.

Следующая вкладка - Ошибок CSS нет: подразумевает работу с таблицами стилей. В контексте работы с таблицами стилей расширение позволяет подключать к просматриваемой странице пользовательскую таблицу стилей, отключать стили браузера по умолчанию. Также доступно не только отключать стили по их типу (например, вы можете отключить только стили, используемые при печати), но и редактировать CSS-таблицы. Еще можно просматривать используемую таблицу стилей в виде веб-страницы прямо во вкладке Firefox и выводить дополнительную информацию о таблицах стилей, используемых в одном из элементов оформления веб-страницы.

Управление стилями с помощью функции редактирования CSS позволяет примерить выбранный вами дизайн прямо во время работы веб-сайта. Вы просто изменяете таблицу стилей и видите, как бы выглядел веб-сайт с отредактированными таблицами стилей. Также очень полезной является возможность просмотра стилей элементов веб-страницы. При активации режима просмотра стилей (View Style Information) появляется курсор, с помощью которого следует выбрать элемент оформления веб-страницы. После выбора этого элемента веб-дизайна во вкладке браузера выводится информация об используемых им стилях оформления. Таким образом, очень просто просмотреть стиль абзаца или гиперссылки, когда происходит наезд частей дизайна или видны какие-либо диспропорции размещения элементов на вашей веб-странице.

Вкладка «Формы» здесь же доступно очищать радиокнопки (Clear Radio Buttons), конвертировать переменные запросов GET в POST и наоборот; выводить данные про поля ввода и прочие элементы веб-форм (Display form details). Не обошлось и без отмены режима «Только просмотр» для полей ввода (Make form fields writable). Кроме того, доступно не только убирать ограничение на максимальную длину поля ввода формы (Remove maximum length), но и показывать пароли (в полях ввода со звездочками), ну и конечно же, просматривать информацию о формах HTML-страницы (View form information)

Графика: управление картинками
Инфо: можно получить вспомогательную информацию о веб-странице
Разное: здесь доступны различные по функциональности дополнения
Контуры: обрисовка определенных частей веб-дизайна контурными линиями
Размеры: с помощью данного параметра можно изменить размеры окна браузера
Инструменты: а здесь доступны инструменты для разработчика
Код(Х): просмотр исходных кодов страницы.

На остальных настройках WebDeveloper для FireFox мы подробно останавливаться не станем, поскольку все достаточно интуитивно понятно.

Комментарии (0)

Оглавление
1. All-in-one Sidebar 3:32 6 18743
2. Colorful tabs — цветные вкладки FireFox 1:12 0 8917
3. Fast Video Download 1:19 2 10566
4. Firebug 4:26 0 9855
5. FireFox Showcase 1:39 0 4735
6. FireFTP 1:53 1 8690
7. Flagfox 2:49 1 3537
8. iMacros — автоматизация действий 6:32 4 32812
9. Переводчик ImTranslator для FireFox 1:26 1 18267
10. Minimize to tray 0:27 1 4084
11. Плагин Noscript 2:50 3 7630
12. PDF Download 0:38 0 5648
13. Speed Dial и Fast Dial 1:59 4 37390
14. WebDeveloper 5:29 0 5232
15. WikiLook 0:51 0 2421
16. Xmarks 2:44 1 6373
17. Password Hasher 1:51 0 3274
18. TabRenamizer 2:39 2 3643
19. ScribeFire Blog Editor 2:31 2 2507
20. FEBE — создаем резервную копию FireFox 2:06 1 5608
21. Firefox Universal Uploader 1:06 0 3359
22. FlashGot 2:22 1 11776
23. Adblock Plus 3:08 0 4138
24. Video Download Helper 4:08 1 15601
25. Personas Plus 2:21 0 2874
26. Greasemonkey 2:25 0 3972
27. Fox Tab 3:04 0 7748
28. DownThemAll! 3:42 0 3927
29. Download Statusbar 2:21 0 3037
30. Stylish 2:09 1 4410
31. WOT 2:31 2 3615
32. 1-Click YouTube Video Download 1:20 0 5587
Яндекс цитирования
Нажмите нравится, чтобы читать "TeachVideo.ru" в facebook