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

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
19. XKCD.com
20. getRANTr introducing
21. github.com / toddhgardner / getRANTR getRANTr
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.
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