Today I looked through my collection of links and realized I have enough resources pooled up to put together a decent little post on browser devtools. In case you’re not familiar, development tools ship with each web browser, enabling us to analyze and debug our increasingly complex websites and apps. From finding a background color to profiling frame rate issues, browser devtools bring sanity to the world of frontend development.
Discover (Chrome) DevTools
Put together by Google and Code School, Discover DevTools takes you from zero to master using Chrome DevTools. It’s a series of 17 videos with over 75 challenges for you to complete along the way. Although the course is Chrome-specific, other browsers’ tools are similar or identical in many cases, and the real takeaway is the ability to use these tools regardless of how the buttons are laid out in a given browser.
Secrets of the Browser Developer Tools
Secrets of the Browser Developer Tools provides bite-size tips for all browsers’ development tools. There are enough that you’ll probably learn something new just by skimming. They’re broken up into various categories, and each tip is accompanied by a list of platforms where the feature can be found. This fantastic resource is brought to you by @AndiSmith and he welcomes contributions.
DevTools can do THAT?
The last link is a set of performance-oriented slides from Ilya Grigorik detailing some of the finer points within Chrome DevTools. He highlights not only particular settings but how to configure them in order to easily test for different situations (e.g. cold/warm cache). Also included is a quick walkthrough explaining network waterfalls, the life of a request as visualized in DevTools, options for exporting and processing HAR files (a JSON format for storing network waterfalls), and overviews (plus examples) of Timeline and Profiles tabs, which help you debug rendering and memory issues.
Chrome DevTools Revolutions 2013
Update 2013-11-13: Since I published this, another awesome HTML5 Rocks tutorial has been posted showing some of the latest features of Chrome DevTools, including Sass source maps, remote debugging, and some sick tools to help you debug rendering performance. Eat it up 😉
Browsers want your feedback!
Although they have a ton of features, browser makers always want to hear from YOU, the one in the trenches. Most browsers have a dedicated developer relations team to ensure that the tools stay up to date and sensible for the hard-working people of the web. Here are their twitter accounts:
Making the web a better place to teach, learn, and advocate starts here...
When you subscribe to our newsletter!