Справочник функций

Ваш аккаунт

Войти через: 
Забыли пароль?
Регистрация
Информацию о новых материалах можно получать и без регистрации:

Последние темы форума

Показать новые сообщения »

Почтовая рассылка

Подписчиков: 11650
Последний выпуск: 19.06.2015

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

Автор: FrontEndMe
27 апреля 2010 года

Работа с 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);

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

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

Комментарий:
можно использовать BB-коды
Максимальная длина комментария - 4000 символов.
 

Комментарии

1.
31K
19 июля 2007 года
BlackHeretic
0 / / 19.07.2007
Мне нравитсяМне не нравится
28 апреля 2010, 16:34:46
Отличная ознакомительная статья! Спасибо :)
Правда jQuery тут лишний, на его месте может быть что угодно. Заголовок несколько путает. Статья фактически о консоли.
Кстати, та же самая консоль присутствует и в Google Chrome.
Реклама на сайте | Обмен ссылками | Ссылки | Экспорт (RSS) | Контакты
Добавить статью | Добавить исходник | Добавить хостинг-провайдера | Добавить сайт в каталог