Отладка и профилирование JavaScript/Ajax Александр Шуркаев Newmedia Stars htmlcoder.visions.ru / alshur@ya.ru. - презентация

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

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

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

4 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()

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

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

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

8 Companion.JS + DebugBar

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

10 Firebug & YSlow

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

12 Консоль в Opera

13 Отладка в 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

14 Safari Debug

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

16 Универсальный лог 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');

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

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

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

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

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