Отладка и профилирование JavaScript/Ajax Александр Шуркаев Newmedia Stars htmlcoder.visions.ru /

Отладка и профилирование Отладка этап разработки компьютерной программы, на котором обнаруживают, локализуют и устраняют ошибки. Профилирование сбор характеристик работы программы. Инструмент, используемый для анализа работы называют профайлером. 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 –Особенность: 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

Спасибо за внимание! Вопросы?