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

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

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

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

1
console.log('Hello World!');


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

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


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

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


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

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


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

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


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

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


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

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


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

1
console.assert(1 === true);


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

1
console.trace();


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

1
2
3
4
5
6
var timeName = '100';
console.time(timeName);
for(var i=0;i<100;i++){
console.log(i);
}
console.timeEnd(timeName);


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

Это все.
Спасибо.


Метки: , ,
Связанные записи:
Свои выделяемые шрифты
  • Опубликовано: Сентябрь 9th, 2009
  • Категория:/ JavaScript /
Rss Commenti

Нет ответов

Оставить комментарий





О проекте

Publications feed