Жизнь как творчество

hostinfo.ru | 27.04.2007

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

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

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

Инспектор DOM позволяет просмотреть структуру документа в виде дерева с подробной информацией по каждому элементу.

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

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

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

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

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

Для просмотра подробной информации об элементе страницы выберите пункт «Information – Display Element Information» (или нажмите Ctrl+Shift+F) из меню плагина 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 будет выделен код этого элемента.

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

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

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

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

Текущие значения переменных скрипта можно посмотреть на вкладке 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-редакторам.