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

Andrii Vandakurov

Blackboxing

Andrii Vandakurov

Andrii VandakurovAndrii Vandakurov

Snippets

Promises

Andrii Vandakurov

http://www.youtube.com/watch?v=-X2cSKTGtKI

What about slow internet connection ?

Throttlingand

Client Hintsto the rescue

Andrii Vandakurov

http://www.youtube.com/watch?v=tMpg3QKdP3w

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

http://www.youtube.com/watch?v=bP2obanRkX4

How to find memory leak ?

Andrii Vandakurov

http://www.youtube.com/watch?v=RT89fbTC-i4

HTTPproxy

Browser ServerHTTP Proxy

Req

Res

Andrii Vandakurov

http://www.youtube.com/watch?v=ckN7zVYCRuc

Server side debugging

Node inspector

Andrii Vandakurov

Javascript everywhere !

Andrii Vandakurov

http://www.youtube.com/watch?v=EtNT3560TvI

What next?

Andrii Vandakurov

Track users behaviour

Inspectlet1. Replay user’s actions2. Check heatmap

Andrii Vandakurov

http://www.youtube.com/watch?v=7xmxY9Ybp0A

1. Record/replay all requests/responses2. Record/replay users interactions

TeaLeaf (IBM)

Andrii Vandakurov

Track everything

http://www.youtube.com/watch?v=LIwVlfk7BmY

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 ?