Kharkivjs javascript debugging. know your enemy
Transcript of Kharkivjs javascript debugging. know your enemy
![Page 1: Kharkivjs javascript debugging. know your enemy](https://reader031.fdocuments.us/reader031/viewer/2022021921/58e7a7061a28abc1038b569d/html5/thumbnails/1.jpg)
Javascript debuggingknow your enemy
Andrii Vandakurov, front-end developer
eleks
![Page 2: Kharkivjs javascript debugging. know your enemy](https://reader031.fdocuments.us/reader031/viewer/2022021921/58e7a7061a28abc1038b569d/html5/thumbnails/2.jpg)
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
![Page 3: Kharkivjs javascript debugging. know your enemy](https://reader031.fdocuments.us/reader031/viewer/2022021921/58e7a7061a28abc1038b569d/html5/thumbnails/3.jpg)
https://goo.gl/7vSTjUVideo demos link
![Page 4: Kharkivjs javascript debugging. know your enemy](https://reader031.fdocuments.us/reader031/viewer/2022021921/58e7a7061a28abc1038b569d/html5/thumbnails/4.jpg)
Breakpoints
Andrii Vandakurov
![Page 6: Kharkivjs javascript debugging. know your enemy](https://reader031.fdocuments.us/reader031/viewer/2022021921/58e7a7061a28abc1038b569d/html5/thumbnails/6.jpg)
Blackboxing
Andrii Vandakurov
![Page 7: Kharkivjs javascript debugging. know your enemy](https://reader031.fdocuments.us/reader031/viewer/2022021921/58e7a7061a28abc1038b569d/html5/thumbnails/7.jpg)
Andrii VandakurovAndrii Vandakurov
Snippets
![Page 8: Kharkivjs javascript debugging. know your enemy](https://reader031.fdocuments.us/reader031/viewer/2022021921/58e7a7061a28abc1038b569d/html5/thumbnails/8.jpg)
Promises
Andrii Vandakurov
![Page 10: Kharkivjs javascript debugging. know your enemy](https://reader031.fdocuments.us/reader031/viewer/2022021921/58e7a7061a28abc1038b569d/html5/thumbnails/10.jpg)
What about slow internet connection ?
Throttlingand
Client Hintsto the rescue
Andrii Vandakurov
![Page 12: Kharkivjs javascript debugging. know your enemy](https://reader031.fdocuments.us/reader031/viewer/2022021921/58e7a7061a28abc1038b569d/html5/thumbnails/12.jpg)
Client Hints (by Google)
<meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Width">
Andrii Vandakurov
![Page 13: Kharkivjs javascript debugging. know your enemy](https://reader031.fdocuments.us/reader031/viewer/2022021921/58e7a7061a28abc1038b569d/html5/thumbnails/13.jpg)
Service workers debugging
chrome://inspect/#service-workers
OFFLINE
Andrii VandakurovAndrii Vandakurov
![Page 15: Kharkivjs javascript debugging. know your enemy](https://reader031.fdocuments.us/reader031/viewer/2022021921/58e7a7061a28abc1038b569d/html5/thumbnails/15.jpg)
How to find memory leak ?
Andrii Vandakurov
![Page 17: Kharkivjs javascript debugging. know your enemy](https://reader031.fdocuments.us/reader031/viewer/2022021921/58e7a7061a28abc1038b569d/html5/thumbnails/17.jpg)
HTTPproxy
Browser ServerHTTP Proxy
Req
Res
Andrii Vandakurov
![Page 19: Kharkivjs javascript debugging. know your enemy](https://reader031.fdocuments.us/reader031/viewer/2022021921/58e7a7061a28abc1038b569d/html5/thumbnails/19.jpg)
Server side debugging
Node inspector
Andrii Vandakurov
![Page 20: Kharkivjs javascript debugging. know your enemy](https://reader031.fdocuments.us/reader031/viewer/2022021921/58e7a7061a28abc1038b569d/html5/thumbnails/20.jpg)
Javascript everywhere !
Andrii Vandakurov
![Page 22: Kharkivjs javascript debugging. know your enemy](https://reader031.fdocuments.us/reader031/viewer/2022021921/58e7a7061a28abc1038b569d/html5/thumbnails/22.jpg)
What next?
Andrii Vandakurov
![Page 23: Kharkivjs javascript debugging. know your enemy](https://reader031.fdocuments.us/reader031/viewer/2022021921/58e7a7061a28abc1038b569d/html5/thumbnails/23.jpg)
Track users behaviour
Inspectlet1. Replay user’s actions2. Check heatmap
Andrii Vandakurov
![Page 25: Kharkivjs javascript debugging. know your enemy](https://reader031.fdocuments.us/reader031/viewer/2022021921/58e7a7061a28abc1038b569d/html5/thumbnails/25.jpg)
1. Record/replay all requests/responses2. Record/replay users interactions
TeaLeaf (IBM)
Andrii Vandakurov
Track everything
![Page 27: Kharkivjs javascript debugging. know your enemy](https://reader031.fdocuments.us/reader031/viewer/2022021921/58e7a7061a28abc1038b569d/html5/thumbnails/27.jpg)
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 ?