Алексей Андросов - Debugger: Отладка кода
0 likes1,566 views
Документ содержит руководство по отладке кода в веб-разработке, включая советы по проверке и локализации ошибок. Он обсуждает использование различных инструментов отладки в популярных браузерах, включая возможности консольного логирования и статического анализа кода. Кроме того, подчеркивается важность работы в команде и правильного подхода к поиску багов в коде.
![console.log() и передача
аргументов по ссылке
● В Firefox поможет console.dir()
● В остальных браузерах придется копировать объекты:
● console.log( JSON.parse(JSON.stringify(myObj)) )
● console.log( [].concat(arr) )
● console.log( node.cloneNode(true) )
35](https://image.slidesharecdn.com/alexeyandrosovdebugger-130320123509-phpapp02/85/Debugger-35-320.jpg)
Алексей Андросов - Debugger: Отладка кода
- 2. Debugger Алексей Андросов Старший разработчик интерфейсов Школа разработки интерфейсов, Яндекс, 2013 год
- 4. Баги – это нормально ● Человеку свойственно ошибаться. ● Браузер – неконтроллируемая среда для исполнения вашего кода. ● Нестабильное сетевое соединение. ● Дефграгменация рынка браузеров. Если вы меряете эффективность своей работы по количеству багов, поздравляю, у вас серьёзные проблемы. 04
- 5. Первое правило: вы — дурак, а все вокруг — Д'Артаньяны
- 6. Второе правило: ошибка не в вашем коде, а в коде вашей команды
- 7. С чего начать? 1. Выдохните, расслабьтесь, выпейте чаю 2. Локализовать проблему в рамках фронтед-бекенд 07
- 8. Что у нас есть в арсенале?
- 10. Какие еще дедовские способы есть? ● Красить DOM-ноды с помощью background:red или border: 1px solid #F00 ● Метод «половинчатого деления кода» 10
- 11. Метод «половинчатого деления кода» поможет: ● здесь: var obj = {a: 1, b: 2 , }; , ● и здесь: (function(){})() (function(){})() , ● и при падении браузера. Но пацаны с раёна говорят, что правильно использовать статический анализ кода и git-bisect 11
- 15. Firefox + Web Developer Tools
- 16. IE Developer Tools (IE >= 8)
- 17. IE < 8 ● IE Developer Toolbar/IE7 ● DebugBar ● Companion.JS ● MS Visual Studio ● Script Debugger ● … 17
- 18. Opera Dragonfly
- 19. Что можно с ними делать? ● HTML/CSS: просмотр DOM-дерева, редактирование стилей ● JavaScript: отладка, профилирование ● Процесс загрузки страницы ● и не только это… 19
- 20. Net-panel
- 21. Процесс загрузки
- 22. Подробная информация о запросе
- 24. Debugger Отладка – это построчное выполнение кода с просмотром текущего состояния. Это самый точный способ увидеть проблему. Но это не витальный ответ на все проблемы. К примеру, сложно работать с нелинейным кодом с асинхронными вызовами. А ещё отладка останавливает выполнение кода, и асинхронные запросы (например, ajax) могут потерятся. 24
- 25. Как остановить? ● ключевое слово debugger в коде ● ● 25
- 26. Как остановить по условию? ● ● 26
- 27. Кто изменяет DOM-дерево? ● 27
- 29. Кнопки управления 1. Resume: продолжить выполнение 2. Step over: перейти в к следующему выражению 3. Step into: зайти внутрь функции 4. Step out: выйти из функции 29
- 30. Console
- 31. Console Логирование – это вывод в консоль браузера полезной информации в процессе исполнения кода. Можно выводить абсолютно всё: собственные сообщения, переменные, DOM-ноды и т.п. 31
- 32. console.log() / info() / warn() / error() 01. console.log('console.log'); 02. console.warn('console.warn'); 03. console.info('console.info'); 04. console.error('console.error'); 05. console.group('console.group'); 06. console.log('msg1'); 07. console.groupEnd('console.group'); 32
- 33. console.log() / info() / warn() / error()
- 34. console.log() и передача значений по ссылке 01. function doSmth(obj) { 02. console.log(obj); 03. obj.prop = 2; 04. } 05. doSmth({ 06. prop: 1 07. }); 34
- 35. console.log() и передача аргументов по ссылке ● В Firefox поможет console.dir() ● В остальных браузерах придется копировать объекты: ● console.log( JSON.parse(JSON.stringify(myObj)) ) ● console.log( [].concat(arr) ) ● console.log( node.cloneNode(true) ) 35
- 36. Что еще есть? ● Вывод стека выполнения до текущего момента: console.trace() ● Замер времени исполнения: console.time('myFunc') / console.timeEnd('myFunc') ● Профилирование: console.profile('myFunc') / console.profileEnd('myFunc') ● … 36
- 38. Chrome
- 39. Firefox
- 40. Firefox + Firebug + EventBug
- 41. Firefox + Firebug + Firequery
- 43. window.onerror 01. window.onerror = function(msg, url, line) { 02. new Image().src = '/log?type=jserror' + 03. '&msg=' + encodeURIComponent(msg) + 04. '&url=' + encodeURIComponent(url) + 05. '&line=' + encodeURIComponent(line); 06. } 43
- 44. Главная проблема window.onerror “ If 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
- 45. Главная проблема window.onerror Можно обойти в Firefox: <script src="…" crossorigin="anonymous"></script> А сервер должен ответить CORS-заголовком Access-Control-Allow-Origin: * 45
- 46. Логирование неожиданного поведения 01. if (allGoesWell) { 02. // все хорошо 03. } else { 04. new Image().src = '/log?type=something_went_wrong' + 05. '&some_usefull_data=' + encodeURIComponent(data) 06. } 46
- 47. Логирование исключений 01. try { 02. // все хорошо 03. } сatch (e) { 04. var msg = e.message || e.toString(); 05. new Image().src = '/log?type=exception' + 06. '&msg=' + encodeURIComponent(msg) 07. '&stack=' + encodeURIComponent(e.stack) 08. } 47
- 48. Транспорты и долговисящие соединения Их можно отлаживать с помощью скрытой консоли, доступной по хоткею. ● Всегда можно посмотреть все события ● Можно отправлять весь лог на анализ 48
- 50. Статический анализ HTML ● validator.w3.org ● over 9000 плагинов для браузеров и редакторов ● tidy из консоли или API validator.w3.org 50
- 51. Статический анализ CSS ● jigsaw.w3.org/css-validator/ ● over 9000 плагинов для браузеров и редакторов ● CSSLint из консоли или API jigsaw.w3.org/css-validator/ Но, честно говоря, CSSLint не очень 51
- 52. Статический анализ JS ● JSLint и его форк JSHint ● over 9000 плагинов для браузеров и редакторов (отличные инспекции JS в WebStorm) ● jshint.com, jslint.com 52
- 53. Статический анализ JS Поможет найти синтаксические ошибки и возможные логические ошибки 01. if (myVar = 'someValue') 01. if (myVar & anotherVar) 53
- 54. Полезные советы
- 55. Сохранение объекта для последующего исследования 01. if (DEBUG_MODE) { 02. window.objToWatch = myHiddenObject; 03. } После этого можно из консоли иметь доступ к объекту. 55
- 56. Исследование внешних библиотек 01. var _LibSomeFunc = Lib.someFunc 02. Lib.someFunc = function() { 03. console.log('Lib.someFunc wrapper', arguments); 04. _LibSomeFunc.apply(this, arguments) 05. } 56
- 57. Форматирование кода (Chrome, Opera)
- 59. Debugger Алексей Андросов Старший разработчик интерфейсов Школа разработки интерфейсов, Яндекс, 2013 год