Какая ваша любимая подсказка или трюк Firebug?

Я думаю, что каждый веб-разработчик любит Firefox Firebug extension для решения проблем с CSS, JavaScript или HTTP.

Я использую его очень часто, но я уверен, что я не знаю о каких-то скрытых драгоценных камнях. Каков ваш любимый (не очевидный) трюк или подсказка для Firebug?

Ответы

Ответ 1

Установка YSlow для Firebug от Yahoo.

Ответ 2

Вот один из моих советов.

Отладка JavaScript, вы можете установить условные точки останова, щелкнув правой кнопкой мыши по красному символу точки останова:

Ответ 3

Хотя это не трюк или что-то еще, и это даже не характерно для Firebug, это моя любимая вещь в Firebug, так как я буквально использую ее каждый день, если не несколько раз в час, и это, конечно, способность напрямую редактировать HTML и CSS и следить за тем, чтобы результат отображался мгновенно. Это невероятная экономия времени при редактировании и повторной загрузке, чтобы проверить все, макет. Все, что я делаю, возможно, займет около двух часов без этой функции.

Ответ 4

Если вы привыкли писать сценарии Greasemonkey, функция Firebug $x неоценима для отладки вашего XPATH. На вкладке HTML вы также можете щелкнуть правой кнопкой мыши по любому элементу и "Скопировать XPATH", чтобы ускорить переход на document.evaluate.

Запись всех событий для любого конкретного элемента, щелкнув правой кнопкой мыши по нему на вкладке HTML и выбрав "Журнальные события", также довольно изящна.

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

Ответ 5

Консоль Firebug для легкого вывода отладки. Это превосходная альтернатива alert('blah').

Ответ 6

Не Firebug обманывает себя - но другое приятное расширение для Firebug - Firecookie. Это позволяет легко управлять кукисами.

Ответ 7

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

Ответ 8

Теперь я использую Firebug для приложений Flex и Flash, чтобы выяснить, что происходит (поскольку трассировка требует где-то отслеживать). Метод выглядит так, иногда

public static function debug(text:Object):void {
    trace(text); // trace is nice if you've got it
    ExternalInterface.call("console.log", text.toString());
}

Работает как шарм...

(Все еще не уверен, что мне нужна консоль как существующий объект Javascript, и в этом случае вам нужно будет объединить решение roosteronacid с этим. Поскольку вы управляете HTML-страницей, как правило, все возможно.)

Ответ 9

Если вы нажмете на имя или значение свойства CSS на вкладке "Стиль", вы можете прокручивать все возможные значения с помощью клавиш со стрелками ВВЕРХ и ВНИЗ. Он также работает с размерами, увеличивая их на 1 (если вы нажмете UP на значение 10px, оно будет равно 11px, 12px и т.д.) - полезно, когда вы пытаетесь выяснить правильный размер элемента/маржу, поскольку вам не нужно вводить каждый номер вручную.

Ответ 10

Моей абсолютной любимой вещью является встроенная переменная $0, которая указывает на то, что вы недавно проверили. Я узнал об этом недавно, и это так полезно.

Ответ 11

UPDATE:

Похоже, теперь вы можете переопределить объект консоли. Я предлагаю вам просмотреть Insin (который был отправлен как комментарий к этому ответу).

Только Firebug предлагает объект console для JavaScript.

Это исправление предотвратит нарушение JavaScript в Internet Explorer и других браузерах, если на этапе разработки используется объект Firebug console.

Это отличное решение для отладки одного и того же приложения в нескольких браузерах. (Больше не комментирует все ваши вызовы объектов console.)

try
{
    var console = {
        log: function () { return; },
        debug: function () { return; },
        info: function () { return; },
        warn: function () { return; },
        error: function () { return; },
        "assert": function () { return; },
        dir: function () { return; },
        dirxml: function () { return; },
        trace: function () { return; },
        group: function () { return; },
        groupEnd: function () { return; },
        time: function () { return; },
        timeEnd: function () { return; },
        profile: function () { return; },
        profileEnd: function () { return; },
        count: function () { return; }
    };
}

catch (e) { }

Вы даже можете изменить объект console для работы в других браузерах:

try
    {
        var console = {
            log: function () { for (msg in arguments) { alert(msg); } },
            ....

Чистый бонус заключается в том, что Visual Studio теперь может распознавать объект console и его методы.

Ответ 12

FirePHP позволяет создавать отладочные сообщения из PHP, которые отправляются в качестве заголовков и регистрируются Firebug.

Pixelperfect позволяет разместить наложенное изображение, чтобы выровнять элементы HTML с черновиком.

Ответ 13

CodeBurner - это аддон документации для Firebug, который отображает справочный материал для любого элемента HTML или свойства CSS. Он добавляет панель ссылок, содержащую:

соответствие стандартам
совместимость с браузером
Синтаксис
примеры кода

Ссылка на дополнение к Mozilla

Вы также можете:

искать все известные элементы HTML, атрибуты и свойства CSS.
найдите выбранный элемент через контекстные меню следующих панелей Firebug:
- HTML и CSS
- DOM crumbtrail
- Инспектор

Ответ 14

Если вы не знаете, сколько аргументов передано какой-либо функции обратного вызова и каковы они:

$('li').each(function(/* what passed here? */) {
    //...
});

вы можете быстро заменить эту функцию на console.log и просмотреть все параметры в журнале:

$('li').each(console.log);

или используйте свойство js arguments для получения массива переданных аргументов:

$('li').each(function(/* what passed here? */) {
    console.log(arguments)
});

Ответ 15

FireQuery. Он будет вводить jQuery на страницу и позволяет использовать ее со вкладки консоли, что упрощает тестирование jQuery или просто запускает команды на странице, на которой вы находитесь. Он также добавляет некоторые расширения на вкладку HTML, которые позволят вам видеть такие вещи, как теги jQuery data и вложенные события. Это необходимо, если вы используете Firebug и делаете разработку jQuery.

Ответ 16

Многие иногда забывают использовать их:

console.log(x, y, z) → печатает 3 переменные в 1 консольной строке
console.warn( "у меня есть фон!" ) → отмечает эту строку, для удобного обнаружения глаз;)
console.dir({a: 1, b: 2, c: 3}) → отлично печатает данные json/Array.

Кроме того, я сильно использую вкладку NET, что очень полезно при просмотре данных трафика JSON, также для анализа сценариев блокировки и измерения времени HTTP-запросов.

Ответ 17

Всякий раз, когда я вижу раздражающую, кричащую рекламу, которая отвлекает меня от чтения, я просто запускаю Firebug, используя инспектора, чтобы проверить элемент рекламы (или родительский элемент), а затем установить атрибут "display" для CSS "none". Престо, нет рекламы!

Ответ 18

Изменить стиль и значения CSS на лету, чтобы проверить, как я отлаживаю свой CSS и дизайн...

Ответ 19

Иногда при отладке Ajax консоль не отображает все запросы (например, если вы используете кросс-домен Ajax или скрытые фреймы). Вы можете просмотреть их, если вы перейдете на вкладку "Сеть".

Ответ 20

Написание и тестирование кода прямо внутри Firebug, особенно для вспомогательных функций кодирования.

Чувство Coding Live очень круто. См. несколько недавних вспомогательных функций, которые я написал в Firebug.