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