Built-in browser developer tools are reviewed and particular development requirements each meets are noted.  

A screwdriver is just a screwdriver until you are handed a screw, then the type of screwdriver becomes much more important. There may be arguments over which head is "the best" but the truth is that each one has their strengths and weaknesses. By limiting yourself to one type, you may leave yourself ill prepared for certain situations. The same holds true for web development tools. 

Chances are that if you have ever been involved in web development, you have used Firebug. Years ago, Firebug was essentially your only option for troubleshooting JavaScript, HTML, CSS, network, etc. issues. We are lucky to now have many options, each bringing their own strengths and weaknesses.

Internet Explorer, Opera, Safari and Chrome all ship with built-in developer tools and each one takes their own approach to common problems. Here are a few of my favourite features from each browser's developer tools.

Firebug

Firebug
  • CSS
  • Extensions
  • Network traffic interface

Internet Explorer

IE screencap

  • JavaScript debugging interface
  • Network traffic interface

Opera

Opera screencap
  • Displays grid lines when highlighting HTML elements
  • Storage panel for cookies, local and session information
  • CSS

Safari

Safari screencap
  • Convenient user agent switching
  • Storage panel for cookies, local and session information
  • CSS

Chrome

Chrome screencap
  • Resources display
  • CSS

Carry a big toolbox

Everyone is bound to have their own preferences; however it never hurts to have more tools in your toolbox. I highly recommend that you try a different browser the next time you attempt to troubleshoot a web issue. You never know, you might find something you like.

comments powered by Disqus