Каталог статей
Поиск по базе статей  
Статья на тему Интернет » Интересное в сети » Обзор лучших плагинов Firefox&nb p;2.0: в&nb p;помощь веб-разработчику

 

Обзор лучших плагинов Firefox&nb p;2.0: в&nb p;помощь веб-разработчику

 

 

В одной из предыдущих статей мы рассказывали о расширениях Firefox, без которых немыслим комфортный серфинг. Это плагины для управления загрузкой файлов, блокирования нежелательной рекламы, чтения рассылок RSS, ведения блогов и т. д. Сегодня речь пойдет о расширениях, которые пригодятся разработчикам веб-сайтов.

Некоторые инструменты для веб-разработки уже есть в базовой конфигурации браузера.

загрузка...

 

 

Это консоль ошибок JavaScript и инспектор DOM*.

В окне консоли ошибок отображаются предупреждения JavaScript, а также ошибки и предупреждения CSS* с указанием номеров строк кода. Эта информация незаменима при отладке скриптов JavaScript, а также дает некоторое представление о соответствии кода стандартам W3C*.

DOM (Document Object Model) — объектная модель документаИнспектор DOM позволяет просмотреть структуру документа в виде дерева с подробной информацией по каждому элементу.

Чтобы получить информацию об элементе страницы, нажмите кнопку со стрелкой-указателем на панели инструментов инспектора DOM, затем щелкните по этому элементу на странице. В правой части окна появится описание элемента, а сам элемент будет выделен в структуре дерева.

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

Начнем с пары расширений, которыми можно было бы и закончить. Возможности плагинов Web Developer и Firebug настолько широки, что никакими другими можно не пользоваться.

Web Developer и Firebug — прекрасные инструменты для веб-разработчикаПлагин Web Developer (загрузить его можно отсюда) позволяет выполнять следующие действия:

  • включать и отключать cookies;
  • включать и отключать выполнение скриптов JavaScript;
  • включать и отключать выполнение кода Java;
  • просматривать и редактировать таблицы стилей CSS и исходный код страницы;
  • отображать подробную информацию об элементах страницы: формах, рисунках, таблицах, гиперссылках, заголовках и т. д.;
  • выделять элементы страницы заданного типа: формы, ячейки таблиц, рисунки и т. д.;
  • отображать подробную информацию о выбранном элементе страницы;
  • просматривать дизайн сайта в различных разрешениях экрана;
  • проверить код HTML и CSS на соответствие стандартам W3C;
  • получить информацию о размере страницы и отдельных типов ее содержимого, а также информацию о времени загрузки страницы с учетом типа используемого соединения
  • и многое другое.

Для просмотра подробной информации об элементе страницы выберите пункт Information – Display Element Information (или нажмите Ctrl+Shift+F) из меню плагина Web Developer, затем щелкните по этому элементу на странице. Информация о свойствах и расположении элемента на странице появится в окошке в левом верхнем углу страницы. В строке состояния Web Developer будет показан путь до этого элемента в иерархии страницы.

Расширение Web Developer

Для упрощения навигации можно предварительно включить контурное выделение для элементов определенного типа, например форм, рисунков или таблиц (пункты меню Information и Outline). Например, для выделения ячеек таблиц используйте пункт меню Outline – Outline Tables – Table Cells.

Для просмотра иерархической структуры документа воспользуйтесь пунктом меню Information – View Document Outline. Страница со структурой документа будет открыта в новой вкладке.

Иногда возникает необходимость проверить внешний вид страницы в различных разрешениях экрана. Для этого выберите соответствующее разрешение из меню Resize. Если необходимого разрешения нет в списке, поможет пункт меню Resize – Edit Resize Dimensions.

Расширение Web Developer также позволяет проверить код страницы на соответствие стандартам W3C (пункты меню Tools – Validate) и получить подробную информацию о размере страницы и времени ее загрузки (Tools – View Speed Report).

На этом рассмотрение базовых возможностей плагина можно закончить. Более подробную информацию и документацию по его использованию можно найти на странице плагина.

Прекрасной альтернативой (или дополнением) к плагину Web Developer служит расширение Firebug. Загрузить его можно отсюда. Плагин обладает примерно теми же возможностями, что и Web Developer, но есть и приятные мелочи, например отладчик скриптов JavaScript.

Откроем рабочее окно расширения Firebug (пункт меню "Инструменты – Firebug – Open Firebug"). В левой части окна плагина расположен набор вкладок, реализующих его основные возможности:

  • консоль JavaScript (Console);
  • редактор исходного кода (HTML);
  • редактор таблицы стилей CSS;
  • отладчик скриптов JavaScript (Script);
  • инспектор DOM;
  • вкладка со статистикой загрузки отдельных элементов страницы (Net).

Консоль JavaScript в целом аналогична встроенной в браузер. С помощью меню Options можно выбрать типы отображаемых ошибок (ошибки и предупреждения JavaScript, ошибки CSS, ошибки XML* и запросы XMLHTTPRequest*).

Для получения подробной информации об элементе страницы нажмите кнопку Inspect в меню плагина, затем щелкните по этому элементу на странице. В редакторе HTML будет выделен код этого элемента.

Расширение Firebug: просмотр исходного кода

В правой части окна появится информация о стилях CSS, используемых этим элементом.

Расширение Firebug: просмотр таблицы стилей

Но самой полезной возможностью Firebug является отладчик скриптов JavaScript, расположенный на вкладке Script. После установки точки останова в нужном месте обновите страницу для срабатывания точки останова.

Расширение Firebug: отладчик JavaScript

Для пошаговой отладки скрипта используйте кнопки на панели инструментов плагина:

  • продолжить выполнение до следующей точки останова (Continue);
  • зайти внутрь блока или функции (Step Into);
  • выйти из блока или функции (Step Out);
  • перейти к следующему оператору без захода внутрь блока (Step Over).

Незаменимый компонент Firebug — полноценный отладчик JavaScriptТекущие значения переменных скрипта можно посмотреть на вкладке Watch, а список точек останова – на вкладке Breakpoints.

На вкладке Net отображается время загрузки каждого элемента страницы (тип отображаемых элементов можно выбрать в меню плагина), а также входные параметры скриптов (Params), заголовки запросов (Request Headers) и ответов (Response Headers) и содержимое ответов (Response).

В завершение обзора рассмотрим еще пару полезных расширений.

Плагин Page Diff позволяет сравнить код двух веб-страниц, например локальной копии страницы и ее серверной копии. Загрузить его можно отсюда. После установки плагина в контекстном меню браузера появятся пункты Start DIFF и Show DIFF. Чтобы сравнить код двух веб-страниц, нужно выбрать пункт Start DIFF на одной из них и Show DIFF — на другой. После этого откроется окошко с результатами сравнения.

Последний на сегодня плагин Opera View позволяет открыть страницу в браузере Opera из контекстного меню Firefox. Загрузить это расширение можно отсюда.

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

Ссылки по теме




Статья получена: hostinfo.ru
загрузка...

 

 

Наверх


Постоянная ссылка на статью "Обзор лучших плагинов Firefox&nb p;2.0: в&nb p;помощь веб-разработчику":


Рассказать другу

Оценка: 4.0 (голосов: 16)

Ваша оценка:

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

Имя:
Сообщение:
Защитный код: включите графику
 
 



Поиск по базе статей:





Темы статей






Новые статьи

Противовирусные препараты: за и против Добро пожаловать в Армению. Знакомство с Арменией Крыша из сэндвич панелей для индивидуального строительства Возможно ли отменить договор купли-продажи квартиры, если он был уже подписан Как выбрать блеск для губ Чего боятся мужчины Как побороть страх перед неизвестностью Газон на участке своими руками Как правильно стирать шторы Как просто бросить курить

Вместе с этой статьей обычно читают:

Обзор лучших плагинов для Wordpre . Часть четвертая: борьба со&nb p;спамом

На сегодняшний день Wordpress является самым популярным блоговым движком с открытым исходным кодом – его использует более 70% пользователей, ведущих автономные блоги. Движок очень просто устанавливается и настраивается, поддерживает XHTML и CSS, позволяет выбрать тему оформления, поддерживает использование подключаемых модулей (плагинов). Разработано огромное количество плагинов, способных удовлетворить все мыслимые и немыслимые потребности пользователей.

» Интересное в сети - 1905 - читать


Обзор лучших плагинов для Wordpre . Часть первая: комментарии

На сегодняшний день Wordpress является самым популярным блоговым движком с открытым исходным кодом – его использует 71% пользователей, ведущих автономные блоги. Движок очень просто устанавливается и настраивается, поддерживает XHTML и CSS, позволяет выбрать тему оформления, поддерживает использование подключаемых модулей (плагинов). Wordpress является самым популярным блоговым движком с открытым исходным кодомЗагрузить одну из последних версий Wordpress (например, 2.

» Интересное в сети - 1857 - читать


Обзор лучших плагинов для Wordpre . Часть пятая: монетизация блога

На сегодняшний день Wordpress является самым популярным блоговым движком с открытым исходным кодом – его использует более 70% пользователей, ведущих автономные блоги. Движок очень просто устанавливается и настраивается, поддерживает XHTML и CSS, позволяет выбрать тему оформления, поддерживает использование подключаемых модулей (плагинов). Разработано огромное количество плагинов, способных удовлетворить все мыслимые и немыслимые потребности пользователей.

» Интересное в сети - 8835 - читать


Обзор лучших плагинов для Wordpre . Часть шестая: в&nb p;заключение

На сегодняшний день Wordpress является самым популярным блоговым движком с открытым исходным кодом — его использует более 70% пользователей, ведущих автономные блоги. Движок очень просто устанавливается и настраивается, поддерживает XHTML и CSS, позволяет выбрать тему оформления, поддерживает использование подключаемых модулей (плагинов). Разработано огромное количество плагинов, способных удовлетворить все мыслимые и немыслимые потребности пользователей.

» Интересное в сети - 1579 - читать


Обзор лучших плагинов для Wordpre . Часть третья: администрирование

На сегодняшний день Wordpress является самым популярным блоговым движком с открытым исходным кодом – его использует более 70% пользователей, ведущих автономные блоги. Движок очень просто устанавливается и настраивается, поддерживает XHTML и CSS, позволяет выбрать тему оформления, поддерживает использование подключаемых модулей (плагинов). Разработано огромное количество плагинов, способных удовлетворить все мыслимые и немыслимые потребности пользователей.

» Интересное в сети - 1645 - читать


Обзор лучших плагинов для Wordpre . Часть вторая: статистика

На сегодняшний день Wordpress является самым популярным блоговым движком с открытым исходным кодом – его использует 71% пользователей, ведущих автономные блоги. Движок очень просто устанавливается и настраивается, поддерживает XHTML и CSS, позволяет выбрать тему оформления, поддерживает использование подключаемых модулей (плагинов). Об установке и настройке Wordpress мы подробно говорили в одной из предыдущих статей, а сегодня речь пойдет о плагинах для формирования статист ...

» Интересное в сети - 1840 - читать



Статья на тему Интернет » Интересное в сети » Обзор лучших плагинов Firefox&nb p;2.0: в&nb p;помощь веб-разработчику

Все статьи | Разделы | Поиск | Добавить статью | Контакты

© Art.Thelib.Ru, 2006-2024, при копировании материалов, прямая индексируемая ссылка на сайт обязательна.

Энциклопедия Art.Thelib.Ru