[Disclaimer: Данная статья была переведена в рамках "Конкурса на лучший перевод статьи" на сервисе Quizful. Ссылка на оригинал находится внизу страницы.]
1. Console (Консоль)
Первым, что вы заметите при открытии Firebug (из панели статуса или используя комбинацию клавиш ctrl+F12) будет консольная панель - Console. После быстрого просмотра, можно предположить, что это альтернативная версия консоли ошибок (Ctrl+Shift+J). Основные возможности сводятся к двум следующим:
- регистрация (логирование) ошибок, предупреждений и сообщений
- возможность работать с Javascript кодом
Но Firebug расширяет функциональность браузера Firefox, поэтому он может выполнять гораздо больше, а именно:
- регистрация ошибок Javascript, CSS, XML, XMLHttpRequest (AJAX) и Chrome (ядро Firefox)
- выполнение Javascript кода на текущей веб-странице
- передает дополнительный Javascript объект для управления (в консоль)
Давайте рассмотрим несколько примеров работы объекта console. Допустим, дан следующий HTML файл.
<html>
<head>
<script type="text/javascript">
console.time(1);
console.log('the script section has started executing');
console.warn('warning message');
console.error('error message');
console.info('info message');
console.log(
'finishing script execution\n',
'execution took:'
);
console.timeEnd(1);
</script>
</head>
</html>
Это приведет к следующему результату:
2. HTML
Следующая панель и та, над которой, я уверен, вы проведете много времени, разбита на несколько секций, которые мы рассмотрим ниже.
- Эта кнопка является эквивалентом "Inspect Element" в контекстном меню на странице. Кроме того, что она полезна для быстрого поиска элемента на странице, она также выделяет выбранный элемент.
-
В этой части у нас показана иерархическая структура выбранного элемента и возможность выполнения серии действий (для каждого отдельного компонета этой структуры), например:
- копирование содержимого HTML кода
- создание XPath выражений
- присоединение событийного наблюдения (и логирование в консольной панели Console)
- удаление элемента
- редактирование элемента и его дочерних узлов
- перемещение элемента во вкладку DOM для отслеживания
- Главное окно панели: полезно (используется useful) для перемещения по HTML документу, быстрого изменения кода и обнаружения ошибок в коде (например, раннее закрытие div элемента). Контекстное меню предлагает тот же функциональный набор как и во второй вкладке
- В этой вкладке вычислен стиль текущей страницы или отображаемого элемента. Возможность на ходу менять стили и проверять наследование стилей CSS является ее наиболее значимой чертой.
- Посредством этой вкладки можно исследовать box-модель элемента: размер содержимого (content size), заполнение (padding), смещения (offsets), расстояние от кромки (margins) и границы (borders).
- Вкладка DOM показывает список всех методов и свойств выбранного на данный момент элемента .
3. CSS
Основная разница между этой панелью и вкладкой Style панели HTML является то, что вы можете работать с невычисляемыми стилями. Я выделил и пронумеровал секции (и свойства на этот раз).
- Если страница, на которой вы работаете, содержит несколько таблиц стилей, тогда мы можем выбрать нужную таблицу стилей.
- Основная область где показан CSS код.
- Легкость изменения CSS свойства.
- Легко запретить CSS правило.
4. Script
Иногда вам приходится сталкиваться с трудностями, когда вы пишете Javascript код. Основную часть времени вы работаете с панелью Console; только в экстренных случаях это заставит вас перейти на панель Script. Предвидя эти экстренные случаи (которые наверняка произойдут), давайте рассмотрим эту панель, и познакомимся с ней поближе
- Выпадающая вниз кнопка с помощью которой мы можем выбрать желаемый файл скрипта.
- Функции отладки: continue , step in , step over и step out . Они действуют лишь тогда когда выполнение кода достигает точки останова.
- Основное окно. Здесь мы устанавливаем (и удаляем) точки останова, а также проверяем код Javascript.
- Похожая на панель DOM, вкладка Watch показывает методы и параметры объекта для отлаживаемого кода.
- Показывает содержимое стека функций в реальном времени.
- Список активных на данный момент точек останова. Отсюда можно только удалить точку останова
5. DOM
Такой же как и HTML->DOM. Здесь ничего не отличается от того что было упомянутого раньше, поэтому перейдем к следующей вкладке.
6. Net
Интересует сколько времени заняла загрузка вашей страницы? Или вы хотите знать, ответ на какой запрос занял больше всего времени? К счастью, это тоже может быть осуществлено через панель Net.
- Запросы могут быть отфильтрованы в соответствии с их типом.
- Каждый запрос показан в этой вкладке. В конце списка запросов мы видим суммарный подсчет: количества запросов, объема, сколько было закешировано и общее время выполнения всех запросов.
- Может быть показано еще более детально, например: HTTP заголовки, ответ и кеш (такой же как и ответ)
Тестирование выполнения
Необходимо протестировать выполнение особой функции или цикла? Используйте характеристику "timer" в Firebug.
function TimeTracker(){
console.time("MyTimer");
for(x=5000; x > 0; x--){}
console.timeEnd("MyTimer");
}
Три шага. Начинаем с вызова "console.time" в которой указваем уникальный ключ. Далее, вставляем наш код. Потом, вызываем console.timeEnd, и снова вводим наш уникальный ключ.
7. Reference
Это дополнительная панель предоставляемая CodeBurner, расширением Firebug'а. Как говорит само название, через эту панель мы имеем быстрый доступ к нашему HTML и CSS коду. Не смотря на то, что название панели говорит само за себя, мы все же рассмотрим ее детальнее.
- Секция поиска и фильтрации.
- Здесь один над другим расположены результаты, в нашем случае только один результат.
- Область совместимости с основными версиями браузеров. Да, Chrome не присутствует в этом списке, но Chrome использует тот же движок что и Safari, называемый Webkit, так что если есть совместимость с Safari, то и совместимость с Chrome будет такая же хорошая.
- И если отображаемой информации в этой панели будет недостаточно, вы можете перейти по этой ссылке для получения большего количества информации, такой как: примеры, совместимость с большим количеством версий браузеров, описание и т.д.
8. PixelPerfect
Если вы часто выполняете нарезку из PSD документа, вы знаете сколько времени занимает замер расстояний между возможными структурными элементами. Именно здесь PixelPerfect показывает свою силу. Наличие данного дополнения в вашей панели инструментов, поможет вам делать безупречную нарезку.
- С помощью этой кнопки мы можем добавлять множество слоев изображений для текущей страницы.
- Список слоев, где мы можем применить или удалять слой.
- Область параметров слоя.
9. YSlow
Другое дополнение Firebug'а было разработано Yahoo!, которое может предложить улучшения скоростных характеристик, основываясь на серии выполненных тестов. .
С помощью YSlow, мы можем оценить общую производительность нашего сайта. Мы можем легко обнаружить места которые могут быть улучшены, а также получить ряд рекомендаций по улучшению.
Помимо круговой диаграммы, мы также имеем JSLint и Smush.it в своем распоряжении.
10. FirePHP
Наш последний, но не единственный, важный компонент Firebug'а это FirePHP. С помощью этого дополнения, вы можете прозрачно отправлять информацию (предупреждения, ошибки, логи, данные) в панель Console из вашего PHP кода. Пример использования FirePHP на стороне сайта:
<?php
FB::log('Log message');
FB::info('Info message');
FB::warn('Warn message');
FB::error('Error message');
?>
Заключение
Я надеюсь этот небольшой список панелей/дополнений Firebug'а поможет в вашей жизни вебразработчика - как помог мне. В конце-концов, мы все знаем что ошибки рано или поздно случаются, так что нет другого выхода кроме как подготовиться к ним.
----------
Оригинальный текст статьи: 10 Reasons Why You Should Be Using Firebug
