[Looking for Charlie's main web site?]

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?
  • 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
Comments
I use the Web Inspector in Safari quite a bit - it's a great tool.
# Posted By Lola LB | 3/20/12 2:25 PM
One of my sessions at cf.Objective() this year will be covering (pardon the borrowing of the concept, it really fits well!) "Hidden Gems in Browser Tools"

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've tried the Firefox debugger, but I still prefer Firebug. It seems to have more features, but maybe that's just because I haven't used it enough yet.

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.
# Posted By Doug | 3/28/12 10:28 AM
Absolutely love the Chrome Dev tools. I've been using them for several months now, and I hate to think how much harder my job would be without them.
# Posted By Bill Moniz | 4/2/12 6:37 PM
Copyright ©2024 Charlie Arehart
Carehart Logo
BlogCFC was created by Raymond Camden. This blog is running version 5.005.
(Want to validate the html in this page?)

Managed Hosting Services provided by
Managed Dedicated Hosting