Post on 25-May-2015
description
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 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/
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()
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/devtools/docs/extensions-gallery !
http://devtoolsecrets.com/
Let’s talk! - afterwards @jowe
Johannes Weber