Firebug: Part 1 — console

Данной статей я хочу начать серию, посвященную всеми любимому Add-on к Firefox под названием Firebug.

Весь цикл: Console, Commands, Debugging ,Profiling

Я постараюсь раскрыть известные и не очень его возможности, которые могут пригодиться любому Web-разработчику(а могут и не пригодиться, но это врядли).

Если у вас его еще нету, то можно скачать со страницы http://getfirebug.com.



Все примеры выполнялись на странице http://getfirebug.com/index.html, поэтому вы можете пройти за мной все проверить.

Начнем с простого:
Вывод в консоль строки 'Hello World!'.
console.log('Hello World!');


Вывод в консоль строки содержащейся в переменной data.
Преимущество данной функции в том, что она показывает справа файл и строку из которой была вызвана.
data = $$('.bigPara')[0].firstChild.data;
console.debug('текст внутри элемента ".bigPara" = %s', data);


Если вы хотите «разукрасить» консоль, то следующие 3 функции для вас:
Вывод в консоль общего количества ссылок:
(используется для информационных сообщений)
links = $$('a');
console.info('общее число ссылок на странице = %i', links.length);


Вывод в консоль дробного числа:
(в жизни может всякое пригодиться)
console.warn('число Pi = %f', Math.PI);


Вывод в консоль самого объекта ".bigPara", нажав на который можно увидеть все его свойства:
(используется для сообщений об ошибках)
console.error('объект ".bigPara" = %o', $$('.bigPara')[0].firstChild);


Если нужно вывести сообщения группой, то можно сделать следующее:
groupname = 'Группа 1';
console.group(groupname);
console.log("сообщение 1 из %s", groupname);
console.log("сообщение 2 из %s", groupname);
console.log("сообщение 3 из %s", groupname);
console.groupEnd();


Также можно заглянуть внутрь любому объекту(dir)/элементу(dirxml)
(к сожалению их сайт скуден на объекты, поэтому сделаем свой):
console.dir({a: 'test', b: function() {return true;}});
console.dirxml($$('.bigPara'));


Небольшая проверка иногда тоже не помешает:
console.assert(1 === true);


Иногда можно потеряться в коде и чтобы узнать все вызванные функции вставьте в нужное место:
console.trace();


Также можно замерять время выполнения операции:
timeName = '100';
console.time(timeName);
for(var i=0;i<100;i++){
 console.log(i);
}
console.timeEnd(timeName);


Статья основана на Firebug Console API и блоге Michael Sync.

* This source code was highlighted with Source Code Highlighter.