There are a ton of HTML DOM inspectors out there. I mean, a lot of them. They're helpful as hell when you're in a pinch and you can't figure out what the DOM is doing. I've used all kinds, from FireFox add on's to IE gadgets, to custom ones... But for the last couple of years I seem to have stuck with one that just seems to work for all of my needs. Its the Slayer Office Mouse Over DOM Inspector - MODI. Its simple, clean and very lightweight.

How It Works

Here's what you do... go to this page: MODI Help Page

Right click on the "Bookmark this link for MODIv2". This screen shot is in FireFox. Internet Explorer will warn you that its not safe to book mark these type of items, but just click Ok because this one is safe.

Then go visit a web site where you want to view the DOM. For example: www.codeplex.com. Once at the site, click your book marks and click the MODI book mark as shown below:

You will now see the Mouse Over Dom Inspector action. Move your mouse around and you'll see the parent elements, the classes each element inherits, etc. It will look something like this: (click for larger image)

The text that is circled in red is the element that we are inspecting. The details of that element are present in the MODI box (blue box). Move your mouse around the screen and you will see that MODI gives you the information about the DOM element that your mouse is currently over.

If MODI is over the element you're interested in inspecting, just click and drag the top of it and you can put it anywhere on the screen.

Conclusion

The best part about this DOM inspector is that I don't have to install it on anything on my machine. If I'm on a clients machine or on a server - using the browser - and I need to inspect the DOM, I can hit the MODI web page and then run the bookmark and I'm off into the DOM.

Simple, yet effective.

Unfortunately I don't have time to go through and figure out why the Always Visible control wont work with a user control. Although I assume it has something to do with the HTML DOM. Some relationship in there is probably hard coded or assumed.

Here's what I was trying to do:

I want to have an always visible control that had some items in it (lets say a bunch of links). I wanted that to be in a user control. I wanted that user control to be the "always visible" control. So I set the TargetID to the user control and ... NO DICE. Doesn't work. I get a cannot load behavior ID or something like that. Its a JavaScript error, and I could figure it out if I had time, but unfortunately the project I'm on doesn't permit.

I even attempted to get around this by putting all of the ASP.NET AJAX into a user control and then add the user control to the page. NOPE, didn't work.

Solution

This is kind of a hacky solution, but it works. You can get this to work by putting all of your controls into a user control. Then wrap your user control in a panel. Like so:

<ajaxToolkit:AlwaysVisibleControlExtender
    ID="avce" runat="server"
    VerticalSide="bottom"
    TargetControlID="scrollingPanel"
    VerticalOffset="10"
    HorizontalSide="Right"
    HorizontalOffset="10"
    ScrollEffectDuration=".1" />
<asp:Panel runat="server" ID="scrollingPanel">
    <uc1:MyUserControl ID="myUc" runat="server"  />
</asp:Panel>

This will allow you to still use a user control, but in my opinion, its kind of hacky. If and when I find time to work around this I'll post an update. If anyone else knows of a fix, please let me know.