DOM Inspectors for Different Browsers

I’ve been using the Internet Explorer Developer Toolbar for years with Internet Explorer 7 and below.  When Internet Explorer 8 came out, it had these tools baked right in and called the Developer Tools.  (You can activate the Developer tools by hitting F12 in IE8.)

But what if you need to peek into the DOM with Safari or Firefox?  Here are the tools for the Windows platform:

Safari

From Safari help:

To examine the resources of a webpage:

  1. Open the website, and then choose Develop > Show Web Inspector. The Web Inspector’s sidebar lists the categories of resources found on the page, such as documents, style sheets, and scripts.

    Note:If the Develop menu does not appear in the menu bar, open Safari preferences, click Advanced, and select “Show Develop menu in menu bar.”

image

Firefox

From the Firebug Web Site:

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
Visit the Firebug website for documentation, screen shots, and discussion forums: http://getfirebug.com

Discovering Internet Explorer 8 Developer Tools

As I mentioned in my last post, Fun With My Blog Stats, the #1 post in my blog stats over the last three months has been IE8 and the Internet Explorer Developer Toolbar.   If you’ve recently upgraded to IE8 and are wondering where the Internet Explorer Developer Toolbar (IEDT) has run off to, it has been replaced by the Developer Tools in IE8.

The IE team had developed the IEDT because of the sheer volume of requests for something which would mirror some of the toolbar capabilities in other browsers such as FireFox.  With IE8, the capabilities are baked right in and there’s no need for a separate add-on.  The definitive article over at MSDN which explains the new Developer Tools in IE8 is entitled Discovering Internet Explorer Developer Tools.

Below, at a high level, are some of the great features available to you with a click of F12, lifted from the TOC of the above article.  Even if you are a long-time user of the IEDT like I am, you ought to read through the article because there are some fantastic new features, and others work even better than in the classic IEDT.  If you’re a Web developer, you owe it to yourself to upgrade to IE8, if only for these great tools.

New for Windows Internet Explorer 8

Every installation of Internet Explorer 8 comes with the Developer Tools. This tool enables Web site developers to quickly debug Microsoft JScript, investigate a behavior specific to Internet Explorer, or iterate rapidly to prototype a new design or try solutions to a problem on-the-fly. This article introduces you to key features of the Developer Tools.