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

Squashing JavaScript Bugs - ThatConference 2017

Squashing JavaScript Bugs - ThatConference 2017

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

August 08, 2017
Tweet

Transcript

  1. SQUASHING JavaScript Bugs with Todd H Gardner @toddhgardner

  2. AGENDA 1. How to fix Bugs 2. Fix Some Bugs

    with Todd H Gardner @toddhgardner
  3. Identify Isolate Resolve Prevent How To Fix Bugs

  4. Identify Isolate Resolve Prevent • Development • Testing • Monitoring

    • User Reports
  5. Identify Isolate Resolve Prevent • Development • Testing • Monitoring

    • User Reports cheaper, better, faster
  6. • Context Identify Isolate Resolve Prevent - Browser - Page

    - User - Script(s)
  7. • Timeline Identify Isolate Resolve Prevent Complex State Machine -

    API(s) - JS App(s) - DOM - Browser
  8. • Root Cause Identify Isolate Resolve Prevent - Symptoms -

    State
  9. • Context • Timeline • Root Cause Identify Isolate Resolve

    Prevent
  10. Identify Isolate Resolve Prevent Application Code Browser API DOM Network

    Services
  11. Identify Isolate Resolve Prevent Application Code Browser API DOM Network

    Services Your level of Control
  12. Identify Isolate Resolve Prevent “The Right Way” Vs ”The Quick

    Way”
  13. Identify Isolate Resolve Prevent • Regression Tests Test to check

    for the recurrence of a bug
  14. Identify Isolate Resolve Prevent • Process Change - Manual -

    Automated
  15. Identify Isolate Resolve Prevent • Do Nothing Tests and Process

    have cost. Don’t increase them trivially.
  16. Identify Isolate Resolve Prevent • Regression Tests • Process •

    Do Nothing
  17. AGENDA 1. How to fix Bugs 2. Fix Some Bugs

    with Todd H Gardner @toddhgardner
  18. None
  19. XKCD.com

  20. getRANTr introducing

  21. github.com / toddhgardner / getRANTR getRANTr

  22. None
  23. BUGS BECAUSE JAVASCRIPT

  24. {Track:js} JavaScript Error Monitoring

  25. 50,000,000,000 thousands millions billions ones I’ve helped fix JavaScript Bugs

  26. QA Identified Bug: User cannot delete a rant from their

    timeline. Think twice, rant once. 1
  27. 1 KILL IT! AHHHHHHH!!!!

  28. Logical Bug • Event PreventDefault • Function context 1

  29. 1 Concepts: • “Keystone” Users • DOM Inspector • Async

    Callstacks
  30. 2 User Identified Bug: Rant text remembered after deleted. Is

    it paranoia if “they” are actually after you?
  31. 2 KILL IT! AHHHHHHH!!!!

  32. Logical Bug • Empty String • Falsy 2

  33. 2 Concepts: • Application (Storage) Explorer • Breaking Execution

  34. 3 Monitoring Identified Bug: Server reporting lots of 400 Requests.

    Bad Request? I’ll request what I want.
  35. 3

  36. 3 AJAX Error POST 400 Bad Request /api/rants/ User Click

    <button type=“submit”> User Input <textarea name=“rant” id=“rant_text”> 0 characters
  37. 3 KILL IT! AHHHHHHH!!!!

  38. Data Bug • User-Form Validation 3

  39. 3 Concepts: • Network Inspector • Response Previews • JavaScript

    Debugger
  40. 4 Developer Identified Bug: Unexpectedly high memory usage. You’ve got

    16GB! What else are you going to do with it?
  41. 4 KILL IT! AHHHHHHH!!!!

  42. Memory Bug • Unreleased Objects • Orphaned DOM Trees 4

  43. 4 Concepts: • Profiler • Timeline

  44. 5 User Identified Bug: Sometimes slow to load the page.

    Like you have something better to do?
  45. KILL IT! 5 AHHHHHHH!!!!

  46. Performance Bug • Blocking Assets • Uncompressed Assets 5

  47. 5 Concepts: • Timeline • Network Preview

  48. AGENDA 1. How to fix Bugs 2. Fix Some Bugs

    with Todd H Gardner @toddhgardner
  49. {Track:js} JavaScript Error Monitoring

  50. {Track:js} JavaScript Error Monitoring

  51. TrackJS.com more info and a free 30 day trial

  52. Take the full workshop at FrontendMasters.com

  53. SQUASHING JavaScript Bugs with Todd H Gardner @toddhgardner

  54. None