Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Squashing JavaScript Bugs

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

6b5ff9c8a7cb4ae40c4eaa99d2c068fe?s=128

Todd Gardner

June 15, 2017
Tweet

Transcript

  1. SQUASHING JavaScript Bugs with Todd H Gardner @toddhgardner

  2. None
  3. None
  4. None
  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

  7. None
  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
  37. None
  38. XKCD.com

  39. getRANTr introducing

  40. None
  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.
  57. 3

  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
  70. None
  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
  95. 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”
  101. 8

  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