I just downloaded and installed the IE Developer Toolbar and am in developer browser heaven. I have previously used the Web Accessibility Toolbar, but I think the developer toolbar is way better. Here are some of my favorite features:

DOM Browser: Browse the entire DOM hierarchy of a page using a tree control, then for individual nodes, view its attributes and also edit them. This last bit is a nice touch. If you’re trying to tweak something so it’s just right…this is perfect. You can make it work and then go fix the source.

View Class and ID Information: This is extremely useful when debugging CSS, especially for DotNetNuke skins. You see an overlay of CSS classes and element ID’s on the page making it easy to visually detect the “cascade” that might be contributing to CSS issues.

Show Ruler: This feature was not what I expected, but once I saw it I loved it. Instead of the usual horizontal and vertical rulers what happens is that your cursor becomes a cross-hair. You can then drag it from one point to another on your browser and it draws a virtual ruler between the two points (and you can create as many of these as you want). You can also click anywhere and find the coordinates of the point.

Definitely a useful toolbar to have if you are a web developer.

The IE7 toolbar has an RSS icon that is ordinarily grayed-out, but lights up when visiting certain web pages.


Clicking the icon displays a list of feeds available on the page. When
you select a feed you see a formatted version of the feed along with
options to subscribe to the feed and change the sort order of items.
Once you subscribe to the feed, it gets added to the “Favorites Center”
which you can open to organize your feeds or view them.

If you are a web developer and have made RSS feeds available on your
web pages, you can make discovery and subscription of these feeds
easier for IE7 users by adding a few elements to your page
that announce the presence of the feeds. Adding
a tag to the page Head with the correct
attributes will do the trick. For example, my blog has the following:

rel=”alternatetype=”application/rss+xmltitle=”My RSS Feedref=”http://blogs.speerio.net/peerio/SyndicationService.asmx/GetRss” /> 

As you can see, this is quite simple; you just have to add the
attributes “rel,” type,” “title,” and “ref”. This is a simple
addition that will instantly make your RSS feeds easier to
consume. 

Sometimes, it is necessary to override stylesheets defined on a page or to add additional stylesheets, perhaps for different media. The script below defines a JS object that allows you to define stylesheets for screen/print for IE/Other browsers. It then adds them to the page dynamically.

In the code below, you can ignore the portion from //BEGIN to //END. The snippet at the end is all that needs to be changed. Se the desired values for “picker.ieScreen,” “picker.iePrint,” “picker.otherScreen,” and “picker.otherPrint” and the code will take care of the rest.

 

© 2012 TechBubble Suffusion theme by Sayontan Sinha