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.
For more content like this from Charlie Arehart:Need more help with problems?
- Signup to get his blog posts by email:
- Follow his blog RSS feed
- View the rest of his blog posts
- View his blog posts on the Adobe CF portal
- If you may prefer direct help, rather than digging around here/elsewhere or via comments, he can help via his online consulting services
- See that page for more on how he can help a) over the web, safely and securely, b) usually very quickly, c) teaching you along the way, and d) with satisfaction guaranteed
http://www.cfobjecti...
I'll be covering almost two dozen semi-advanced to advanced tips for getting the most out of these built-in tools. :)
I have to agree with Lola LB though, the few times I've used Safari's inspector I've been very pleased with it. Safari is a pretty good browser these days.