| Работа с 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);
Я рекомендую посмотреть в работе каждый предложенный пример. Таким образом, наиболее вероятно, то что эта информация «отложится» у вас в голове и вы вспомните о нужном методе отладки в нужный момент времени. |