'

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

Понравилась презентация – покажи это...





Слайд 0

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


Слайд 1

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


Слайд 2

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


Слайд 3

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


Слайд 4

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


Слайд 5

Отладка в 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 нетривиальный процесс отладки


Слайд 6

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


Слайд 7

Companion.JS + DebugBar


Слайд 8

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


Слайд 9

Firebug & YSlow


Слайд 10

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


Слайд 11

Консоль в Opera


Слайд 12

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


Слайд 13

Safari Debug


Слайд 14

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


Слайд 15

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


Слайд 16

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


Слайд 17

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


Слайд 18

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


Слайд 19

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


Слайд 20

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


×

HTML:





Ссылка: