DebugBar for Internet Explorer

Location: BlogsAll BlogsReviews    
Posted by: mamlin 12/9/2008 8:16 AM

FireFox users have a wealth of free browser addons that really help make the browser a strong development and debugging tool.  Unfortunately those nifty FireFox addons aren't always helpful when a page renders incorrectly in IE.  What to do?  Well, use an IE addon, of course!  A worthy (and free) addon for IE is the DebugBar from Core Services...
 

Browser Addons
Normally I'm against installing too many IE browser addons beyond the ubiquitous Adobe PDF Reader and MacroMedia Flash addons.  I'm especially irritated by the majority of "toolbar" offerings.  Yahoo! Toolbar, Google Toolbar and all the like are easy to find and install but can sometimes be more trouble than they're worth.  Many toolbars can get in the way of browsing by shear virtue of being installed -- they may slow things down, cause errors, introduce Adware and pose security risks.  Fortunately there ARE some toolbars that are worth having around, especially for developers.  The IE Developer Toolbar and IE Fiddler PowerToy (also available as a standalone application) are two good examples.  For this post, though, we're going to look at a free IE addon called DebugBar.
 

DebugBar
In terms of features, DebugBar is very similar to the IE Developer Toolbar.  DebugBar's layout and use is a bit different and, in many cases, better than the IE Dev bar.  The complete feature set is too large to cover in a single blog post but I'll highlight four of the more useful features offered.
  

DOM View (default view)
The first view you see in DebugBar is the DOM view (DOM = Document Object Model). This view allows you to select a page element and see the element's HTML as well as it's placement within the HTML for the entire page.  You can browse all page elements within the page through a tree view.  To select an element, simply drag-and-drop the "target" icon from the DebugBar menu area onto the web page element.  Screenshot #1 shows an example of selecting a TABLE cell element (TD) in a page from the DotNetNuke.com forums:



SCREENSHOT #1 (click to open full size image)

We can see in Scrrenshot #1 that the upper panel of the DebugBar shows our selected TD (the TD containing the text "Today @ 12:25 AM") and its position within the overall DOM using a treeview.  The lower panel shows the actual HTML that defines the TD as well as the inner HTML contained within the TD's opening and closing tags.  Compared to using "View Source", the DOM browser is a handier way to inspect page code and verify that rendered HTML matches expectations.  This is particularly useful for tracking down empty page elements that cause unexpected gaps and spaces in the rendered page.
 

Target Tool:  Style Inspector
You can target a page element and DebugBar will show you all the style declarations affecting that element.  What's more, you'll be told what linked CSS files the declaraions come from.  Ok, no big deal - IE Dev bar does the same thing.  Debug bar, though, will also give you inheritance information.  DebugBar also provides a consolidated, formatted and color-coded view of the relevant style definitions as shown in Screenshot #2:



SCREENSHOT #2 (click to open full size image)

Looking at the full size image, we can see that the STYLE tab is selected and we see three style rules displayed.  The first two rules are defined in the skin.css file (we're even given the complete path to the file) and the last rule comes from the default.css file from the "_default" directory within our "Portals" directory.

You can immediately see how nice it is to see all relevant CSS rules in one place as well as where each of those rules were defined.  This makes tracking down CSS-related issues a breeze.
 

Target Tool: Layout Diagram
The next tab we'll look at is the "Layout" tab.  This is pretty simple:  you get a visual diagram of layout properties for whatever page element you currently have "targeted".  You can see layout values at a glance instead of looking through CSS code for attributes such as "padding", "margin", "border", "top", "left", etc.  Screenshot #3 shows the Layout view:


 

SCREENSHOT #3 (click to open full size image)

Looking at the Layout view, we see that the selected element has a defined width of 387 and a height of 132.  There is no border, no TOP or LEFT (offset values), no margins, etc.  Note that this is the SAME ELEMENT selected from Screenshot #1.  You can see from Screenshot #1 that there are quite a few CSS rules being applied to this element.  The Layout view gives us an easy way to filter down to CSS rules pertaining to element placement without wading through every style definition.
 

Script Browser and JavaScript Console
Ah, JavaScript.  How I love and sometimes loathe thee.  More and more developer tools are supporting JavaScript these days, providing improved features for both coding and debugging.  There is still a lot of room for improvement, and to this end, DebugBar offers a step in the right direction.  The Script view provides a list of every JavaScript function available to the current webpage.  That is, every function from every linked library or defined inline on the page, whether the function has been called by the page or not.  Screenshot #4 shows the Script view:



SCREENSHOT #4 (click to open full size image)

In Screenshot #4 we see the Script view with a list of JavaScript functions that have been loaded for the current page.  For this example I've selected (in the top panel) a function "spm_fixUnit".  We see the code for that function in the center panel of the DebugBar.  The bottom panel provides a JavaScript console.  In this example I've used the console to execute a JavaScript command:  I set an ALERT box with the results of calling the "spm_fixUnit" function with a text value of "50".  The result of that call is shown in the popup window.  DebugBar not only gives us an easy way to see all JavaScript funcitons loaded for a page, but also the code for each function and a console to let us try things out in real time on the active webpage.
  

Other Features
There are a number of other simple-but-helpful tools contained within DebugBar.  Most of these tools are freely available in other addons but having all of the tools together prevents you from having to install multiple addons.  A few examples:

  • Window resizer.  
    Use this to resize your browser window to common screen resolutions.  This is a fast and easy way to see what your webpage looks like at different screen resolutions without actually changing YOUR resolution or resorting to using two different monitors or systems.
     
  • Color picker.  
    Highlight a page element, get its color value and copy the hex color value to the clipbaord in a single step.
     
  • Highlight in page.  
    Highlight all instances of an entered word or phrase in the current page.

 

More Info and Where To Download
If you've never used a developer-oriented toolbar before, the free DebugBar is a great place to start.  You can read more about it and download a free copy here:  http://www.debugbar.com

The IE Developer Toolbar (Beta 3) offers many of the same DebugBar features but with a different interface.  Note that many features from the IE Dev bar will be integrated into the Internet Explorer 8 browser.  IE6 and IE7 users can get those features now via the Dev bar. 

Read about and download the free IE Dev bar (beta 3) here:  
http://blogs.msdn.com/ie/archive/2007/01/09/ie-developer-toolbar-beta-3-now-available.aspx

Read about the dveloper tools integrated into IE8 here:  
http://blogs.msdn.com/ie/archive/2008/03/07/improved-productivity-through-internet-explorer-8-developer-tools.aspx

The Fiddler PowerToy can be had in a standalone version (Windows application) here:  http://www.fiddlertool.com/fiddler/

The standalone version of Fiddler is more useful than the browser plugin since you can use it with any browser or web-aware application.

 

 

 
Permalink |  Trackback
Comments (2)   Add Comment
Re: Skin Size changes    By Diane on 2/27/2009 10:48 AM
In my site settings I have never changed the default css in the Stylesheet Editor but I noticed it only has the skin size listed SkinFixedWidth { width:950px; } This is the only item in the style sheet Editor. When you display my website all of the pages get streched out based on the size if the monitor. Wide screen displays really distort the items. Is there a way to keep every page standard. If I was to do the "Restore Default Style Sheet" What would get changed on my website? I need to keep all of my screens the same size. <br>Thank you<br>
Re: DebugBar for Internet Explorer    By mamlin on 2/27/2009 10:55 AM
Diane- Whether your skin is dynamic-resizing (stretches) or fixed (does not stretch) is determined by the structure and styling of the particular skin. The CSS class you mentioned ("SkinFixedWidth") in your portal's stylesheet editor may or may not apply to your current skin at all. Have a look at ADMIN->SITE SETTINGS->APPEARANCE->PORTAL SKIN and tell me the name of the skin you currently have selected for your portal? If it is one of the default skins then I may be able to tell you more. Also, what version of DNN are you running?

Your name:
Title:
Comment:
Security Code
Enter the code shown above in the box below
Add Comment   Cancel 
You are here:  
 
>> Back to the top of the blog list...

 
        account   advanced   blog   click   cloud   code   content   create   data   different   events   example   feature   file   files   free   function   good   google   just   line   list   module   modules   need   option   page   pages   query   results   role   roles   script   search   select   settings   simple   site   skin   solution   step   tags   terms   time   user   users   value   version   want  
Minimize Google AJAX Search
 
Search ES:  
This is an example of a Google AJAX Search with asynchronous search execution for two searches.  See our blog series, 'Add Google AJAX Search to your DNN skin' for info and sample code.
  
     
Minimize Get the T-Shirt
 
Shirts by Eguana Solutions
(Be cool like us!)
  
     
Minimize Most-Commented Blogs
 
 
     

Minimize Looking for more info?
 

There are tons of helpful
posts from Eguana Solutions 
on the DotNetNuke.com forums.  
 
Click HERE to see our posts.

  
     
Minimize Modules for Sale
 

Looking for Eguana's modules? 
We're still working on them!  

Until ours are ready to dazzle and
amaze, you'll have to make do with
the thousands of modules already
available on SnowCovered.

  
     
Minimize Favorite Modules
 

There are many great DNN modules.
A few we highly recommend are:
 
Dynamic Registration
Total control over the user signup process.  Create custom forms, execute your own SQL, use the integrated payment processing features to assign user roles, validate USERNAMEs via AJAX and much more.  Very cool.
 
URL Master
Change to friendly URLs that really ARE friendly.  Add keywords into your page URLs for better SEO.  Create 301 redirects for individual pages.  Force visitors (and search bots) to a single domain (i.e., make everyone use the "www" version of your site's URL or vice versa).  One of the single best upgrades for any DNN site.
 
Document Exchange 5 (DMX5)
Drag-and-drop from Windows Explorer directly into the DMX file manager!  File versioning, file and folder moderation, extend user permissions down to the file level (for user groups and even for individual users).  Infinite file and file info presentation options via custom display templates.  Store files locally or remotely via UNC (i.e., can securely store files somewhere besides your web server).  Much more.
 
XMOD by DNNDev
Rock-solid form module for data collection.  From simple feedback / email forms to complex, multi-part tabbed forms.  XMOD is different from other form modules because XMOD does not create a new database table for every new form definition -- an important feature if you plan to create dozens or hundreds of forms over the life of your DNN instance!  Excellent support from the developer and an active community around this module.
 
If you desire your form module to create a new DB table for each new form definition, a great alternative to XMOD is the Dynamic Forms module from DataSprings.  Dynamic Forms offers direct DB access beyond that found in XMOD as well as an easy drag-and-drop form builder option to help you get up and running very quickly.

  
     

Login