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.

IE8 and the Internet Explorer Developer Toolbar

When I read today in an email from Microsoft that IE8 was at RC1 status, I thought I’d give it another try.  (I’d downloaded an early beta and it got in the way of me getting things done.)  Once I’d installed IE8, rebooted, and launched it, much to my chagrin I was informed that the Internet Explorer Developer Toolbar was incompatible with IE8.  This wasn’t going to do at all.  I use the IEDT constantly to check my CSS, pick apart the DOM, grab color codes, etc.  I can’t work without it!  Was I doomed to use IE7 forever?

A few deeps breaths and a little searching and I landed right back on the IEDT download page, which told me this:

The Developer Toolbar is not compatible with Internet Explorer 8.  Please use the developer tools included with Internet Explorer 8.  Press F12 or click the ‘Developer Tools’ entry in the Tools menu to begin using the tool.  Click here for more information on IE8 Developer Tools.

Well this was a horse of a different color!  Now the IEDT capabilities are baked right into IE.  From the looks of it, there’s more capability as well. My old favorites are still there (Select Element by Click, Show Color Picker, Outline Table Cells, etc.) and there’s some more as well.  One obvious improvement is the the left window now can show the HTML, CSS, and Script separately, nicely colored for easy deciphering.  There’s also something called the Profiler which lets you capture what’s going on with scripts running so that you can optimize things.

I’ll post more once I’ve used the new Developer Tools a while, but it’s worth a look.  Oh, and I’m guessing that IE8 may have some other new capabilities, too.

Internet Explorer Developer Toolbar Options Are All Greyed Out

Here’s one that I’ve run into several times, and it always takes me too long to remember how to fix it.  So, you’ve installed the handy dandy Internet Explorer Developer Toolbar (one of the Swiss Army knives for Web developers) on a new machine and when you open it, all of the drop down options are greyed out: you can’t actually *do* anything!

Here’s the simple solution: in IE6 or IE7, choose Tools/Internet Options…/Advanced tab/under Browsing, make sure that "Enable third party browser extensions (requires restart)" is checked.  Restart your browser, and you’re back in business!

SharePoint 2007 (MOSS) Branding CSS Tricks

Having done branding (meaning applying custom CSS to change colors, fonts, etc.) to quite a few MOSS Site Collections, I wanted to offer a few tips and tricks to keep things clean and easy to maintain.  I’ve mentioned some of these tips before, but I wanted to get them all into one post so that they could be more useful.

  • Never edit default.master; take a copy and name it something logical, like myportal.master.  You might need default.master again, and once you customize it, you are out of luck.
  • Edit your myportal.master as you need to in SharePoint Designer.  I usually limit these edits to images that I want on every site in the Site Collection and changes to Web Part Zones that should apply across the board.
  • Attach a custom CSS file to your master page.  I store this custom CSS in the Style Library folder and I name it the same as my master page, e.g, myportal.css.  Storing it in the Style Library folder means that it will be backed up with the rest of the Site Collection.  (You have set up daily backups of your Site Collection, right?!?!?)
  • Definitely, definitely, definitely install the Internet Explorer Developer Toolbar.  This invaluable tool does many things, but most importantly for this exercise, you can use the Find / Select Element By Click option to figure out what CSS classes you want to override.
  • Only add classes and elements into the custom CSS that you are using to override the default.  If you copy and paste from core.css (the default CSS file) using Designer, you will get the entire class’s definition.  This will make your custom CSS much bigger than it should be and more confusing to maintain.  Here’s an example…If you copy from core.css, you might have:

    .ms-globalbreadcrumb {
        font-size: 8pt;
        text-align: right;
        background-color: #FFFFFF;
        padding: 2px 10px 2px 5px;
    }

    If you only want to change the background color, then you should have:

    .ms-globalbreadcrumb {
        background-color: #FFFFFF;
    }

    since this is the only thing that you are overriding.

  • Be sure that you only include each class once in your custom CSS.  If classes exist more than once it will cause you problems because you will probably change the first one and then the second one will override your override!
  • Try to keep the CSS classes in an order that generally goes from the top left of the page to the bottom right, just like the way you read a page.  It makes finding things easier and is worth the little bit of extra effort it takes.
  • Comments are good!
  • Don’t forget to check in a major version of your master page and approve it, and check in your custom CSS (no need to approve here).  If you don’t, you will see all of your changes, but everyone else will be asking you why you haven’t changed anything!

 

Technorati tags: , , , ,