Squashing JavaScript Bugs

The web is a dirty place. Traces of stacks litter the floor; memory leaking from cracks in the ceiling. Someone lost their context in the corner. Load times are slowly crawling along the window. Join me for a live debugging session as we find and squash different kinds of browser bugs. You leave armed to stomp out your own bugs and cleanup your JavaScript app.

Github Link to GetRantr:
https://github.com/toddhgardner/getRANTR

Transcript

1. SQUASHING JavaScript Bugs with Todd H Gardner @toddhgardner
5. AGENDA 1. About JavaScript 2. How to fix Bugs 3. Fix Some Bugs 4. Fix More Bugs 5. Design for Debuggability with Todd H Gardner @toddhgardner
6. TITANIUM SPONSORS Platinum Sponsors Gold Sponsors
8. Are you ready to play?
9. ''.length C: 2 What will the following JavaScript code return? 1 D: <Error> A: undefined B: 1
10. ''.length C: 2 1 D: <Error> A: undefined B: 1 String.prototype.length returns the number of bytes rather than the number of characters. Unicode characters, like emoji, require two bytes.
11. 0.1 + 0.2 C: 0.3000000000004 What will the following JavaScript code return? 2 D: ‘0.3’ A: 0.3 B: 0.2999999999997
12. 2 JavaScript's floating point operations have issues with overflow rounding precision. 0.1 + 0.2 C: 0.3000000000004 D: ‘0.3’ A: 0.3 B: 0.2999999999997
13. new Date(2016, 5, 31) C: 2016 May 31 What will the following JavaScript code return? 3 D: 2017 May 31 A: 2016 July 1 B: 2016 June 31
14. 3 Months are zero based in Date. This specifies June 31, which overflows to July 1. new Date(2016, 5, 31) C: 2016 May 31 D: 2017 May 31 A: 2016 July 1 B: 2016 June 31
15. new Array(0, 1, Array(2)); C: [0, 1, [object Array]] What will the following JavaScript code return? 4 D: [0, 1, [undefined, undefined]] A: [0, 1, [2]] B: [0, 1, 2]
16. 4 Instantiating an Array with multiple arguments creates an Array from those values. However a single argument only specifies the length. new Array(0, 1, Array(2)); C: [0, 1, [object Array]] D: [0, 1, [undefined, undefined]] A: [0, 1, [2]] B: [0, 1, 2]
17. [10, 5, 1].sort() C: [1, 10, 5] What will the following JavaScript code return? 5 D: [5, 10, 1] A: [1, 5, 10] B: [10, 5, 1]
18. 5 Array.prototype.sort's default comparator assumes String operations. All values are coerced and compared as Strings. [10, 5, 1].sort() C: [1, 10, 5] D: [5, 10, 1] A: [1, 5, 10] B: [10, 5, 1]
19. WINNER
20. JavaScript Happens
21. Debugging is like being the detective in a crime movie where you're also the murderer “ Filipe Fortes
22. Identify Isolate Resolve Prevent How To Fix Bugs
23. Identify Isolate Resolve Prevent • Development • Testing • Monitoring • User Reports
24. Identify Isolate Resolve Prevent • Development • Testing • Monitoring • User Reports cheaper, better, faster
25. • Context Identify Isolate Resolve Prevent - Browser - Page - User - Script(s)
26. • Timeline Identify Isolate Resolve Prevent Complex State Machine - API(s) - JS App(s) - DOM - Browser
27. • Root Cause Identify Isolate Resolve Prevent - Symptoms - State
28. • Context • Timeline • Root Cause Identify Isolate Resolve Prevent
29. Identify Isolate Resolve Prevent Application Code Browser API DOM Network Services
30. Identify Isolate Resolve Prevent Application Code Browser API DOM Network Services Your level of Control
31. Identify Isolate Resolve Prevent Risk, Change, Impact, & “The Right Way”
32. Identify Isolate Resolve Prevent • Regression Tests Test to check for the recurrence of a bug
33. Identify Isolate Resolve Prevent • Process Change - Manual - Automated
34. Identify Isolate Resolve Prevent • Do Nothing Tests and Process have cost. Don’t increase them trivially.
35. Identify Isolate Resolve Prevent • Regression Tests • Process • Do Nothing
36. AGENDA 1. About JavaScript 2. How to fix Bugs 3. Fix Some Bugs 4. Fix More Bugs 5. Design for Debuggability with Todd H Gardner @toddhgardner
38. XKCD.com
39. getRANTr introducing
41. BUGS BECAUSE JAVASCRIPT
42. 37,000,000,000 thousands millions billions ones I’ve helped fix JavaScript Bugs {Track:js} JavaScript Error Monitoring
43. github.com / toddhgardner / getRANTR getRANTr
44. Backbone.SOMETHING.extend({ // all our stuff is here });
45. The fewest number of concepts possible Code Review
46. QA Identified Bug: User cannot delete a rant from their timeline. Think twice, rant once. 1
47. KILL IT! 1 AHHHHHHH!!!!
48. Your Turn 1 Exercise 1
49. Logical Bug • Event PreventDefault • Function context 1
50. 1 Concepts: • “Keystone” Users • DOM Inspector • Async Callstacks
51. 2 User Identified Bug: Rant text remembered after deleted. Is it paranoia if “they” are actually after you?
52. KILL IT! 2 AHHHHHHH!!!!
53. Your Turn 2 Exercise 2
54. Logical Bug • Empty String • Falsy 2
55. 2 Concepts: • Application (Storage) Explorer • Breaking Execution
56. 3 Monitoring Identified Bug: Server reporting lots of 400 Requests. Bad Request? I’ll request what I want.
58. 3 AJAX Error POST 400 Bad Request /api/rants/ User Click <button type=“submit”> User Input <textarea name=“rant” id=“rant_text”> 0 characters
59. KILL IT! 3 AHHHHHHH!!!!
60. Your Turn 3 Exercise 3
61. Data Bug • User-Form Validation 3
62. 3 Concepts: • Network Inspector • Response Previews • JavaScript Debugger
63. 4 Monitoring Identified Bug: Singular user generating lots of errors Sucks to be them
64. Cannot read ’substr’ of null 4
65. KILL IT! 4 AHHHHHHH!!!!
66. Your Turn 4 Exercise 4
67. Data Bug • Invalid datatypes from server • Safety-checking data 4
68. 4 Concepts: • Network Inspector • Response Previews • JavaScript Debugger
69. AGENDA 1. About JavaScript 2. How to fix Bugs 3. Fix Some Bugs 4. Fix More Bugs 5. Design for Debuggability with Todd H Gardner @toddhgardner
71. Are you ready to play?
72. Math.max() C: NaN What will the following JavaScript code return? 1 D: 10e25678 A: Infinity B: -Infinity
73. 1 Called with no arguments, Math.max() returns the smallest number in JavaScript. Math.max() C: NaN D: 10e25678 A: Infinity B: -Infinity
74. (function foo(a, b) {}).length C: 2 What will the following JavaScript code return? 2 D: 21 A: undefined B: 0
75. 2 Function.prototype.length returns the number of arguments specified in the function definition. (function foo(a, b) {}).length C: 2 D: 21 A: undefined B: 0
76. +"42" C: “43” What will the following JavaScript code return? 3 D: NaN A: 42 B: 43
77. 3 'The "+" operator is not preceded by a String, so it is considered arithmetic and attempts to coerce the following value into a Number. The gets evaluated as "0 + 42". +"42" C: “43” D: NaN A: 42 B: 43
78. '' - '' C: <Error> What will the following JavaScript code return? 4 D: NaN A: '' B: ''
79. 4 '' - '' C: <Error> D: NaN A: '' B: '' The "-" operator is always arithmetic, so both items are coerced into Numbers. They cannot be interpreted, and result in NaN.
80. !!"" C: true 5 D: false A: “” B: <Error> JavaScript's Number type includes the concepts of positive and negative Infinity.
81. !!"" C: true What will the following JavaScript code return? 5 D: false A: “” B: <Error>
82. WINNER
83. AGENDA 1. About JavaScript 2. How to fix Bugs 3. Fix Some Bugs 4. Fix More Bugs 5. Design for Debuggability with Todd H Gardner @toddhgardner
84. 5 Developer Identified Bug: Unexpectedly high memory usage. You’ve got 16GB! What else are you going to do with it?
85. KILL IT! 5 AHHHHHHH!!!!
86. Your Turn 5 Exercise 5
87. Memory Bug • Unreleased Objects • Orphaned DOM Trees 5
88. 5 Concepts: • Profiler • Timeline
89. 6 User Identified Bug: Sometimes slow to load the page. Like you have something better to do?
90. KILL IT! 6 AHHHHHHH!!!!
91. Your Turn 6 Exercise 6
92. Performance Bug • Blocking Assets • Uncompressed Assets 6
93. 6 Concepts: • Timeline • Network Preview
94. Monitoring Identified Bug: form.submit is not a function on signup Who would signup for this stupid service anyway? 7
96. KILL IT! 7 AHHHHHHH!!!!
97. Your Turn 7 Exercise 7
98. 3rd-Party Bug • Uncontrolled Changes 7
99. 7 Concepts: • External Risk • DOM Inconsistency
100. 8 Monitoring Identified Bug: “analytics is not defined” Sounds like a PEBKAC to me. Send them an id-10-t cable. “$ is not defined”
102. KILL IT! 8 AHHHHHHH!!!!
103. Your Turn 8 Exercise 8
104. Network/Proxy Bug • Poor networks • Active blocking 8
105. 8 Concepts: • Load Checking • Simulating Networks • Charles/Fiddler Proxy
106. AGENDA 1. About JavaScript 2. How to fix Bugs 3. Fix Some Bugs 4. Fix More Bugs 5. Design for Debuggability with Todd H Gardner @toddhgardner
107. The web is the most hostile software engineering environment imaginable -- Douglas Crockford “
108. Identify Isolate Resolve Prevent Design for Debuggability
109. Identify Isolate Resolve Prevent • Development • Testing • Monitoring • User Reports cheaper, better, faster
110. Identify Isolate Resolve Prevent Monitoring {Track:js} JavaScript Error Monitoring elastic
111. Identify Isolate Resolve Prevent setTimeout(function() { if (!HAS_LOADED_CONDITION) { trackError('slow load'); } }, 10000); Instrument
112. Simplicity Identify Isolate Resolve Prevent
113. Duplication Abstraction Identify Isolate Resolve Prevent
114. Rule of 3 Identify Isolate Resolve Prevent
115. DOM Identify Isolate Resolve Prevent Network Browser API Application Code
116. Identify Isolate Resolve Prevent Gary Bernhardt Destroy All Software
117. Design for Test (hardware) Identify Isolate Resolve Prevent
118. Debug Mode http://myapp.com?debug Identify Isolate Resolve Prevent
119. Identify Isolate Resolve Prevent Tools {Track:js}
120. Identify Isolate Resolve Prevent Lower the Risk of Change
121. Identify Isolate Resolve Prevent • Regression Tests • Update Process • Do Nothing Think
122. Identify Isolate Resolve Prevent Bug Count as a proxy for Design Quality
123. Identify Isolate Resolve Prevent The Doer- thinger The Enterprise- Ready Cylinder The all- powerful cloud Widgetizer Requests Generic Architecture
124. Identify Isolate Resolve Prevent The Doer- thinger The Enterprise- Ready Cylinder The all- powerful cloud Widgetizer Requests Generic Architecture 51 2 7 0 Bug Count
125. Identify Isolate Resolve Prevent Design for Debuggability
126. AGENDA 1. About JavaScript 2. How to fix Bugs 3. Fix Some Bugs 4. Fix More Bugs 5. Design for Debuggability with Todd H Gardner @toddhgardner
127. {Track:js} JavaScript Error Monitoring
128. {Track:js} JavaScript Error Monitoring
129. TrackJS.com more info and a free 30 day trial
130. SQUASHING JavaScript Bugs with Todd H Gardner @toddhgardner