Understanding browser-based developer tools
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
- CSS
- Extensions
- Network traffic interface
Internet Explorer
- JavaScript debugging interface
- Network traffic interface
Opera
- Displays grid lines when highlighting HTML elements
- Storage panel for cookies, local and session information
- CSS
Safari
- Convenient user agent switching
- Storage panel for cookies, local and session information
- CSS
Chrome
- 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.
Choose the language
Posts by date










