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