Information and Insights from Sessions at SXSW in Austin, TX

The State of Browser Developer Tools

Posted: March 10th, 2012 | Author: | Filed under: SXSW '12 | Comments Off on The State of Browser Developer Tools

Saturday, March 10 – 9:30AM -10:30AM
Brandon Satrom Developer Evangelist TelerikGarann Means JavaScript EngineerJoe Stagner Sr Program Manager Developer Technologies Mozilla CorporationMike Taylor Web Opener Opera Software
Paul Irish Chrome Developer Advocate Google Inc

Firebug was released in 2006 just viewing the DOM was a big thing at that time.

The Last Year of Developer Tools

Chrome

  • Hit the little cog for development tools.
  • You can view your JS files individually
  • Customize the layout of the tools
  • Spoof user agent
  • Color picker available when adding/changing colors
  • Revision history is created for all changes

Firefox

  • You can see a 3D view of a site with web developer.

Opera

  • Dragonfly (dev tools)
  • Remote debugging allows you to debug your site on other devices. You can send your site to another device via ip address, or it will detect your device on the network.
  • Color picker gives you a lot of detail when selecting colors from an image or screen. It will also give you related colors or workable palettes.
  • CSS Profiling: It shows how the CSS loads on the page visually and allows you to go in and see where things get held up.

Internet Explorer

  • Format Javascript will provide a more visually appealing script (no wall of text) to work with.
  • Browser Mode can do full emulate older versions of the browser inside IE10.

Remote Debugging

Adobe Shadow sends stuff to your mobile device as well as open dev tools.
The new Chrome for Android also provides remote dev tools (connected via USB).

Opera Mobile Emulator will launch a profile for a number of phones to show you what your site/code looks like on that device.