Kottenator Nov 26 2009 at 17:26

Отладка Javascript

5 min

145K

JavaScript*

+164

Comments 78

Etherial Nov 26 2009 at 17:42

Несомненно поможет! Годная статья, в избранное :)

DIDJER Nov 26 2009 at 17:54

— «в избранное — непременно в избранное»

alist Nov 26 2009 at 17:42

Так на всякий случай добавлю, что для всех браузеров есть getfirebug.com/lite.html
Я его использую в Опере, если надо какие-то косяки с версткой поправить: просто кнопка inspect у него очень удобно расположена :)

uwl Nov 27 2009 at 09:45

Пользуюсь подобным, для подключения 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);
 }

kivsiak Nov 26 2009 at 17:48

Даже для не слишком новичка полезно прочитать.

aLexusPro Nov 26 2009 at 17:49

После релиза все if (allow… удаляются или allow просто выставляется в false?

В целом спасибо, было интересно.

Kottenator Nov 26 2009 at 18:03

Извиняюсь, промахнулся. Ответ на ваш вопрос — чуть ниже

Ikari Nov 26 2009 at 17:54

Спасибо, полезная статья.

akira Nov 26 2009 at 17:57

Человек! Человечище! Спасибо!
За отладку в IE отдельно спасибо!

AleksDesker Nov 26 2009 at 17:59

Спасибо за статью, вы возвращаете мою веру в хабр :)

web4_0 Nov 26 2009 at 18:00

А меня Debug Bar зацепил больше, чем IE8 Developer panel. Последняя тормозит у меня.
Ну и недавно обсуждавшаяся DynaTrace AJAX toolbar тоже очень полезная штука.

А статья шикарная.

Kottenator Nov 26 2009 at 18:01

Вообще можно и оставить. Только я написал allowBreakpoints, что есть не очень хорошо. Лучше эту переменную не помещать в глобальный scope, а создать свой небольшой а-ля namespace (который будет подключаться на каждую страницу сайта):

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.

Kottenator Nov 26 2009 at 18:04

Прошу прощения, это был ответ на коммент, я промахнулся

UFO just landed and posted this here

Kottenator Nov 26 2009 at 18:07

sedoy, зачем убиваешь себя?

Violinist Nov 26 2009 at 18:14

console.log вылетает в IE любой версии, в Chrome, firefox — нет (ну это касается продакшн).

ya_goshka Nov 26 2009 at 18:19

для ие можно сделать свой лог)

if(!window.console)
{
console = {};
console.log = function(message){alert('Консоль говорит: \n\n' + message)};
}

ya_goshka Nov 26 2009 at 18:22

или выводить все в какой-нибудь элемент в dom

Kottenator Nov 26 2009 at 18:27

Да, я упомянал в статье Firebug Lite или Blackbird

В обоих вариантах — вывод в какой-то ДОМ-элемент

И потом это прикрутить вот сюда — вот и получится универсальный логгер с флажком! :)

Violinist Nov 26 2009 at 18:27

конечно можно, я просто добавил уточнение про то, что будет если его не убрать в продакшн

ya_goshka Nov 27 2009 at 00:22

для продакшена можно просто переопределить console для всех браузеров

gbezyuk Nov 27 2009 at 00:32

Я в своих проектах с целью недопущения logging'а до продакшна использую следующий код, возможно он будет интересен или полезен:

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;

immaculate Nov 26 2009 at 18:37

У меня в Safari под Windows при остановке на breakpoint, в окне пропадает исходник Javascript. То есть можно жать кнопки пошагового прохода, справа меняется номер строки и значения переменных, но вместо когда — пустой прямоугольник. Пришлось искать ошибку другим способом. Safari вроде последний, 4.0.4.

Собственно, Safari был нужен только потому, что пользователь Safari жаловался, что у него не работает сайт.

koriza Nov 26 2009 at 19:03

Лучший дебаггер для javascript — это понимание того, как устроен javascript (а не только библиотеки), и в первую очередь, наверное, замыкания.

-2

Kottenator Nov 26 2009 at 19:13

Да, тут без понимания и шага не сделаешь.

Но когда перед тобой огромный проект, с нескольколетней историей разработки и сотней тысяч строк — тут без дебага не обойтись

gbezyuk Nov 27 2009 at 00:34

Это условие почти всегда необходимое, но довольно редко достаточное для оперативного решения задач отладки.

webwin Nov 26 2009 at 19:32

если нужно посмотреть значение объектов, можно использовать
console.log('%o',obj)
Аякс запросы (какие данные передали, какому скрипту, что вернул скрипт) кроме как в firebug можно просматривать?

Kottenator Nov 26 2009 at 19:49

Firebug
Opera Dragonfly -> Network Tab = показывает AJAX
Safari/Chrome WebInspector -> Resources Tab = показывает AJAX
IE — я не нашёл. Но можно поставить себе на комп что-то типа Fiddler, тогда и с IE разберёмся :)

webwin Nov 26 2009 at 20:04

Спасибо. Глаза открыли)
Сафари/Хром показывают что вернул скрипт, Opera Dragonfly — нет, но и знать какой скрипт запрашивается очень помогает

burivuh Nov 27 2009 at 07:38

Для IE есть неплохой плагинчик HTTP Analyzer

choor Nov 26 2009 at 21:27

Для аякса есть прекрасный плагин HTTPWatch под Internet Explorer, вообще мощная утилита.
Аналог у Firefox это HTTPFox

P.S. Утилиты не только для Аякса, отнюдь, снифает весь трафик.

taliban Nov 26 2009 at 20:46

alert — очень хорошо, если нужно посмотреть информацию которую можно увидеть через алерт, то следует использовать именно его, метки дебага — отлично и удобно, но они пассвино заставляют забывать дебаги в коде, а со временем еще и специально оставлять, мозг сам аргументирует: «не влияет на работу, ну и оставим, на всякий случай» в итоге получаем в релизе кучу инфы для дебага, помоему это плохо

ELV1S Nov 26 2009 at 21:00

Я сделал 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">

webwin Nov 26 2009 at 22:30

В ie8 выдает ошибку Объект не поддерживает это свойство или метод console.group(«basic arrays and objects»);
в opera 10.00 не вижу что бы что-то писалось в лог
в хроме 3.0.195.33 только надписи object

ELV1S Nov 26 2009 at 22:51

В IE8 и Хроме этот скрипт ничего не делает. Первая строчка скрипта: if (typeof console === 'undefined') {, а там консоль определена.

В IE8 нету console.group. Получается ошибка. Исправлю как-нибудь.

В Опере у меня работает нормально.

В Хроме 4 должно быть как на скриншоте. Не знаю как в 3-й, меня она мало интересует.

xxxYURAxxx Nov 26 2009 at 21:09

можно вопрос? а то мне всегда было интересно как люди выкручиваются :)
как вы выбираетесь из ситуации, когда надо узнать, какие обработчики висят на элементе?
если есть элемент с несколькими классами, на каждый из которых есть свой обработчик.

ELV1S Nov 26 2009 at 21:15

Visual Event

homm Nov 26 2009 at 21:22

Отличная штука, тоже рекомендую.

ELV1S Nov 26 2009 at 21:19

Eventbug

homm Nov 26 2009 at 21:23

Recommended Configuration
Firefox 3.7a1pre
Firebug 1.5b1
Eventbug 0.1a2

Не слабо.

ELV1S Nov 26 2009 at 21:30

Только в 3.7 появился getListenerInfoFor. До этого не было никакого механизма для просмотра событий.

goshi Nov 26 2009 at 21:37

все методы console кому интересно: getfirebug.com/console.html

sir_Jack Nov 26 2009 at 21:46

Отличная статья, наконец-то узнал как ошибки в скриптах вылавливать… :) а то все по методу черного ящика кодил… :)

webwin Nov 26 2009 at 22:08

+ отличные комментарии

try4tune Nov 26 2009 at 22:31

В Опере так и не смог толком подебажить.

Flcn Nov 26 2009 at 22:38

Debug через alert()
«Это наименее информативный debug, который к тому же останавливает поток Javascript. Да к тому же модальный по отношению к браузеру. Забудьте, что он вообще существует.»

БРЕД.
кучу раз встречал случай когда алерт лучшее решение (в том числе так как он останавливает исполнение)
плюс дебаггеры очеь плохо относятся к подгружаемому eval коду который ещё и меняется постоянно…

Kottenator Nov 27 2009 at 01:13

Может быть это моё личное мнение, но когда, когда alert() лучше, чем приведённые мной способы (breakpoints, debugger, console.log/dir, ...)?

Ведь alert останавливает поток, блокирует взаимодействие с браузером и при этом всего навсего выводит строку… Без возможности заглянуть в иерархию объекта.

breakpoints тоже тормозят поток, но при этом дают возможность осмотреться в scope. И не модальный.
console.log/dir — не тормозит поток, но более информативен, т.к. даёт заглянуть внутрь объекта. И не модальный.

Чем же alert() лучше?

sp1ne Dec 6 2016 at 17:29

Возможно, просто привычка :)

К плюсам: alert, в отличие от console.log никак не забудешь удалить перед продакшеном))

Для мелких скриптов alert отличное решение.

sp1ne Dec 6 2016 at 17:33

Упс, не посмотрел на дату статьи))

Apocalepse Nov 27 2009 at 00:00

Спасибо, полезная статья!

ferrari Nov 27 2009 at 00:01

Как сказано автором, действительно очень просто забыть console.log в коде, ловился на этом и было не очень приятно за такую детскую ошибку, в каждом проекте есть функция-синоним вида function c(x){ try{console.log(x); }catch{} }. и пользоваться быстрее с(yourElement) и IE не падает.

UFO just landed and posted this here

ya_goshka Nov 27 2009 at 00:26

смотреть на каком месте пупыжит и читать мсдн про это

homm Nov 27 2009 at 00:38

Отлаживайте в ие8 в режие ие7.

sp1ne Dec 6 2016 at 17:32

Вся суть браузера Internet Explorer в один комментарий :)

Kottenator Nov 27 2009 at 01:16

Как вариант:
поставить в IE7 script Debugger + Firebug Lite. Ну и + хорошее знание JS и проекта :)

kpower Nov 27 2009 at 06:58

Внесу свою посильную лепту.

Когда дебажим под IE8. Во встроенном Developer Tools есть переключатель режима обозревателя: ie7, ie8, представление совместимости ie8. Кроме того, можно изменять и режим документов: стандарты ie7, стандарты ie8 и режим совместимости, он же quirks mode. Исходя из понимания последнего названия, данный режим заставляет браузер работать, учитывая «особенности и ошибки конкурирующих или старых версий программных продуктов» (с, Википедия) — в общем, с намеком на ie6 и ко.
Не могу со 100% вероятностью сказать, насколько точно ie7-режимы совпадают с реальностью. Однако эмпирически было проверено, что после корректного отображения в этом режиме, реальный ie7 показал корректно. quirks mode особо не использовал.

И еще момент. Вряд ли кому открою Америку, но сам почему-то не сразу догадался до подобного. В общем, часто встает необходимость вывести дебаг в формате: метка + значение. Причем значение может быть объектом. Конечно, можно выводить в разных строках, но тогда при больших объемах лога становится трудно разбирать что и где (как минимум не наглядно). Вариант решения: console.log([ label, value ]); — соответственно будет и метка, и значение. Плюс возможность сразу просмотреть объект (в том же firebug). Как вариант, можно обернуть в {} — для массового вывода ;)

Dolios Nov 27 2009 at 13:31

В console.log можно написать, например, так:

console.log(label, value, label, value, value, value);

И все будет прекрасно выводиться и не нужно оборачивать ничего.

UFO just landed and posted this here

burivuh Nov 27 2009 at 08:06

Возможно кому-то поможет:

Иногда необходимо вывести в лог свой объект со всеми свойствами, или в 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
}

burivuh Nov 27 2009 at 08:11

Продолжая мысль… не обязательно держать определение объекта и его toString вместе.
Можно написать в продакшн коде:

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" +
		"}";		
	}
}

И подключать его по мере надобности, т.е. во время разработки

kpower Nov 27 2009 at 10:04

Еще как вариант — написать общую функцию, где for (var i in object)… вывести поля. можно рекурсивно — тогда не придется заморачиваться под каждый новый объект.

burivuh Nov 27 2009 at 10:17

Тоже вариант, но тогда будет меньше контроля над тем, как отображать содержимое.
Тут уже каждый решает в каждом конкретном случае, что лучше )

Kottenator Nov 27 2009 at 12:51

Продолжу мысль:

-> переопределить toString
-> вынести toString и применять к любому объекту
->сделать рекурсивный пробег по иерархии объекта (попутно избежав бесконечной рекурсии)
-> сделать красивый вывод иерархии объекта (с "±" и т.д.) в какой-нибудь DIV коммандой console.log(obj)
-> чёрт, это всё уже сделано в Firebug Lite! :) Скачать, пользоваться на здоровье :)

Понимать, как это работает — здорово. Но надо экономить своё время и уметь полагаться на 3d-party разработки ;)

dsCode Nov 27 2009 at 23:22

> -> переопределить toString

Не стоит. Object.prototype.toString — особенный ;)

afelya Nov 27 2009 at 10:28

Отличная статья, спасибо!

heel Dec 1 2009 at 18:38

Может кому-то еще пригодится: Продвинутая отладка Javascript

CestLaVie Dec 14 2009 at 12:56

Спасибо! Неплохая статья — я не слышал про дебаг для Opera`ы и Safari/Chrome — так что нашёл ссылки довольно ценными.

Маленькое дополнение — есть, на мой взгляд, отличный проект Log4Javascript ( log4javascript.org/ ), который достоин, на мой взгляд, упоминания в этой статье — он позволяет упростить кроссбраузерный логгинг. Идея взята из мира Java — его прототипом выступил очень известный там проект Log4J.

Я стараюсь его использовать и советую всем, кто разрабатывает серьёзные проекты с активным использованием JS к нему присмотреться.

shx Dec 17 2009 at 13:48

Отличный пример грамотно написаной статьи. Не напрягая мозги все понял.

kellas Apr 9 2011 at 17:07

Удобно включать режим отладки из адресной строки, например дописывая в неё #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('Режим отладки включен');

}

wartur Feb 24 2012 at 14:56

Отличная статья, сэкономили очень много времени, спасибо!

micnic Feb 29 2012 at 14:58

console.log('Режим отладки включен'); не выводит в консоль ошибок FF
Отлаживаю скрипт во встроеyном в FF редакторе JavaScript, Окружение — Браузер
console.log — это вывод в Системную консоль Windows (запуск firefox.exe -console)?
Как можно вывести сообщение в консоль ошибок?