DebuggerАлексей  Андросов

Старший  разработчик  интерфейсов

Школа  разработки  интерфейсов,  Яндекс,

2013  год

Баги  –  этонормально

Баги  –  это  нормально●    Человеку  свойственно  ошибаться.

●    Браузер  –  неконтроллируемая  среда  для  исполнения  вашего

кода.

●    Нестабильное  сетевое  соединение.

●    Дефграгменация  рынка  браузеров.

Если  вы  меряете  эффективность  своей  работы  по  количеству

багов,  поздравляю,  у  вас  серьёзные  проблемы.

04

Первое  правило:вы  —  дурак,а  все  вокруг  —Д'Артаньяны

Второе  правило:ошибка  не  в  вашемкоде,  а  в  кодевашей  команды

С  чего  начать?1.  Выдохните,  расслабьтесь,  выпейте  чаю

2.  Локализовать  проблему  в  рамках  фронтед-­бекенд

07

Что  у  насесть  варсенале?

alert()  –наше  всё!  

Какие  еще  дедовские  способыесть?

●    Красить  DOM-­ноды  с  помощью   background:red  или

border: 1px solid #F00

●    Метод  «половинчатого  деления  кода»

10

Метод  «половинчатогоделения  кода»  поможет:

●    здесь:   var obj = {a: 1, b: 2 , }; ,

●    и  здесь:   (function(){})() (function(){})() ,

●    и  при  падении  браузера.

Но  пацаны  с  раёна  говорят,  что  правильно  использовать

статический  анализ  кода  и  git-­bisect  

11

Современныесредстваотладки

WebKit  Web  Inspector

Firefox  +  Firebug

Firefox  +  Web  Developer  Tools

IE  Developer  Tools  (IE  >=  8)

IE  <  8●    IE  Developer  Toolbar/IE7

●    DebugBar

●    Companion.JS

●    MS  Visual  Studio

●    Script  Debugger

●    …

17

Opera  Dragonfly

Что  можно  с  ними  делать?●    HTML/CSS:  просмотр  DOM-­дерева,  редактирование  стилей

●    JavaScript:  отладка,  профилирование

●    Процесс  загрузки  страницы

●    и  не  только  это…

19

Net-­panel

Процесс  загрузки

Подробная  информация  о  запросе

Отладка

JavaScript

DebuggerОтладка  –  это  построчное  выполнение  кода  с  просмотром

текущего  состояния.  Это  самый  точный  способ  увидеть  проблему.

Но  это  не  витальный  ответ  на  все  проблемы.  К  примеру,  сложно

работать  с  нелинейным  кодом  с  асинхронными  вызовами.  А  ещё

отладка  останавливает  выполнение  кода,  и  асинхронные  запросы

(например,  ajax)  могут  потерятся.

24

Как  остановить?●    ключевое  слово   debugger  в  коде

●    

●    

25

Как  остановить  по  условию?

●    

●    

26

Кто  изменяет  DOM-­дерево?

●    

27

Кнопки  управления

1.  Resume:  продолжить  выполнение

2.  Step  over:  перейти  в  к  следующему  выражению

3.  Step  into:  зайти  внутрь  функции

4.  Step  out:  выйти  из  функции

29

Console

ConsoleЛогирование  –  это  вывод  в  консоль  браузера  полезной

информации  в  процессе  исполнения  кода.

Можно  выводить  абсолютно  всё:  собственные  сообщения,

переменные,  DOM-­ноды  и  т.п.

31

console.log()  /  info()  /  warn()  /error()console.log('console.log');

console.warn('console.warn');

console.info('console.info');

console.error('console.error');

console.group('console.group');

console.log('msg1');

console.groupEnd('console.group');

01.

02.

03.

04.

05.

06.

07.

32

console.log()  /  info()  /  warn()  /  error()

console.log()  и  передачазначений  по  ссылкеfunction doSmth(obj) {

console.log(obj);

obj.prop = 2;

}

doSmth({

prop: 1

});

01.

02.

03.

04.

05.

06.

07.

34

console.log()  и  передачааргументов  по  ссылке

●    В  Firefox  поможет  console.dir()

●      В  остальных  браузерах  придется  копировать  объекты:

●    console.log(  JSON.parse(JSON.stringify(myObj))  )

●    console.log(  [].concat(arr)  )

●    console.log(  node.cloneNode(true)  )

35

Что  еще  есть?●    Вывод  стека  выполнения  до  текущего  момента:  console.trace()

●    Замер  времени  исполнения:  console.time('myFunc')  /

console.timeEnd('myFunc')

●    Профилирование:  console.profile('myFunc')  /

console.profileEnd('myFunc')

●    …

36

Какотслеживатьсобытия?

Chrome

Firefox

Firefox  +  Firebug  +  EventBug

Firefox  +  Firebug  +  Firequery

А  какотлаживатьсявпродакшене?

window.onerrorwindow.onerror = function(msg, url, line) {

new Image().src = '/log?type=jserror' +

'&msg=' + encodeURIComponent(msg) +

'&url=' + encodeURIComponent(url) +

'&line=' + encodeURIComponent(line);

}

01.

02.

03.

04.

05.

06.

43

Главная  проблемаwindow.onerrorIf  the  location  URL  does  not  have  a  same  origin  as  the  origin,  then  set

message  to  "Script  error.",  set  location  to  the  empty  string,  and  set

line  to  0.

http://dev.w3.org/html5/spec/webappapis.html#report-­the-­error“

44

Главная  проблемаwindow.onerrorМожно  обойти  в  Firefox:

<script src="…" crossorigin="anonymous"></script>

А  сервер  должен  ответить  CORS-­заголовком

Access-­Control-­Allow-­Origin:  *

45

Логирование  неожиданногоповеденияif (allGoesWell) {

// все хорошо

} else {

new Image().src = '/log?type=something_went_wrong' +

'&some_usefull_data=' + encodeURIComponent(data)

}

01.

02.

03.

04.

05.

06.

46

Логирование  исключенийtry {

// все хорошо

} сatch (e) {

var msg = e.message || e.toString();

new Image().src = '/log?type=exception' +

'&msg=' + encodeURIComponent(msg)

'&stack=' + encodeURIComponent(e.stack)

}

01.

02.

03.

04.

05.

06.

07.

08.

47

Транспорты  и  долговисящиесоединенияИх  можно  отлаживать  с  помощью  скрытой  консоли,  доступной  по

хоткею.

●    Всегда  можно  посмотреть  все  события

●    Можно  отправлять  весь  лог  на  анализ

48

Статическийанализ  кода

Статический  анализ  HTML

●    validator.w3.org

●    over  9000  плагинов  для  браузеров  и  редакторов

●    tidy  из  консоли  или  API  validator.w3.org

50

Статический  анализ  CSS●    jigsaw.w3.org/css-­validator/

●    over  9000  плагинов  для  браузеров  и  редакторов

●    CSSLint  из  консоли  или  API  jigsaw.w3.org/css-­validator/

Но,  честно  говоря,  CSSLint  не  очень

51

Статический  анализ  JS●    JSLint  и  его  форк  JSHint

●    over  9000  плагинов  для  браузеров  и  редакторов  (отличные

инспекции  JS  в  WebStorm)

●    jshint.com,  jslint.com

52

Статический  анализ  JSПоможет  найти  синтаксические  ошибки  и  возможные  логические

ошибки

if (myVar = 'someValue')

if (myVar & anotherVar)

01.

01.

53

Полезныесоветы

Сохранение  объекта  дляпоследующего  исследованияif (DEBUG_MODE) {

window.objToWatch = myHiddenObject;

}

После  этого  можно  из  консоли  иметь  доступ  к  объекту.

01.

02.

03.

55

Исследование  внешнихбиблиотекvar _LibSomeFunc = Lib.someFunc

Lib.someFunc = function() {

console.log('Lib.someFunc wrapper', arguments);

_LibSomeFunc.apply(this, arguments)

}

01.

02.

03.

04.

05.

56

Форматирование  кода  (Chrome,  Opera)

DebuggerАлексей  Андросов

Старший  разработчик  интерфейсов

Школа  разработки  интерфейсов,  Яндекс,

2013  год