Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 78
Несомненно поможет! Годная статья, в избранное :)
Так на всякий случай добавлю, что для всех браузеров есть getfirebug.com/lite.html
Я его использую в Опере, если надо какие-то косяки с версткой поправить: просто кнопка inspect у него очень удобно расположена :)
Я его использую в Опере, если надо какие-то косяки с версткой поправить: просто кнопка inspect у него очень удобно расположена :)
Пользуюсь подобным, для подключения firebug.lite.js на всех проектах, в независимости от браузера.
if (typeof(console) != 'object') {
var firebug = {env: {css : "PATH_TO_CSS/firebug-lite.css"}};
var doc = window["document"]||null;
var script = doc.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src' , "PATH_TO_FIREBUGLITE/firebug-lite-compressed.js");
doc.getElementsByTagName('head')[0].appendChild(script);
}
Даже для не слишком новичка полезно прочитать.
После релиза все if (allow… удаляются или allow просто выставляется в false?
В целом спасибо, было интересно.
В целом спасибо, было интересно.
Извиняюсь, промахнулся. Ответ на ваш вопрос — чуть ниже
Спасибо, полезная статья.
Человек! Человечище! Спасибо!
За отладку в IE отдельно спасибо!
За отладку в IE отдельно спасибо!
Спасибо за статью, вы возвращаете мою веру в хабр :)
А меня Debug Bar зацепил больше, чем IE8 Developer panel. Последняя тормозит у меня.
Ну и недавно обсуждавшаяся DynaTrace AJAX toolbar тоже очень полезная штука.
А статья шикарная.
Ну и недавно обсуждавшаяся DynaTrace AJAX toolbar тоже очень полезная штука.
А статья шикарная.
Вообще можно и оставить. Только я написал allowBreakpoints, что есть не очень хорошо. Лучше эту переменную не помещать в глобальный scope, а создать свой небольшой а-ля namespace (который будет подключаться на каждую страницу сайта):
А ещё можно обернуть console.log своим методом:
var MyTools = {
debug: {
isOn: false
}
}
// ...
// где-то в коде:
if (MyTools.debug.isOn)
console.log(some_var)
* This source code was highlighted with Source Code Highlighter.А ещё можно обернуть console.log своим методом:
var MyTools = {
debug: {
isOn: false,
log: function() {
if (this.isOn && window.console)
console.log.apply(console, arguments);
},
stop: function() {
if (this.isOn)
debugger;
}
}
};
// ...
// где-то в коде:
MyTools.debug.log(some_var);
MyTools.debug.stop();
* This source code was highlighted with Source Code Highlighter.Прошу прощения, это был ответ на коммент, я промахнулся
sedoy, зачем убиваешь себя?
console.log вылетает в IE любой версии, в Chrome, firefox — нет (ну это касается продакшн).
для ие можно сделать свой лог)
if(!window.console)
{
console = {};
console.log = function(message){alert('Консоль говорит: \n\n' + message)};
}
if(!window.console)
{
console = {};
console.log = function(message){alert('Консоль говорит: \n\n' + message)};
}
или выводить все в какой-нибудь элемент в dom
Да, я упомянал в статье Firebug Lite или Blackbird
В обоих вариантах — вывод в какой-то ДОМ-элемент
И потом это прикрутить вот сюда — вот и получится универсальный логгер с флажком! :)
В обоих вариантах — вывод в какой-то ДОМ-элемент
И потом это прикрутить вот сюда — вот и получится универсальный логгер с флажком! :)
конечно можно, я просто добавил уточнение про то, что будет если его не убрать в продакшн
для продакшена можно просто переопределить console для всех браузеров
Я в своих проектах с целью недопущения logging'а до продакшна использую следующий код, возможно он будет интересен или полезен:
Соответственно, при необходимости дебага вызывается ProjectNamespace.log() вместо console.log, и на продакшне ProjectNamespace.MUTED_CONSOLE ставится в true.
Если есть сторонний код, из которого вызывается console.log напрямую, или же просто не хочется изменять своим привычкам, то для безопасности продакшна можно сделать следующий финт ушами:
ProjectNamespace.originalConsole = console;
ProjectNamespace.log = function ()
{
if (! ProjectNamespace.MUTED_CONSOLE
&& typeof(ProjectNamespace.originalConsole) != 'undefined'
&& typeof(ProjectNamespace.originalConsole.log) == 'function')
{
ProjectNamespace.originalConsole.log.apply(null, arguments);
}
};
}
console.log = ProjectNamespace.log;
ProjectNamespace.log = function ()
{
if (! ProjectNamespace.MUTED_CONSOLE
&& typeof(console) != 'undefined'
&& typeof(console.log) == 'function')
{
console.log.apply(null, arguments);
}
};
}
Соответственно, при необходимости дебага вызывается ProjectNamespace.log() вместо console.log, и на продакшне ProjectNamespace.MUTED_CONSOLE ставится в true.
Если есть сторонний код, из которого вызывается console.log напрямую, или же просто не хочется изменять своим привычкам, то для безопасности продакшна можно сделать следующий финт ушами:
ProjectNamespace.originalConsole = console;
ProjectNamespace.log = function ()
{
if (! ProjectNamespace.MUTED_CONSOLE
&& typeof(ProjectNamespace.originalConsole) != 'undefined'
&& typeof(ProjectNamespace.originalConsole.log) == 'function')
{
ProjectNamespace.originalConsole.log.apply(null, arguments);
}
};
}
console.log = ProjectNamespace.log;
У меня в Safari под Windows при остановке на breakpoint, в окне пропадает исходник Javascript. То есть можно жать кнопки пошагового прохода, справа меняется номер строки и значения переменных, но вместо когда — пустой прямоугольник. Пришлось искать ошибку другим способом. Safari вроде последний, 4.0.4.
Собственно, Safari был нужен только потому, что пользователь Safari жаловался, что у него не работает сайт.
Собственно, Safari был нужен только потому, что пользователь Safari жаловался, что у него не работает сайт.
Лучший дебаггер для javascript — это понимание того, как устроен javascript (а не только библиотеки), и в первую очередь, наверное, замыкания.
если нужно посмотреть значение объектов, можно использовать
console.log('%o',obj)
Аякс запросы (какие данные передали, какому скрипту, что вернул скрипт) кроме как в firebug можно просматривать?
console.log('%o',obj)
Аякс запросы (какие данные передали, какому скрипту, что вернул скрипт) кроме как в firebug можно просматривать?
Firebug
Opera Dragonfly -> Network Tab = показывает AJAX
Safari/Chrome WebInspector -> Resources Tab = показывает AJAX
IE — я не нашёл. Но можно поставить себе на комп что-то типа Fiddler, тогда и с IE разберёмся :)
Opera Dragonfly -> Network Tab = показывает AJAX
Safari/Chrome WebInspector -> Resources Tab = показывает AJAX
IE — я не нашёл. Но можно поставить себе на комп что-то типа Fiddler, тогда и с IE разберёмся :)
Спасибо. Глаза открыли)
Сафари/Хром показывают что вернул скрипт, Opera Dragonfly — нет, но и знать какой скрипт запрашивается очень помогает
Сафари/Хром показывают что вернул скрипт, Opera Dragonfly — нет, но и знать какой скрипт запрашивается очень помогает
Для IE есть неплохой плагинчик HTTP Analyzer
Для аякса есть прекрасный плагин HTTPWatch под Internet Explorer, вообще мощная утилита.
Аналог у Firefox это HTTPFox
P.S. Утилиты не только для Аякса, отнюдь, снифает весь трафик.
Аналог у Firefox это HTTPFox
P.S. Утилиты не только для Аякса, отнюдь, снифает весь трафик.
alert — очень хорошо, если нужно посмотреть информацию которую можно увидеть через алерт, то следует использовать именно его, метки дебага — отлично и удобно, но они пассвино заставляют забывать дебаги в коде, а со временем еще и специально оставлять, мозг сам аргументирует: «не влияет на работу, ну и оставим, на всякий случай» в итоге получаем в релизе кучу инфы для дебага, помоему это плохо
Я сделал console.js. Это скрипт-прокладка для API консоли Firebug-а. Полезен для Оперы и IE. Умеет «разворачивать» объекты, в отличие от alert-а и opera.postError.
alert({x:3, y:5}) --> [object Object]
alert(document.body) --> [object HTMLBodyElement]console.log({x:3, y:5}) --> { 'x': 3, 'y': 5 }
console.log(document.body) --> <BODY class="timeline" id="home">В ie8 выдает ошибку Объект не поддерживает это свойство или метод console.group(«basic arrays and objects»);
в opera 10.00 не вижу что бы что-то писалось в лог
в хроме 3.0.195.33 только надписи object
в opera 10.00 не вижу что бы что-то писалось в лог
в хроме 3.0.195.33 только надписи object
В IE8 и Хроме этот скрипт ничего не делает. Первая строчка скрипта:
В IE8 нету console.group. Получается ошибка. Исправлю как-нибудь.
В Опере у меня работает нормально.
В Хроме 4 должно быть как на скриншоте. Не знаю как в 3-й, меня она мало интересует.
if (typeof console === 'undefined') {, а там консоль определена.В IE8 нету console.group. Получается ошибка. Исправлю как-нибудь.
В Опере у меня работает нормально.
В Хроме 4 должно быть как на скриншоте. Не знаю как в 3-й, меня она мало интересует.
можно вопрос? а то мне всегда было интересно как люди выкручиваются :)
как вы выбираетесь из ситуации, когда надо узнать, какие обработчики висят на элементе?
если есть элемент с несколькими классами, на каждый из которых есть свой обработчик.
как вы выбираетесь из ситуации, когда надо узнать, какие обработчики висят на элементе?
если есть элемент с несколькими классами, на каждый из которых есть свой обработчик.
Recommended ConfigurationНе слабо.
Firefox 3.7a1pre
Firebug 1.5b1
Eventbug 0.1a2
Только в 3.7 появился getListenerInfoFor. До этого не было никакого механизма для просмотра событий.
все методы console кому интересно: getfirebug.com/console.html
Отличная статья, наконец-то узнал как ошибки в скриптах вылавливать… :) а то все по методу черного ящика кодил… :)
В Опере так и не смог толком подебажить.
Debug через alert()
«Это наименее информативный debug, который к тому же останавливает поток Javascript. Да к тому же модальный по отношению к браузеру. Забудьте, что он вообще существует.»
БРЕД.
кучу раз встречал случай когда алерт лучшее решение (в том числе так как он останавливает исполнение)
плюс дебаггеры очеь плохо относятся к подгружаемому eval коду который ещё и меняется постоянно…
«Это наименее информативный debug, который к тому же останавливает поток Javascript. Да к тому же модальный по отношению к браузеру. Забудьте, что он вообще существует.»
БРЕД.
кучу раз встречал случай когда алерт лучшее решение (в том числе так как он останавливает исполнение)
плюс дебаггеры очеь плохо относятся к подгружаемому eval коду который ещё и меняется постоянно…
Может быть это моё личное мнение, но когда, когда alert() лучше, чем приведённые мной способы (breakpoints, debugger, console.log/dir, ...)?
Ведь alert останавливает поток, блокирует взаимодействие с браузером и при этом всего навсего выводит строку… Без возможности заглянуть в иерархию объекта.
breakpoints тоже тормозят поток, но при этом дают возможность осмотреться в scope. И не модальный.
console.log/dir — не тормозит поток, но более информативен, т.к. даёт заглянуть внутрь объекта. И не модальный.
Чем же alert() лучше?
Ведь alert останавливает поток, блокирует взаимодействие с браузером и при этом всего навсего выводит строку… Без возможности заглянуть в иерархию объекта.
breakpoints тоже тормозят поток, но при этом дают возможность осмотреться в scope. И не модальный.
console.log/dir — не тормозит поток, но более информативен, т.к. даёт заглянуть внутрь объекта. И не модальный.
Чем же alert() лучше?
Спасибо, полезная статья!
Как сказано автором, действительно очень просто забыть console.log в коде, ловился на этом и было не очень приятно за такую детскую ошибку, в каждом проекте есть функция-синоним вида function c(x){ try{console.log(x); }catch{} }. и пользоваться быстрее с(yourElement) и IE не падает.
Внесу свою посильную лепту.
Когда дебажим под IE8. Во встроенном Developer Tools есть переключатель режима обозревателя: ie7, ie8, представление совместимости ie8. Кроме того, можно изменять и режим документов: стандарты ie7, стандарты ie8 и режим совместимости, он же quirks mode. Исходя из понимания последнего названия, данный режим заставляет браузер работать, учитывая «особенности и ошибки конкурирующих или старых версий программных продуктов» (с, Википедия) — в общем, с намеком на ie6 и ко.
Не могу со 100% вероятностью сказать, насколько точно ie7-режимы совпадают с реальностью. Однако эмпирически было проверено, что после корректного отображения в этом режиме, реальный ie7 показал корректно. quirks mode особо не использовал.
И еще момент. Вряд ли кому открою Америку, но сам почему-то не сразу догадался до подобного. В общем, часто встает необходимость вывести дебаг в формате: метка + значение. Причем значение может быть объектом. Конечно, можно выводить в разных строках, но тогда при больших объемах лога становится трудно разбирать что и где (как минимум не наглядно). Вариант решения: console.log([ label, value ]); — соответственно будет и метка, и значение. Плюс возможность сразу просмотреть объект (в том же firebug). Как вариант, можно обернуть в {} — для массового вывода ;)
Когда дебажим под IE8. Во встроенном Developer Tools есть переключатель режима обозревателя: ie7, ie8, представление совместимости ie8. Кроме того, можно изменять и режим документов: стандарты ie7, стандарты ie8 и режим совместимости, он же quirks mode. Исходя из понимания последнего названия, данный режим заставляет браузер работать, учитывая «особенности и ошибки конкурирующих или старых версий программных продуктов» (с, Википедия) — в общем, с намеком на ie6 и ко.
Не могу со 100% вероятностью сказать, насколько точно ie7-режимы совпадают с реальностью. Однако эмпирически было проверено, что после корректного отображения в этом режиме, реальный ie7 показал корректно. quirks mode особо не использовал.
И еще момент. Вряд ли кому открою Америку, но сам почему-то не сразу догадался до подобного. В общем, часто встает необходимость вывести дебаг в формате: метка + значение. Причем значение может быть объектом. Конечно, можно выводить в разных строках, но тогда при больших объемах лога становится трудно разбирать что и где (как минимум не наглядно). Вариант решения: console.log([ label, value ]); — соответственно будет и метка, и значение. Плюс возможность сразу просмотреть объект (в том же firebug). Как вариант, можно обернуть в {} — для массового вывода ;)
Возможно кому-то поможет:
Иногда необходимо вывести в лог свой объект со всеми свойствами, или в alert, чтобы посмотреть что-то по-быстрому. Для приведения объекта к строке браузеры вызывают ему toString(). Этот метод определен в основных типах (типа Object, Function и т.д.). Однако, приведение объекта к строке по-умолчанию возвращает [object Object].
Идея в том, чтобы в своих объектах перегрузить метод toString, чтобы выводить что-нибудь полезное. Например так:
Теперь вызов alert(MyObj) будет выводить не [object Object], а все свойства объекта:
Иногда необходимо вывести в лог свой объект со всеми свойствами, или в alert, чтобы посмотреть что-то по-быстрому. Для приведения объекта к строке браузеры вызывают ему toString(). Этот метод определен в основных типах (типа Object, Function и т.д.). Однако, приведение объекта к строке по-умолчанию возвращает [object Object].
Идея в том, чтобы в своих объектах перегрузить метод toString, чтобы выводить что-нибудь полезное. Например так:
var MyObj = {
property1 : "qwerty",
property2 : 100500,
anotherProperty : true,
method1 : function() {
// do something
},
toString : function() {
return "{\n" +
" property1 : " + this.property1 + ",\n" +
" property2 : " + this.property2 + ",\n" +
" anotherProperty : " + this.anotherProperty + "\n" +
"}";
}
};
Теперь вызов alert(MyObj) будет выводить не [object Object], а все свойства объекта:
{
property1 : qwerty,
property2 : 100500,
anotherProperty : true
}
Продолжая мысль… не обязательно держать определение объекта и его toString вместе.
Можно написать в продакшн коде:
А в отдельном файле (например, debug.js) написать следующее:
И подключать его по мере надобности, т.е. во время разработки
Можно написать в продакшн коде:
var MyObj = {
property1 : "qwerty",
property2 : 100500,
anotherProperty : true,
method1 : function() {
// do something
}
};
А в отдельном файле (например, debug.js) написать следующее:
if(MyObj)
{
MyObj.toString = function() {
return "{\n" +
" property1 : " + this.property1 + ",\n" +
" property2 : " + this.property2 + ",\n" +
" anotherProperty : " + this.anotherProperty + "\n" +
"}";
}
}
И подключать его по мере надобности, т.е. во время разработки
Еще как вариант — написать общую функцию, где for (var i in object)… вывести поля. можно рекурсивно — тогда не придется заморачиваться под каждый новый объект.
Тоже вариант, но тогда будет меньше контроля над тем, как отображать содержимое.
Тут уже каждый решает в каждом конкретном случае, что лучше )
Тут уже каждый решает в каждом конкретном случае, что лучше )
Продолжу мысль:
Понимать, как это работает — здорово. Но надо экономить своё время и уметь полагаться на 3d-party разработки ;)
- -> переопределить toString
- -> вынести toString и применять к любому объекту
- ->сделать рекурсивный пробег по иерархии объекта (попутно избежав бесконечной рекурсии)
- -> сделать красивый вывод иерархии объекта (с "±" и т.д.) в какой-нибудь DIV коммандой console.log(obj)
- -> чёрт, это всё уже сделано в Firebug Lite! :) Скачать, пользоваться на здоровье :)
Понимать, как это работает — здорово. Но надо экономить своё время и уметь полагаться на 3d-party разработки ;)
Отличная статья, спасибо!
Может кому-то еще пригодится: Продвинутая отладка Javascript
Спасибо! Неплохая статья — я не слышал про дебаг для Opera`ы и Safari/Chrome — так что нашёл ссылки довольно ценными.
Маленькое дополнение — есть, на мой взгляд, отличный проект Log4Javascript ( log4javascript.org/ ), который достоин, на мой взгляд, упоминания в этой статье — он позволяет упростить кроссбраузерный логгинг. Идея взята из мира Java — его прототипом выступил очень известный там проект Log4J.
Я стараюсь его использовать и советую всем, кто разрабатывает серьёзные проекты с активным использованием JS к нему присмотреться.
Маленькое дополнение — есть, на мой взгляд, отличный проект Log4Javascript ( log4javascript.org/ ), который достоин, на мой взгляд, упоминания в этой статье — он позволяет упростить кроссбраузерный логгинг. Идея взята из мира Java — его прототипом выступил очень известный там проект Log4J.
Я стараюсь его использовать и советую всем, кто разрабатывает серьёзные проекты с активным использованием JS к нему присмотреться.
Отличный пример грамотно написаной статьи. Не напрягая мозги все понял.
Удобно включать режим отладки из адресной строки, например дописывая в неё #console
if(typeof allow_console == 'undefined'){
var allow_console= false;
var hash = location.hash;
if(hash.indexOf('#console')!=-1){
allow_console = true;
}
}
if(allow_console==true){
console.log('Режим отладки включен');
}
Отличная статья, сэкономили очень много времени, спасибо!
console.log('Режим отладки включен'); не выводит в консоль ошибок FF
Отлаживаю скрипт во встроеyном в FF редакторе JavaScript, Окружение — Браузер
console.log — это вывод в Системную консоль Windows (запуск firefox.exe -console)?
Как можно вывести сообщение в консоль ошибок?
Отлаживаю скрипт во встроеyном в FF редакторе JavaScript, Окружение — Браузер
console.log — это вывод в Системную консоль Windows (запуск firefox.exe -console)?
Как можно вывести сообщение в консоль ошибок?
Картинки поломались =(
Ага, теперь вот думаю, как их восстановить
Habrastorage?
habrahabr.ru/company/tm/blog/139897/
habrahabr.ru/company/tm/blog/139897/
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Отладка Javascript