SXSW 2012: The State of Browser Developer Tools

Brandon Satrom
Telerik

Brendan Eich
Mozilla

Garann Means
Chrome

Mike Tayolor
Opera

Paul Irish
Google

Presentation Description

Your browser is the most important program on your computer and until recently there were no built-in, industrial-strength tools available for debugging web pages. As web apps become more sophisticated, so do the debugging environments. Representatives of the major browsers discuss the similarities (and differences) between the tools and we look at how they address the needs of the 2012 developer: debugging Web Workers, tweaking CSS colors to perfection, remote debugging of mobile devices and all the other functions that make in-browser development as easy as falling off a console.log().

Presentation Notes

Chrome allows you to make changes to the CSS and then save it, or jump back revisions right on the fly. They’ve recently added the ability to disable cache with a toggle. You can do this right from the “Settings” pane of their developer tools window. They’ve also just added breakpoints for Javascript, with the future support for breakpoints in CoffeeScript.

FireFox just added the ability to have a 3D model of the DOM (it’s quite awesome!). It shows you ever element in the DOM as a layer, and you can navigate and view it by dragging around. Right now this is in the Nightly build, and isn’t in the stable release yet.

Opera has a color picker which actually takes a pallet of an entire chunk of an image and allows you to switch the colors of elements on the page to those colors. In their JavaScript stepper you can see what any variable is set to at any given time (I’m pretty sure every other browser already does this). CSS Profiling (Chrome is working on it too) allows you to evaluate your CSS selectors based on how long it takes to render a page with the CSS on the browser, and then you can increase your performance of your page’s DOM. Opera has a very cool feature which allows you to emulate a phone’s version/size of many different phones to see how your website would render on it.2

Internet Explorer (IE10) on Windows 8 has a script console has a concept of “workers” which allows you to pause the page’s execution and look at anything happening at any given point (they looks like IE’s version of breakpoints). Minified JavaScript can easily be cleaned-up/converted to a readable form with a click of a button. If you need to see what CSS applies to any element, and export it to a file all on its own, you can. You can fully emulate IE 6, 7, 8, and 9 right from IE10. I imagine if this is anything like the “Run in X Windows OS” XP released, it probably wont work.

Posted in SXSW 2012.

Leave a Reply

Your email address will not be published. Required fields are marked *