Сегодня я вам расскажу об очень полезной утилите для web-разработки. Имя ей Firebug. Это дополнение к firefox, которое доступно для загрузки на
официальном сайте этого браузера. Чем же вызвано такое внимание к этой утилите?
Расскажу всё по порядку.
После установки дополнения в вашем браузере появится иконка firebug в нижнем правом углу. Чтобы задействовать весь функционал дополнения кликните на значке
правой кнопкой мыши и выберите пункт "Включить все панели".
Теперь будут задействованы следующие инструменты, которые можно посмотреть, кликнув на значке левой кнопкой мыши:
1. Консоль.
После включения этой панели, в консоли будут показываться javascript-ошибки и номера строчек кода, их породившие.
2. HTML
На первый взгляд, эта панель - аналог стандартной функции "Исходный код страницы" (Ctrl+U), но далее вы увидите насколько они отличаются.
Для активизации панели есть 2 способа: 1) кликнуть на значке firebug, а потом на вкладке HTML; 2) кликнуть на интересующем вас элементе веб-страничке
правой кнопкой и выбрать "Анализировать элемент" (при этом откроется панель firebug с выделением выбранного вами элемента).
При наведени в панели на другие элементы, они будут подсвечиваться на странице. Справа на панели можно получить различную информацию об выбранном
элементе - связанные css-стили с элементом, размеры элемента и т.д. Возле заголовка вкладки есть ещё несколько интересных опций. Для себя нашёл полезной
опцию "Показывать окно быстрой информации". При включении этой опции будет показываться обобщённая информация об элементе.
3. CSS
Данная вкладка, собственно, показывает содержимое всех файлов стилей, подключенных к данной странице. Выбор файлов вверху.
4. Сценарий
Аналогичная вкладка предыдущей, только для javascript-сценариев.
5. DOM.
Тут показаны все объекты DOM и свойства с ними связанные.
6. Сеть.
{рисунок}
И последняя, самая интересная вкладка! Незаменимая утилита при работе с AJAX! Она показывает все post и get запросы, которые произошли.
Отображается самая полная информация о запросе: статус, размер, время и прочее. Переданную и полученную информацию можно посмотреть во
вкладках "параметры", "заголовки", "ответ", кликнув на адрес запроса.
{рисунок}
