Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Debugging War Stories & Strategies to Survive on RejectJS 2014

930 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Debugging War Stories & Strategies to Survive on RejectJS 2014

  1. 1. Image by - en.wikipedia.org/wiki/Monster_Bug_Wars
  2. 2. Image by - en.wikipedia.org/wiki/Monster_Bug_Wars
  3. 3. 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;! });! });!
  4. 4. <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)
  5. 5. <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)
  6. 6. Image by - goo.gl/9UQng3
  7. 7. Welcome to… Debugging War Stories & Strategies to Survive
  8. 8. Johannes Weber @jowe
  9. 9. Consulting & Conception Software Development transparent and agile
  10. 10. Time spend on debugging is around 10% on greenfield rojects
  11. 11. and > 10% on legacy projects
  12. 12. Source data from IBM Research, Image by -www.endlesslycurious.com/2008/09/04/the-cost-of-bug-fixing/
  13. 13. Illusion of control Image by - www.targetprocess.com/userguides/userguide.html
  14. 14. Image by - goo.gl/RUQ8vS
  15. 15. Image by - goo.gl/U18J80
  16. 16. Image by - www.teehanlax.com/blog/success/
  17. 17. Legacy Code
  18. 18. Images by -goo.gl/P6ZxdU
  19. 19. Image by www.computerwoche.de/a/mehr-erfolg-durch-flexibilitaet,1907184,3
  20. 20. Bugs in Agile Environments Image by freefall.purrsia.com
  21. 21. Image by - goo.gl/CMW3do Duct Tape Debugging
  22. 22. Image by - sodancapassion.blogspot.de/2012_05_01_archive.html
  23. 23. Use debugging for pay interest on your knowledge Image by - www.steffen-haschler.de/2013-14-ei-7a-physik.html
  24. 24. Complex systems are more handsome Image (c) by Charles Rincheval - goo.gl/ouhFoM when working together on it. Train by Pair Programming, Coding DoJos
  25. 25. Create your assumptions.
  26. 26. Then start validate your assumptions…
  27. 27. … till you find the bug.
  28. 28. Bottom-up vs. Top-Down debugging
  29. 29. 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
  30. 30. Yet another LiveReload: fb-flo Modify running apps without reloading facebook.github.io/fb-flo/
  31. 31. Tooling
  32. 32. Break on…
  33. 33. console.log()
  34. 34. console.log() vs. console.table()
  35. 35. console.log() vs. console.table()
  36. 36. Styling console output with CSS
  37. 37. Or do image „processing“ ;-) http://ohgyun.github.io/console-text-image/example/example.html
  38. 38. console.time(“Benchmark Name“)
  39. 39. (un)monitorEvents(object, “event“)
  40. 40. (un)monitorEvents(object, “event“)
  41. 41. …and many many more!
  42. 42. Get experience with them https://developer.chrome.com/devtools/docs/commandline-api
  43. 43. Other useful tools https://chrome.google.com/webstore/category/app/11-web-development https://developer.chrome.com/devtools/docs/extensions-gallery ! http://devtoolsecrets.com/
  44. 44. Let’s talk! - afterwards @jowe Johannes Weber

×