Алексей Андросов - Debugger: Отладка кода
-
Upload
yandex -
Category
Technology
-
view
1.479 -
download
2
description
Transcript of Алексей Андросов - Debugger: Отладка кода
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 год