Debugging War Stories & Strategies to Survive on RejectJS 2014
•
1 recomendación•1,058 vistas
Imagine you’ve received a bug report from your favourite app. It happened on a complex system and you wouldn’t actually know what each part is doing. In this case, the first defense is trying to reproduce it with enabled DevTools. Either you know how to fix it immediately or you waste a lot of time with solving it without success. Have you ever experienced one of these bugs? Trying to fix them for hours without any result? It sucks and simply wastes too much precious time. This talk is going to dive deep into advanced debugging JavaScript apps. We talk about the most powerful strategies and less known techniques in order to be more effective in fixing THE problem.
Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Destacado (9)
Similar a Debugging War Stories & Strategies to Survive on RejectJS 2014
Similar a Debugging War Stories & Strategies to Survive on RejectJS 2014 (20)
Más de Johannes Weber
Más de Johannes Weber (16)
Último
Último (20)
Debugging War Stories & Strategies to Survive on RejectJS 2014
- 1. Image by - en.wikipedia.org/wiki/Monster_Bug_Wars
- 2. Image by - en.wikipedia.org/wiki/Monster_Bug_Wars
- 5. define(['./module'], function (module) {! 'use strict';! /* global google */! ! /**! * @ngdoc service! * @name GoogleService! * @description! * Wraps the global Google Map instance! */! module.factory('GoogleService', function () {! ! if (typeof google !== 'object') {! throw 'google map vendor is not defined.';! }! ! return google;! });! });!
- 7. <body ng-cloak>! ! <ui-view/>! ! <script type="text/javascript" src="https://maps.googleapis.com/…"></script>! <script type="text/javascript" data-main="js/main" src="…/require.js"></script>! </body> The bug was <ui-view/> (HTML5 self closing Tag)
- 8. <body ng-cloak>! ! <ui-view></ui-view>! ! <script type="text/javascript" src="https://maps.googleapis.com/…"></script>! <script type="text/javascript" data-main="js/main" src="…/require.js"></script>! </body>! The solution: <ui-view></ui-view> (just close the Tag in order to work with AngularJS)
- 9. Image by - goo.gl/9UQng3
- 10. Welcome to… Debugging War Stories & Strategies to Survive
- 12. Consulting & Conception Software Development transparent and agile
- 15. Time spend on debugging is around 10% on greenfield rojects
- 16. and > 10% on legacy projects
- 18. Source data from IBM Research, Image by -www.endlesslycurious.com/2008/09/04/the-cost-of-bug-fixing/
- 19. Illusion of control Image by - www.targetprocess.com/userguides/userguide.html
- 20. Image by - goo.gl/RUQ8vS
- 21. Image by - goo.gl/U18J80
- 22. Image by - www.teehanlax.com/blog/success/
- 23. Legacy Code
- 26. Bugs in Agile Environments Image by freefall.purrsia.com
- 29. Image by - goo.gl/CMW3do Duct Tape Debugging
- 30. Image by - sodancapassion.blogspot.de/2012_05_01_archive.html
- 31. Use debugging for pay interest on your knowledge Image by - www.steffen-haschler.de/2013-14-ei-7a-physik.html
- 32. Complex systems are more handsome Image (c) by Charles Rincheval - goo.gl/ouhFoM when working together on it. Train by Pair Programming, Coding DoJos
- 34. Then start validate your assumptions…
- 37. … till you find the bug.
- 39. Bottom-up vs. Top-Down debugging
- 40. Debug Utils // Attach an event handler that starts debugger when trigerred.! $duv(object, 'eventName'); ! ! // Debug when something tries to get at a property of an object.! $dug(object, 'property');! ! // Debug when something tries to set a property on an object.! $dus(object, 'property');! ! // Wraps an object's method with a wrapper function with a debugger statement.! $dum(object, 'method');! https://github.com/amasad/debug_utils
- 41. Yet another LiveReload: fb-flo Modify running apps without reloading facebook.github.io/fb-flo/
- 42. Tooling
- 44. Break on…
- 45. console.log()
- 48. Styling console output with CSS
- 49. Or do image „processing“ ;-) http://ohgyun.github.io/console-text-image/example/example.html
- 53. …and many many more!
- 54. Get experience with them https://developer.chrome.com/devtools/docs/commandline-api
- 55. Other useful tools https://chrome.google.com/webstore/category/app/11-web-development https://developer.chrome.com/devtools/docs/extensions-gallery ! http://devtoolsecrets.com/
- 56. Let’s talk! - afterwards @jowe Johannes Weber