Топ контрибуторов
loading
loading
Знаете ли Вы, что

Вы можете подписаться на RSS ленту новых тестов сервиса Quizful, в том числе и отдельно по каждой категории

Лента обновлений
ссылка Nov 11 22:40
Комментарий от andrei201911:
dct
ссылка Nov 10 20:12
Комментарий от F4NGO:
Очень понравился только, жаль мало набрал думал лучше буде...
ссылка Nov 10 11:54
Комментарий от Kkoctik:
Если перебрать все возможные произведения числа 36 из 3 ...
ссылка Nov 9 17:32
Комментарий от cruel_bo1:
"run-time exception"
ссылка Nov 8 22:39
Комментарий от AkiraSan:








▌  JAVA = ГОВНО







Статистика

Тестов: 153, вопросов: 8596. Пройдено: 445093 / 2185196.

10 причин почему следует использовать Firebug

head tail Статья
категория
Веб технологии
дата17.07.2009
авторMDMi4
голосов19

[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>

Это приведет к следующему результату:

Console

2. HTML

Следующая панель и та, над которой, я уверен, вы проведете много времени, разбита на несколько секций, которые мы рассмотрим ниже.

HTML

  1. Эта кнопка является эквивалентом "Inspect Element" в контекстном меню на странице. Кроме того, что она полезна для быстрого поиска элемента на странице, она также выделяет выбранный элемент.
  2. В этой части у нас показана иерархическая структура выбранного элемента и возможность выполнения серии действий (для каждого отдельного компонета этой структуры), например:
    • копирование содержимого HTML кода
    • создание XPath выражений
    • присоединение событийного наблюдения (и логирование в консольной панели Console)
    • удаление элемента
    • редактирование элемента и его дочерних узлов
    • перемещение элемента во вкладку DOM для отслеживания
  3. Главное окно панели: полезно (используется useful) для перемещения по HTML документу, быстрого изменения кода и обнаружения ошибок в коде (например, раннее закрытие div элемента). Контекстное меню предлагает тот же функциональный набор как и во второй вкладке
  4. В этой вкладке вычислен стиль текущей страницы или отображаемого элемента. Возможность на ходу менять стили и проверять наследование стилей CSS является ее наиболее значимой чертой.
  5. Посредством этой вкладки можно исследовать box-модель элемента: размер содержимого (content size), заполнение (padding), смещения (offsets), расстояние от кромки (margins) и границы (borders).

HTML Layout

  1. Вкладка DOM показывает список всех методов и свойств выбранного на данный момент элемента .

HTML DOM

3. CSS

Основная разница между этой панелью и вкладкой Style панели HTML является то, что вы можете работать с невычисляемыми стилями. Я выделил и пронумеровал секции (и свойства на этот раз).

CSS

  1. Если страница, на которой вы работаете, содержит несколько таблиц стилей, тогда мы можем выбрать нужную таблицу стилей.
  2. Основная область где показан CSS код.
  3. Легкость изменения CSS свойства.
  4. Легко запретить CSS правило.

4. Script

Иногда вам приходится сталкиваться с трудностями, когда вы пишете Javascript код. Основную часть времени вы работаете с панелью Console; только в экстренных случаях это заставит вас перейти на панель Script. Предвидя эти экстренные случаи (которые наверняка произойдут), давайте рассмотрим эту панель, и познакомимся с ней поближе

Script

  1. Выпадающая вниз кнопка с помощью которой мы можем выбрать желаемый файл скрипта.
  2. Функции отладки: continue , step in , step over и step out . Они действуют лишь тогда когда выполнение кода достигает точки останова.
  3. Основное окно. Здесь мы устанавливаем (и удаляем) точки останова, а также проверяем код Javascript.
  4. Похожая на панель DOM, вкладка Watch показывает методы и параметры объекта для отлаживаемого кода.
  5. Показывает содержимое стека функций в реальном времени.
  6. Список активных на данный момент точек останова. Отсюда можно только удалить точку останова

5. DOM

Такой же как и HTML->DOM. Здесь ничего не отличается от того что было упомянутого раньше, поэтому перейдем к следующей вкладке.

6. Net

Интересует сколько времени заняла загрузка вашей страницы? Или вы хотите знать, ответ на какой запрос занял больше всего времени? К счастью, это тоже может быть осуществлено через панель Net.

NET

  1. Запросы могут быть отфильтрованы в соответствии с их типом.
  2. Каждый запрос показан в этой вкладке. В конце списка запросов мы видим суммарный подсчет: количества запросов, объема, сколько было закешировано и общее время выполнения всех запросов.
  3. Может быть показано еще более детально, например: 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 коду. Не смотря на то, что название панели говорит само за себя, мы все же рассмотрим ее детальнее.

Reference

  1. Секция поиска и фильтрации.
  2. Здесь один над другим расположены результаты, в нашем случае только один результат.
  3. Область совместимости с основными версиями браузеров. Да, Chrome не присутствует в этом списке, но Chrome использует тот же движок что и Safari, называемый Webkit, так что если есть совместимость с Safari, то и совместимость с Chrome будет такая же хорошая.
  4. И если отображаемой информации в этой панели будет недостаточно, вы можете перейти по этой ссылке для получения большего количества информации, такой как: примеры, совместимость с большим количеством версий браузеров, описание и т.д.

8. PixelPerfect

Если вы часто выполняете нарезку из PSD документа, вы знаете сколько времени занимает замер расстояний между возможными структурными элементами. Именно здесь PixelPerfect показывает свою силу. Наличие данного дополнения в вашей панели инструментов, поможет вам делать безупречную нарезку.

PixelPerfect

  1. С помощью этой кнопки мы можем добавлять множество слоев изображений для текущей страницы.
  2. Список слоев, где мы можем применить или удалять слой.
  3. Область параметров слоя.

9. YSlow

Другое дополнение Firebug'а было разработано Yahoo!, которое может предложить улучшения скоростных характеристик, основываясь на серии выполненных тестов. .

YSlow

С помощью YSlow, мы можем оценить общую производительность нашего сайта. Мы можем легко обнаружить места которые могут быть улучшены, а также получить ряд рекомендаций по улучшению.

YSlow Statistics

Помимо круговой диаграммы, мы также имеем 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

Если Вам понравилась статья, проголосуйте за нее

Голосов: 19  loading...
admin   abbey_nightrock   c0nst   mismatch   misha91   pasis   Ghosting   MDMi4   md5   lacrimoza   tonx   k0stya   Terrens   rooty   sad_joker   videotutor   sava_vodka   hollowinside   eugene90