Firebug— это модуль для Web-браузера Firefox, предназначенный для отладки Web-страниц и скриптов. Этот инструмент будет незаменимым помощником каждому Web-мастеру. Вы сможете отлаживать и просматривать структуру HTML, CSS и JavaScript. Загрузить модуль можно с сайта разработчика (http://getfirebug.com/) или со страницы https://addons.mozilla.org/ru/firefox/addon/1843.

На вкладке HTML отображается весь код страницы. При наведении курсора мыши на определенный тег элемент подсвечивается на Web-странице, а справа на вкладке Макет видна структура блочной модели со значениями атрибутов margin, border и padding (рис. 1). Значения этих атрибутов можно изменять и одновременно наблюдать за результатом произведенных изменений. Это очень удобно.

Рис. 1. Структура блочной модели, отображаемая на вкладке Макет

Следует обратить еще внимание на вкладку Сеть. Здесь отображается весь процесс загрузки Web-страницы. Можно узнать скорость загрузки отдельных компонентов, а также посмотреть HTTP-заголовки запроса Web-браузера и HTTP-заголовки ответа сервера.

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

doument.write(i  +   "<br>");

После загрузки страницы на вкладке Консоль появится сообщение об ошибке (рис. 2). Обратите внимание на то, что текст ошибки является ссылкой, при переходе по которой станет активной вкладка Сценарий, а строка с ошибкой некоторое время будет подсвечена.

Рис. 2. Сообщение об ошибке, выводимое модулем Firebug

Вкладка Сценарий является полноценным отладчиком скриптов на JavaScript. Здесь можно установить точки останова. Для этого необходимо щелкнуть мышью напротив нужной строки перед нумерацией строк. В итоге будет отображена жирная точка. Теперь после обновления Web-страницы программа прервется на отмеченной строке (рис. 3). В этот момент можно посмотреть текущие значения переменных, а также продолжить выполнение скрипта по шагам. Таким образом, можно полностью контролировать весь процесс выполнения программы.

Рис. 3. Пошаговое выполнение программы в Firebug

Рис. 3.4. Окно Средства разработчика в Web-браузере Internet Explorer 8.0

Необходимо заметить, что в Web-браузере Internet Explorer 8.0 существует аналогичный инструмент. Он называется "Средства разработчика". Для запуска в меню Сервис выбираем пункт Средства разработчика или нажимаем клавишу <F12>. Здесь можно просматривать структуру HTML и CSS (рис. 4), а также отлаживать скрипты (рис. 5).

Рис. 5. Отладка скриптов в Web-браузере Internet Explorer 8.0

Похожие средства есть и у других Web-браузеров. К примеру, в Опере для вызова инспектора отладки необходимо нажать правую клавишу мыши на необходимом элементе и выбрать Проинспектировать элемент.