If you're like most Web developers, when you were first learning HTML, you probably spent a great deal of your time
playing around with your browser. The fact that you could simply do a "View Source" and see how an interesting
web page was implemented was one of the things that helped HTML catch on so quickly. This "code sharing"
is undoubtably one of the reasons the Web was able to grow as quickly as it did.
Unfortunately, these days it's not so easy to take a look at the magic going on behind the scenes of the average web page.
With the emphasis on usability and appearance, the previously simple HTML has become incresingly difficult to read and these days
most web pages are made up of a combination of several files and use often use as much CSS and client-side script as they
do HTML. Using "View Source" simply doesn't cut it anymore. Luckily Microsoft has realized this fact
and is building a tool to help developers analyze these increasingly complex web documents. It's called the Internet Explorer Developer Toolbar.
In this article I'll give you a quick introduction to this powerful new tool and examine some of it's most useful
features.
Download and Installation
As I write this, the latest version of the toolbar is the Internet Explorer Developer Toolbar Beta 3. As with all
pre-release software, it may contain bugs and you shouldn't expect any official support from Microsoft. I've been
using it on Windows XP Pro with IE 6 and haven't run into any problems, but that doesn't mean that you won't.
You can download the toolbar from the following link:
Immediately resize the browser window to a new resolution.
Selectively clear the browser cache and saved cookies. Choose from all objects or those associated with a given domain.
Choose direct links to W3C specification references, the Internet Explorer team weblog (blog), and other resources.
Display a fully featured design ruler to help accurately align and measure objects on your pages.
Find the style rules used to set specific style values on an element.
View the formatted and syntax colored source of HTML and CSS.
The Developer Toolbar can be pinned to the Internet Explorer
browser window or floated separately.
This Beta 3 version of the toolbar
contains functionality and stability enhancements over previous versions,
including:
Style Tracer: Right mouse click on a style value for an element and select Style Tracer to find the style rule that is effecting that value.
CSS Selector Matches: View a report of all style rules set and how many times they are used on the current page.
View Source: View the formatted and syntax colored source of the original page, currently rendered page, element or element with the styles that are effecting it.
You'll need at least Windows 2000 and IE 6, but I assume that's not an issue for most developers these days.
Installation went off without a problem for me. It's about as simple as possible although you still need to
agree to the license agreement and click "Next" about half a dozen times before you're through.
After installation was complete I still needed to manually add the toolbar's button to IE's toolbar.
In IE 6, you do this by right clicking on the toolbar and choosing "Customize...". That brings up
the "Customize Toolbar" dialog box which should have the "IE Developer Toolbar" button
available to be added to the toolbar.
In IE 7, the process is similar, but the names have changed. After right clicking on IE's toolbar you
choose "Customize Command Bar -> Add or Remove Components..." in order to get to the
"Customize Toolbar" screen.
After adding the button to the toolbar, IE's toolbar should now have an icon like the one shown below.
The Main Window
Clicking the icon discussed above brings up the toolbar's main window. By default, the window is docked in
the bottom half of IE and looks something like this.
If you prefer, you can click the icon in the upper right corner to detatch the window from IE altogether.
The heart of the program is the DOM Explorer which lets you drill down into a page's HTML and examine the
different attributes and styles related to the objects on the page. So instead of wading through
tons of HTML, you simply find the item in the page hierarchy and the toolbar display its properties for you.
But what if you can't find the element of interest in the hierarchical tree? No problem... the toolbar
let's you select a page element simply by clicking on it and then finds it for you.
While the DOM Explorer is the heart and soul of the program, it also includes tons of other useful tools.
I won't go into detail on all of them, but here are some quick highlights.
It shows image information, including dimensions, size, and path:
It allows you to resize your browser window to simulate other screen resolutions:
It shows outlines around things like tables, DIVs, and images to indicate where those elements are:
It lets you manage page caching and cookies for debugging purposes:
It has a ruler to let you easily determine how big objects are:
Finally, it even provides a validation menu to help you validate your HTML, CSS, feeds, and links.
While none of the tools are revolutionary, having them all available in one simple package is
great. The thing that amazes me the most is that the whole download is only like 500 KB... especially
when you consider that most software ships on DVD these days because CDs don't hold enough!
Conclusion
While it may not quite be ready for everyone to use, if you're not afraid of the pre-release status
you can download the Internet Explorer Developer Toolbar Beta 3 today. As I mentioned earlier, I haven't
run into any problems using it and even if I had, unless they were pretty severe I'm not sure I'd want
to give it up! Simply put, it's a free tool that no Web developer should be without.
While the .NET Framework made building ASP.NET applications easier then it had ever been in the past, .NET 2.0 builds on that foundation in order to take things to the next level. This article shows you to how to construct an N-Tier ASP.NET 2.0 Web application by leveraging the new features of ASP.NET 2.0 and SQL Server 2005.
[Read This Article][Top]
With the release of ASP.NET 2.0, Microsoft has greatly increased the power of ASP.NET by introducing a suite of new features and functionalities. As part of this release, ASP.NET 2.0 also comes with a host of new special files and folders that are meant to be used to implement a specific functionality. This article examines these new files and folders in detail and provides examples that demonstrate how to utilize them to create ASP.NET 2.0 applications.
[Read This Article][Top]
Alex Homer continues his detailed look at the major changes to the DataSet class. In this part, he looks at two features that allow developers to work with data in a more structured and efficient way when using the DataSet with a SQL Server 2005 database server.
[Read This Article][Top]
Alex Homer continues his detailed look at the major changes to the DataSet class. In this part, he looks at two features that allow developers to work with data in a more structured and efficient way when using the DataSet with a SQL Server 2005 database server. [Read This Article][Top]
In this article, Alex Homer looks at the changes between the version 1.x and version 2.0 DataSet and their associated classes, showing you how you can take advantage of the new features to improve your applications' capabilities and performance. [Read This Article][Top]
In this article, Alex Homer looks at the changes between the version 1.x and version 2.0 DataSet and their associated classes, showing you how you can take advantage of the new features to improve your applications' capabilities and performance. [Read This Article][Top]
In ASP.NET 2.0 and Visual Studio 2005, you can quickly program custom authentication pages with the provided Membership Login controls. In this article, Dina Fleet Berry examines the steps involved in using the Login control with a custom SQL Server membership database.
[Read This Article][Top]
In this article, Thiru Thangarathinam examines .NET 2.0's new ClickOnce deployment technology that is designed to ease deployment of Windows forms applications. This new technology not only provides an easy application installation mechanism, it also eases deployment of upgrades to existing applications. [Read This Article][Top]
With ASP.NET 2.0, Microsoft has made great strides in increasing developer productivity and has made implementing previously complex solutions relatively easy. Where this version of ASP.NET really shines, however, is in its new administrative tools that allow developers to spend less time managing the configuration of the servers and software and more time developing great code.
[Read This Article][Top]
Thiru Thangarathinam introduces ASP.NET 2.0's new TreeView control which provides a seamless way to consume and display information from hierarchical data sources. The article discusses this new control in depth and explains how to use this feature rich control in your ASP.NET applications. [Read This Article][Top]
Mailing List
Want to receive email when the next article is published? Just Click Here to sign up.
