kharkivjs javascript debugging. know your enemy
TRANSCRIPT
Javascript debuggingknow your enemy
Andrii Vandakurov, front-end developer
eleks
Agenda1. Basics2. Slow internet ? (throttling) 3. Offline/Service Workers4. HTTP proxy (Fiddler/Charles)5. Server side (Node.js)6. Rec user actions/HeatMap7. Rec/replay everything ;)
Andrii Vandakurov
https://goo.gl/7vSTjUVideo demos link
Breakpoints
Andrii Vandakurov
Blackboxing
Andrii Vandakurov
Andrii VandakurovAndrii Vandakurov
Snippets
Promises
Andrii Vandakurov
What about slow internet connection ?
Throttlingand
Client Hintsto the rescue
Andrii Vandakurov
Client Hints (by Google)
<meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Width">
Andrii Vandakurov
Service workers debugging
chrome://inspect/#service-workers
OFFLINE
Andrii VandakurovAndrii Vandakurov
How to find memory leak ?
Andrii Vandakurov
HTTPproxy
Browser ServerHTTP Proxy
Req
Res
Andrii Vandakurov
Server side debugging
Node inspector
Andrii Vandakurov
Javascript everywhere !
Andrii Vandakurov
What next?
Andrii Vandakurov
Track users behaviour
Inspectlet1. Replay user’s actions2. Check heatmap
Andrii Vandakurov
1. Record/replay all requests/responses2. Record/replay users interactions
TeaLeaf (IBM)
Andrii Vandakurov
Track everything
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 ?