Блог web-мастера

Всё больше и больше web-разработчиков отдают предпочтение FireFox в качестве основного браузера. Поскольку я тоже пользуюсь Firefox, расскажу о нескольких удобных расширениях к браузеру.

Web Developer

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

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

DOM Inspector

В третьей версии Firefox инспектор DOM был удалён из сборки, но может быть установлен как дополнение.

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

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

Firebug

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

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

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

PageDiff

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

Консоль ошибок

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

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