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.”

   …

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.

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.

• Introduction
• Getting Started
• Debugging HTML and CSS
  • Inspecting HTML Elements
  • Inspecting CSS Properties
  • Editing Sources On-The-Fly
  • Saving Changes
• Debugging JScript
  • Starting and Stopping the Debugger
  • Controlling Execution
  • Inspecting Variables
  • Inspecting Call Stack
  • Using the Debugger Console
• Profiling JScript Performances
  • Starting and Stopping Profiler
  • Viewing Data
  • Profiling Multiple Sessions and Exporting Data
• Searching for Content
• Viewing Sources
• Outlining Elements on Screen
• Working with Images
• Controlling Cache and Cookies
• Using Power Tools
• Validating Your Sources
• Testing in Different Browser and Document Modes
  • Testing Browser Modes
  • Testing Document Modes
• Using Keyboard Shortcuts
• Referencing Interface Commands
• Related Topics

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!

Technorati tags: Internet Explorer Developer Toolbar

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: SharePoint, MOSS, branding, CSS, master page

SharePoint 2007 Master Pages Trick

Many times when you are implementing a SharePoint 2007 (MOSS) solution, it turns out that some of the many features that SharePoint provides aren’t needed or wanted.  For instance, you might want to hide the default left-side navigation or the My Site link.  There is a simple trick for doing this.  Rather than removing the placeholder (or its contents) from the master page, simply override the cascading style sheet (CSS) class.  For instance, to turn off the left-side navigation, you would use:

.ms-nav{
display: none;
}

This way, the master page element is still there if you decide later that you would like to turn it back on.

Another plug for one of my favorite Web development tools: the Internet Explorer Developer Toolbar (also called the IE DOM Explorer).  Using this toolbar, you can select a master page element by clicking on it to see which CSS class is being applied to it easily, rather than opening the master page in SharePoint Designer.

Technorati tags: SharePoint, MOSS, CSS, Internet Explorer Developer Toolbar, Master Page

Simple Branding on a SharePoint 2007 Site Collection

Branding can often be an anathema to technical types.  We often think that we can’t do anything with it unless we have a designer working with us.  I proved to myself recently that it’s not actually that complicated.  Here’s how it went.  All of the changes I outline below happened in Microsoft SharePoint Designer 2007 (the successor to Frontpage) or in SharePoint itself; no complicated file system work.

We built a SharePoint 2007 Site Collection (to a normal person, a Web site) for one of our clients.  As we got to the final stages of the implementation, we wanted to apply some simple branding so that the sites wouldn’t just look like SharePoint out of the box.  The client told me which things on the pages should change and what colors and images to use.

I made a copy of default.master in the /_catalogs/masterpage folder.  My rule is to never alter the defaults if it can be avoided; you never know when you might need to revert back.  The only change I needed to make to the master page itself was to replace the Microsoft little people image (as we’ve started calling it) in the upper left of the page with the client-supplied image.

I created a new CSS (Cascading Style Sheet) file in the /_styles folder and attached it to my master page.  As I identified the CSS classes that I wanted to alter, I did a New Style Copy from core.css (the default CSS file for SharePoint) into my CSS file and made the changes there using the Modify Style option.  This made it easy to understand what changes I needed to make; no need to look at the actual CSS code unless I wanted to.  These changes overrode the core.CSS classes.

Identifying the CSS class that you want to change can seem horribly difficult (core.CSS contains hundreds), but my new best friend the trusty Internet Explorer Developer Toolbar makes it easy.  Using Internet Explorer, navigate to the page that has the element that you want to change and open the toolbar. Do a Find/Select Element by Click.  As you move your cursor over the page, the toolbar highlights elements with a blue outline.  Find the element that you want, click on it and look in the Attribute window to see what class is applied to it.

To attach my master page to the sites, I went to the site itself and chose Site Actions/Site Settings/Master Page and changed the Site Master Page (for publishing sites) and System Master Page (for all other sites) to my master page.  Since I wanted this change to affect all of the sites below, I checked both the "Reset all subsites to inherit this Site Master Page setting" and "Reset all subsites to inherit this system master page setting" boxes.

In this particular case, most of the pages had one set of branding rules, and a small subset needed to have a slightly different color scheme.  To do this, I simply made a new copy of my master page and CSS file, made the color changes in the CSS, and attached this new master page to the sites that needed to have the different color scheme as above.

Though it took me three or four hours to work out the details of all of this, now I realize how simple it is.  I could probably do it all in a half hour the next time!  Of course, if the branding is going to be quite complicated, I’m still going to turn to my designer partners; I don’t kid myself in thinking that I understand how to do good design.

Technorati tags: SharePoint, branding, SharePoint Designer, master page, CSS, style sheet

Windows SharePoint Services 2003 “Master Page”

While there’s no real master page concept in Windows SharePoint Services 2003, I’ve found that editing "C:Program FilesCommon FilesMicrosoft Sharedweb server extensions60TEMPLATE1033MPSdefault.aspx" to replace images, resize objects, etc. works much like a master page in SharePoint 2007 would.

Between the default.aspx file and the OWS.CSS file (C:Program FilesCommon FilesMicrosoft Sharedweb server extensions60TEMPLATELAYOUTS1033STYLES), I’m able to manipulate the global look and feel of my WSS site fairly easily.  (But not without the awesome Internet Explorer Developer’s Toolbar!)

UPDATE: My colleague Mauro Cardarelli pointed out, quite correctly, that if you edit files in the file system, then you *MUST* document your changes for disaster recovery.  It’s easy to make it all look nice, but if you don’t remember how to fix it or redo it, whoops.  Bad stuff.

Technorati tags: SharePoint 2003, master page

Using the innerHTML Property

When you use the innerHTML property, you need to be careful.  Take a look at this simplified Javascript sample code:

 

    var new_legend = document.createElement("div");
    new_legend.innerHTML = "<table>";
    new_legend.innerHTML = new_legend.innerHTML + "<tr><td colspan=2 align=center>Legend</td></tr>";

 

    //Add legend entries
    for (var i = 0; i < legend_count; i++) 
    {
         new_legend.innerHTML = new_legend.innerHTML + "<tr><td>something1</td><td>csomething else</td></tr>";
    }

    new_legend.innerHTML = new_legend.innerHTML + "</table>";

 

.NET is very helpful, and makes the first assignment (new_legend.innerHTML = "<table>";) into well-formed HTML.  That is, it adds the "<tbody></table>" tags for you.  Therefore, the rest of the HTML that you build into the innerHTML is not part of the table.  Not what you wanted.

The simple trick around this is to just build up the HTML in a variable and assign it to the innerHTML once your HTML is complete and well-formed, like this:

    var new_legend = document.createElement("div");
    var new_legend_text = "<table>";
    new_legend_text = new_legend_text + "<tr><td colspan=2 align=center>Legend</td></tr>";

 

    //Add legend entries
    for (var i = 0; i < legend_count; i++) 
    {
         new_legend_text = new_legend_text + "<tr><td>something</td><td>something else</td></tr>";
    }

    new_legend_text = new_legend_text + "</table>";

    new_legend.innerHTML = new_legend_text;

 

Note that the Internet Explorer Developer Toolbar I mentioned in a previous post is a great tool to help diagnose this sort of thing because you can look into the DOM live and see what is going on with your assembled HTML and even add or change existing attribute values.

Internet Explorer Developer Toolbar

This falls into the "how have I lived so long without it" category.  If you develop Web pages, download, install, and enjoy.

http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en