New Chrome Dev Tool Functions that will blow your mind
summary
Chrome DevTools now embeds a bunch of practical features: device frame captures screenshots with phone artwork and virtual keyboard, network overrides serves saved local files in place of network responses so production fixes can be trialed live, quick source opens network resources inline, workspace maps compiled files to original sources letting DevTools act like an editor, the performance monitor graphs DOM nodes listeners layouts in real time, and Node.js attaches with --inspect[=break] so server code debugs inside DevTools and it works.
AI-written summary · about
chapters (10)
- 0:00Start
- 2:57override your network resource with a file on your disk
- 4:10set up the overrides
- 4:33serve this resource from your disk instead of network
- 5:14set breakpoints
- 6:42use dev tools as your entire ide
- 7:45drop in some background colors
- 8:25you can add new files
- 9:08show performance monitor
- 9:56keep track of the health of your application
