Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Death Defying Feats of Debuggery


Published on

Building the biggest, baddest web-app ever? Shave time and pain off the JavaScript debugging processing with these advanced debugging techniques and tools.
Topics will include:
Source-map magic,
Bending breakpoints to your will,
Amazing add-ons for your favorite framework,
Tracking and mercilessly killing memory leaks,
Other awesome stuff
and cake.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Death Defying Feats of Debuggery

  1. 1. Death Defying Feats of Debuggery The Futile Art of Pursuing Perfect Code
  2. 2. Grace Hopper, Inventor of the bug
  3. 3. The first computer bug, literally
  4. 4. Grace Hopper’s Field Guide to Bugs
  5. 5. Bugs of Yore
  6. 6. Bugs of Yore
  7. 7. Bugs of Yore
  8. 8. Breakpoint Dancing
  9. 9. Avoiding Leaks
  10. 10. Wicked Good Toys
  11. 11. Linting Tools PAIN HUMILIATION ESLint
  12. 12. The Alignment of Various Linting Tools Chaotic Good Chaotic Neutral Chaotic Evil Neutral Good Neutral Neutral Neutral Evil Lawful Good Lawful Neutral Lawful Evil
  13. 13. Quick Check jscheck.js Douglas Crockford 2012-04-24 Public Domain JSCheck is a testing tool for JavaScript. It was inspired by QuickCheck, a testing tool for Haskell developed by Koen Claessen and John Hughes of Chalmers University of Technology. JSCheck is a specification-driven testing tool. From a description of the properties of a system, function, or object, it will generate random test cases attempting to prove those properties, and then report its findings. That can be especially effective in managing the evolution of a program because it can show the conformance of new code to old code. It also provides an interesting level of self- documentation, because the executable specifications it relies on can provide a good view of the workings of a program. All of JSCheck can be loaded from a small file called jscheck.js. The source is available at The documentation is available at
  14. 14. Which QuickCheck is Right for You? Sexiness PITA Factor JS-Quick-Check PureScript-QuickCheck jsVerify
  15. 15. Complexity Checkers
  16. 16. Complexity M = E − N + 2P E = the number of edges of the graph. N = the number of nodes of the graph. P = the number of connected components. function factorialSize(myAwesomeInt) { var factorial = 1; var size; for(let i = 1; i <= myAwesomeInt; i+=1) { factorial = factorial * i; } if(factorial > 999) { size = "Yuge!" } else { size = "meh" } return size; } 9 - 8 + 2 * 1 = 3 Parameter count: 1 Cyclomatic complexity: 3 Cyclomatic complexity density: 30% Halstead difficulty: 14 Halstead volume: 153 Halstead effort: 2103
  17. 17. Complexity Simplified Score What It Means Emoji Equivalent 1 - 10 A simple program, without much risk 11 - 20 More complex, moderate risk 21 - 50 Complex, high risk program > 50 Untestable program (very high risk)
  18. 18. Maps
  19. 19. Extensions! Ember Inspector AngularJS Batarang Angular Watchers React Developer Tools Polymer DevTools Extension Meteor DevTools
  20. 20. Who does this guy think he is? John Need Front End Code Monkey Galen Healthcare Twitter : @JohnNeed GitHub : CodePen : Linked In :