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.

1. Death Defying Feats
of Debuggery
The Futile Art of Pursuing
Perfect Code

2. Grace Hopper, Inventor of the bug

3. The first computer bug, literally

4. Grace Hopper’s Field Guide to Bugs

5. Bugs of Yore

6. Bugs of Yore

7. Bugs of Yore

8. Breakpoint Dancing

9. Avoiding Leaks

10. Wicked Good Toys

11. Linting Tools
PAIN
HUMILIATION
ESLint

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. 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 https://github.com/douglascrockford/JSCheck.
The documentation is available at http://www.JSCheck.org/.

14. Which QuickCheck is Right for You?
Sexiness
PITA Factor
JS-Quick-Check
PureScript-QuickCheck
jsVerify

15. Complexity Checkers

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

19. Extensions!
Ember Inspector
AngularJS Batarang
Angular Watchers
React Developer Tools
Polymer DevTools
Extension
Meteor DevTools

20. Who does this guy think he is?
John Need
Front End Code Monkey
Galen Healthcare
Twitter : @JohnNeed
GitHub : https://github.com/johnneed
CodePen : http://codepen.io/johnneed/
Linked In : https://www.linkedin.com/in/johnneed