Image by - en.wikipedia.org/wiki/Monster_Bug_Wars
Image by - en.wikipedia.org/wiki/Monster_Bug_Wars
define(['./module'], function (module) {! 
'use strict';! 
/* global google */! 
! 
/**! 
* @ngdoc service! 
* @name Googl...
<body ng-cloak>! 
! 
<ui-view/>! 
! 
<script type="text/javascript" src="https://maps.googleapis.com/…"></script>! 
<scrip...
<body ng-cloak>! 
! 
<ui-view></ui-view>! 
! 
<script type="text/javascript" src="https://maps.googleapis.com/…"></script>...
Image by - goo.gl/9UQng3
Welcome to… 
Debugging War Stories & 
Strategies to Survive
Johannes Weber 
@jowe
Consulting & Conception 
Software Development 
transparent and agile
Time spend on debugging is around 10% 
on greenfield rojects
and > 10% on legacy projects
Source data from IBM Research, Image by -www.endlesslycurious.com/2008/09/04/the-cost-of-bug-fixing/
Illusion of control 
Image by - www.targetprocess.com/userguides/userguide.html
Image by - goo.gl/RUQ8vS
Image by - goo.gl/U18J80
Image by - www.teehanlax.com/blog/success/
Legacy Code
Images by -goo.gl/P6ZxdU
Image by www.computerwoche.de/a/mehr-erfolg-durch-flexibilitaet,1907184,3
Bugs in Agile Environments 
Image by freefall.purrsia.com
Image by - goo.gl/CMW3do 
Duct Tape Debugging
Image by - sodancapassion.blogspot.de/2012_05_01_archive.html
Use debugging for pay 
interest on your 
knowledge 
Image by - www.steffen-haschler.de/2013-14-ei-7a-physik.html
Complex systems are more handsome 
Image (c) by Charles Rincheval - goo.gl/ouhFoM 
when working together on it. 
Train by ...
Create your assumptions.
Then start validate your assumptions…
… till you find the bug.
Bottom-up vs. Top-Down debugging
Debug Utils 
// Attach an event handler that starts debugger when trigerred.! 
$duv(object, 'eventName'); ! 
! 
// Debug w...
Yet another LiveReload: fb-flo 
Modify running apps without reloading 
facebook.github.io/fb-flo/
Tooling
Break on…
console.log()
console.log() vs. console.table()
console.log() vs. console.table()
Styling console output with CSS
Or do image „processing“ ;-) 
http://ohgyun.github.io/console-text-image/example/example.html
console.time(“Benchmark Name“)
(un)monitorEvents(object, “event“)
(un)monitorEvents(object, “event“)
…and many many more!
Get experience with them 
https://developer.chrome.com/devtools/docs/commandline-api
Other useful tools 
https://chrome.google.com/webstore/category/app/11-web-development 
https://developer.chrome.com/devto...
Let’s talk! - afterwards 
@jowe 
Johannes Weber
Debugging War Stories & Strategies to Survive on RejectJS 2014
Debugging War Stories & Strategies to Survive on RejectJS 2014
Debugging War Stories & Strategies to Survive on RejectJS 2014
Debugging War Stories & Strategies to Survive on RejectJS 2014
Debugging War Stories & Strategies to Survive on RejectJS 2014
Debugging War Stories & Strategies to Survive on RejectJS 2014
Debugging War Stories & Strategies to Survive on RejectJS 2014
Debugging War Stories & Strategies to Survive on RejectJS 2014
Debugging War Stories & Strategies to Survive on RejectJS 2014
Debugging War Stories & Strategies to Survive on RejectJS 2014
Debugging War Stories & Strategies to Survive on RejectJS 2014
Debugging War Stories & Strategies to Survive on RejectJS 2014
Nächste SlideShare
Wird geladen in …5
×

Debugging War Stories & Strategies to Survive on RejectJS 2014

835 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
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

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

Keine Downloads
Aufrufe
Aufrufe insgesamt
835
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
1
Aktionen
Geteilt
0
Downloads
8
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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

×