Я думаю, что каждый веб-разработчик любит Firefox Firebug extension для решения проблем с CSS, JavaScript или HTTP.
Я использую его очень часто, но я уверен, что я не знаю о каких-то скрытых драгоценных камнях. Каков ваш любимый (не очевидный) трюк или подсказка для Firebug?
Установка YSlow для Firebug от Yahoo.
Вот один из моих советов.
Отладка JavaScript, вы можете установить условные точки останова, щелкнув правой кнопкой мыши по красному символу точки останова:
Хотя это не трюк или что-то еще, и это даже не характерно для Firebug, это моя любимая вещь в Firebug, так как я буквально использую ее каждый день, если не несколько раз в час, и это, конечно, способность напрямую редактировать HTML и CSS и следить за тем, чтобы результат отображался мгновенно. Это невероятная экономия времени при редактировании и повторной загрузке, чтобы проверить все, макет. Все, что я делаю, возможно, займет около двух часов без этой функции.
Если вы привыкли писать сценарии Greasemonkey, функция Firebug $x неоценима для отладки вашего XPATH. На вкладке HTML вы также можете щелкнуть правой кнопкой мыши по любому элементу и "Скопировать XPATH", чтобы ускорить переход на document.evaluate.
Запись всех событий для любого конкретного элемента, щелкнув правой кнопкой мыши по нему на вкладке HTML и выбрав "Журнальные события", также довольно изящна.
На вкладке DOM в раскрывающемся списке "Параметры" вы можете отображать только те свойства и функции, которые были определены пользователем, что удобно для определения того, какое влияние вы оказываете на глобальное пространство имен или проблемы с отладкой, когда кто-то случайно представил глобальные переменные.
Консоль Firebug для легкого вывода отладки. Это превосходная альтернатива alert('blah').
Не Firebug обманывает себя - но другое приятное расширение для Firebug - Firecookie. Это позволяет легко управлять кукисами.
Другим приятным расширением Firebug является FireSpider, что позволяет легко обнаруживать неработающие ссылки и т.д. на ваших сайтах.
Теперь я использую 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-страницей, как правило, все возможно.)
Если вы нажмете на имя или значение свойства CSS на вкладке "Стиль", вы можете прокручивать все возможные значения с помощью клавиш со стрелками ВВЕРХ и ВНИЗ. Он также работает с размерами, увеличивая их на 1 (если вы нажмете UP на значение 10px, оно будет равно 11px, 12px и т.д.) - полезно, когда вы пытаетесь выяснить правильный размер элемента/маржу, поскольку вам не нужно вводить каждый номер вручную.
Моей абсолютной любимой вещью является встроенная переменная $0, которая указывает на то, что вы недавно проверили. Я узнал об этом недавно, и это так полезно.
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 и его методы.
FirePHP позволяет создавать отладочные сообщения из PHP, которые отправляются в качестве заголовков и регистрируются Firebug.
Pixelperfect позволяет разместить наложенное изображение, чтобы выровнять элементы HTML с черновиком.
CodeBurner - это аддон документации для Firebug, который отображает справочный материал для любого элемента HTML или свойства CSS. Он добавляет панель ссылок, содержащую:
Ссылка на дополнение к Mozilla
Вы также можете:
Если вы не знаете, сколько аргументов передано какой-либо функции обратного вызова и каковы они:
$('li').each(function(/* what passed here? */) {
//...
});
вы можете быстро заменить эту функцию на console.log и просмотреть все параметры в журнале:
$('li').each(console.log);
или используйте свойство js arguments для получения массива переданных аргументов:
$('li').each(function(/* what passed here? */) {
console.log(arguments)
});
FireQuery. Он будет вводить jQuery на страницу и позволяет использовать ее со вкладки консоли, что упрощает тестирование jQuery или просто запускает команды на странице, на которой вы находитесь. Он также добавляет некоторые расширения на вкладку HTML, которые позволят вам видеть такие вещи, как теги jQuery data и вложенные события. Это необходимо, если вы используете Firebug и делаете разработку jQuery.
Многие иногда забывают использовать их:
console.log(x, y, z) → печатает 3 переменные в 1 консольной строке
console.warn( "у меня есть фон!" ) → отмечает эту строку, для удобного обнаружения глаз;)
console.dir({a: 1, b: 2, c: 3}) → отлично печатает данные json/Array.
Кроме того, я сильно использую вкладку NET, что очень полезно при просмотре данных трафика JSON, также для анализа сценариев блокировки и измерения времени HTTP-запросов.
Всякий раз, когда я вижу раздражающую, кричащую рекламу, которая отвлекает меня от чтения, я просто запускаю Firebug, используя инспектора, чтобы проверить элемент рекламы (или родительский элемент), а затем установить атрибут "display" для CSS "none". Престо, нет рекламы!
Изменить стиль и значения CSS на лету, чтобы проверить, как я отлаживаю свой CSS и дизайн...
Иногда при отладке Ajax консоль не отображает все запросы (например, если вы используете кросс-домен Ajax или скрытые фреймы). Вы можете просмотреть их, если вы перейдете на вкладку "Сеть".
Написание и тестирование кода прямо внутри Firebug, особенно для вспомогательных функций кодирования.
Чувство Coding Live очень круто. См. несколько недавних вспомогательных функций, которые я написал в Firebug.