debugging war stories & strategies to survive on rejectjs 2014

Image by - en.wikipedia.org/wiki/Monster_Bug_Wars

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;! });!});!

<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)

<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)

Image by - goo.gl/9UQng3

Debugging War Stories & Strategies to Survive

Welcome to…

Johannes Weber

@jowe

Consulting & Conception

Software Developmenttransparent 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/

http://www.endlesslycurious.com/2008/09/04/the-cost-of-bug-fixing/

Image by - www.targetprocess.com/userguides/userguide.html

Illusion of control

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

Image by - www.steffen-haschler.de/2013-14-ei-7a-physik.html

Use debugging for pay interest on your

knowledge

Image (c) by Charles Rincheval - goo.gl/ouhFoM

Complex systems are more handsome when working together on it.

Train by Pair Programming, Coding DoJos

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 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

facebook.github.io/fb-flo/

Modify running apps without reloading

Yet another LiveReload: fb-flo

Tooling

Break on…

console.log()

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“)

…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/devtools/docs/extensions-gallery !

http://devtoolsecrets.com/

Let’s talk! - afterwards @jowe

Johannes Weber