Работа с Firebug console с помощью jQuery

Работа с Firebug console с помощью jQuery

Если у вас еще нет Firebug, вам давно пора им обзавестись. Не говоря о многих полезных его функциях, например, отслеживание HTTP-трафика и поиска ошибок CSS проекта, с помощью консоли в Firebug можно отлаживать ваш JavaScript.

Полный список всех возможностей Firebug Console (англ.) находится на офф. сайте. А мы пока рассмотрим самые основные:

1. Вывод обычной строки «Hello World!» в консоль.

console.log('Hello World!');

2. Вывод в консоль строки из переменной text. Ф-я отображает справа файл и строку из которой была вызвана.

var text = $$('.selector')[0].firstChild.data;
console.debug('текст внутри элемента ".selector" = %s', text);

3. Вывод кол-ва ссылок в документе:

var links = $$('a');
console.info('кол-во ссылок на странице = %i', links.length);

4. Так выводится дробное число:

console.warn('число Pi = %f', Math.PI);

5. Вывод в консоль непосредственно объекта «.selector», кликнув по которому вы увидете все его свойства:

console.error('объект ".selector" = %o', $$('.selector')[0].firstChild);

6. Для того, чтобы вывести в Firebug Console сообщения группой:

console.group(groupname);
console.log("сообщение 1 из %s", groupname);
console.log("сообщение 2 из %s", groupname);
console.log("сообщение 3 из %s", groupname);
console.groupEnd();

7. Чтобы заглянуть в сам объект (dir) или элемент (dirxml):

console.dir({a: 'test', b: function() {return true;}});
console.dirxml($$('.selector'));

8. Также пригодится простая проверка:

console.assert(1 === true);

9. Если вы вдруг заблудитесь в коде, можно узнать все вызванные функции. Вставьте этот код в нужное место:

console.trace();

10. И, на последок, код для замерения времени выполнения операции:

var timeName = '100';
console.time(timeName);
for(var i=0;i<100;i++) {
	console.log(i);
	}
console.timeEnd(timeName);

Я рекомендую посмотреть в работе каждый предложенный пример. Таким образом, наиболее вероятно, то что эта информация «отложится» у вас в голове и вы вспомните о нужном методе отладки в нужный момент времени.

1.

31K

19 июля 2007 года

BlackHeretic

0 / / 19.07.2007

28 апреля 2010, 16:34:46

Отличная ознакомительная статья! Спасибо :)
Правда jQuery тут лишний, на его месте может быть что угодно. Заголовок несколько путает. Статья фактически о консоли.
Кстати, та же самая консоль присутствует и в Google Chrome.