Отладка и профилирование JavaScript/Ajax

Отладка и профилирование
Отладка — этап разработки компьютерной программы, на котором обнаруживают, локализуют и устраняют ошибки.
Профилирование — сбор характеристик работы программы. Инструмент, используемый для анализа работы называют профайлером.
ru.wikipedia.org

Отладка JavaScript’а: история
window.alert() vs. console.log()
debugger;
Изначально только в JScript
Теперь в Gecko (Firebug / Venkmen)
opera.postError();

Console API
Раньше только в Firebug
Методы:
console.log(object[, object, ...])
console.debug(object[, object, ...])
console.info(object[, object, ...]) / warn / error
console.assert(expression[, object, ...])
console.dir(object)
console.dirxml(node)
console.count([title])
console.time(name) + console.timeEnd(name)
console.profile([title]) + console.profileEnd()

Отладка в браузерах
Internet Explorer
Mozilla/Firefox
Opera
Safari

Отладка в Internet Explorer
Microsoft Script Debugger
Бесплатен, но требует Windows Genuine
Надстройка Companion.JS + DebugBar
Microsoft Script Editor
Вместе с Microsoft Office 2000+
Особенность: attach to process
Visual Studio/Visual Web Developer
У VWD нетривиальный процесс отладки

Включение отладки в IE

Companion.JS + DebugBar

Отладка в Mozilla/Firefox
Firebug! Firebug! Firebug!
Console API
Надстройка YSlow (включая JSLint)
Всё как полагается: watch, breakpoints, trace, step into, step out, step over и т. д.
Отладчик Venkman
Монструозен

Firebug & YSlow

Отладка в Opera
JavaScript консоль
opera.postError()
НЕТ Console API
Отладчика НЕТ

Консоль в Opera

Отладка в Safari
JavaScript Debug
Mac OS X Terminal window:
defaults write com.apple.Safari IncludeDebugMenu 1
Windows /…/Preferences.plist:
IncludeDebugMenu
Из Console API только console.log()
Отладчик Drosera
Nightly builds

Safari Debug

Кросс-браузерные консоли
Firebug Lite
Console API, частично
или F12
firebugx.js убирает ошибки при использовании Console API
Faux Console
console.log() теперь везде
Jash: JavaScript Shell
Своя консоль

Универсальный лог
if (window.console && console.log) console.log('foobar'); // FF (Firebug), Safari (Debug mode), IE (Firebug Lite, Faux Console или Companion.JS + Microsoft Script Debugger)
else if (window.opera && opera.postError) opera.postError('foobar'); // Opera
else alert('foobar');

Отладка в IDE
JavaScript Debugger в Dreamweaver 4
В DW MX 2004 убрали :-(
Visual Studio/Visual Web Developer
Привязка к .Net-технологиям
AJAX Toolkit Framework для Eclipse

Dev, QA и Prod отладка
Активация в production режима отладки и логирования через GET-параметр
?debug=1
Запись в cookie
Глобальная переменная в коде, устанавливается на сервере в зависимости от окружения
var DEBUG = true;

Профилирование кода
Firebug! Firebug! Firebug!
Время выполнения каждой функции
В Firebug Lite профилирования НЕТ
JsLex
Кросс-браузерный, но нетривиальный

Профилирование в Firebug