Need to solve browser problems? Did you know most modern browsers now have built-in developer tools?
Note: This blog post is from 2012. Some content may be outdated--though not necessarily. Same with links and subsequent comments from myself or others. Corrections are welcome, in the comments. And I may revise the content as necessary.When you're trying to understand why something's not working in your browser (page not rendering as expected, feature not working as expected, page content failing to load), it's useful to use of many any available tools which can show you what's going on, whether with respect to the HTML, CSS, or Javascript that may be running, or perhaps the communications between the browser and server.
For years, experienced developers have recommended client-side proxy tools like Firebug, Fiddler, Charles, and such. I list these and many others as a category in my CF411 site listing over 1800 tools and resources for CFers, in the category, HTTP Debugging Proxies/Sniffers/Web Client Test Tool.
I recently updated the list, though, to point out these "built-in" forms of these tools, now available in most browsers. If you may be in a place where you are "not allowed" to install new software (or are simply disinclined), knowing that the browser may have such a valuable tool built-in can be a real discovery, thus this entry.
Here's the content that I've added to that section:
- In Chrome, see the Dev Tools, available under the "Customize and control Google Chrome" icon at the top right (the monkey wrench), then Tools>Developer Tools.
- In Firefox 6 and above, see the "Web Console" feature in the "Web Developer" tools, available under the Tools menu.
- In Internet Explorer, see the Developer Toolbar which is an ad-on for IE 6 and 7, and the f12 Developer Tools that are built into IE 8 and 9 (in the Tools menu).
- In Opera, see the Developer Tools in Opera DragonFly, available in the Edit>Developer Tools menu in Windows, and Tools>Advanced on Mac.
- In Safari, see the "Web Inspector" feature of the Develop menu.
- I welcome additions/corrections/feedback.
The links I've given for each of these often have friendly introductions to using such tools. I can also commend an old but classic discussion of such tools, here.
Have you used these sort of tools? How have they helped you. Are you surprised to learn that the browsers now have such tools built-in? Chime in and share your thoughts. I may do a later blog entry or talk introducing using these tools for some common problems working with CF.
