Wait, Chrome DevTools could do THAT?
Your browser is one of the most and best instrumented development platforms - you may just not realize it yet. Of course, you can inspect the source, walk the DOM, fiddle with the CSS, and evaluate and debug your JavaScript, but there is so much more! Granted, there is always room for improvement, but the exciting part is that much of this functionality is also built with the same technology we build our sites: HTML, CSS, JavaScript, and WebSockets. This means we can extend it, leverage it for use cases outside the browser, and much more.
To highlight some of these features, I gave a presentation at Velocity EU a few weeks back: "Wait, Chrome DevTools could do THAT?". To my surprise, it became a runaway hit, aggregating over 100K unique visitors since published, and generating a lot of requests for the video of the talk... See below!
Wait, Chrome Dev Tools could do THAT?
This episode provides a whirlwind tour of how to analyze network performance, rendering and layout pipeline, as well as detecting memory leaks in your JavaScript, and using audits and extensions to build faster apps!
Extending Chrome DevTools for fun and profit...
This episode takes a deep(er) dive into the inner workings of Chrome itself: the debugging protocol, and Audit and Panel extension API's in DevTools, a quick tour of the Chrome's network stack, and chrome://tracing features!
I encourage you to try these tools for yourself by following the links and examples in the presentation: see the slides. Finaly, if you have any other tips, suggestions, or favorite features I've omitted - let me know!
Ilya Grigorik is a web ecosystem engineer, author of High Performance Browser Networking (O'Reilly), and Principal Engineer at Shopify — follow on Twitter.