This document outlines techniques for debugging JavaScript including breakpoints, blackboxing, promises, handling slow internet connections, service workers, HTTP proxies, server-side debugging in Node.js, tracking user behavior, and recording/replaying requests, responses, and user interactions. The presenter is Andrii Vandakurov and provides demonstrations and helpful links on various debugging tools and techniques.

1. Javascript debugging
know your enemy
Andrii Vandakurov, front-end developer
eleks

2. Agenda
1. Basics
2. Slow internet ? (throttling)
3. Offline/Service Workers
4. HTTP proxy (Fiddler/Charles)
5. Server side (Node.js)
6. Rec user actions/HeatMap
7. Rec/replay everything ;) Andrii Vandakurov

3. https://goo.gl/7vSTjU
Video demos link

4. Breakpoints
Andrii Vandakurov

5. Andrii Vandakurov

6. Blackboxing
Andrii Vandakurov

7. Andrii VandakurovAndrii Vandakurov
Snippets

8. Promises
Andrii Vandakurov

10. What about slow internet connection ?
Throttling
and
Client Hints
to the rescue
Andrii Vandakurov

12. Client Hints (by Google)
<meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Width">
Andrii Vandakurov

13. Service workers debugging
chrome://inspect/#service-workers
OFFLINE
Andrii VandakurovAndrii Vandakurov

15. How to find memory leak ?
Andrii Vandakurov

17. HTTP
proxy
Browser Server
HTTP
Proxy
Req
Res
Andrii Vandakurov

19. Server side
debugging
Node inspector
Andrii Vandakurov

20. Javascript
everywhere !
Andrii Vandakurov

22. What next?
Andrii Vandakurov

23. Track users behaviour
Inspectlet
1. Replay user’s actions
2. Check heatmap
Andrii Vandakurov

25. 1. Record/replay all requests/responses
2. Record/replay users interactions
TeaLeaf (IBM)
Andrii Vandakurov
Track everything

27. Helpful links:
1. Chrome channel ( https://goo.gl/TMMCKf )
2. Client Hints ( https://goo.gl/fFJgi4 )
3. Service workers ( http://goo.gl/Xenyoa )
4. Inspectlet ( http://goo.gl/b3iPRk )
5. TeaLeaf ( http://goo.gl/kRD0xe )
6. Github repo ( https://goo.gl/ukJbhG )
Andrii Vandakurov
QA ?