Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,164,116 members, 7,856,462 topics. Date: Monday, 10 June 2024 at 08:01 PM

Internet Explorer Developer Toolbar - Webmasters - Nairaland

Nairaland Forum / Science/Technology / Webmasters / Internet Explorer Developer Toolbar (949 Views)

Steps On How To Add A Wibiya Toolbar To Your Blog/website / Addthis Toolbar (new) / Create Free Toolbar To Your Site (2) (3) (4)

(1) (Reply)

Internet Explorer Developer Toolbar by Usiola(m): 8:38am On May 24, 2008
Have you ever tried out the internet explorer web developer toolbar?
If not, you need to. It is simply superb as it saves web developers a lot of stress.
the features can be applied to whatever web page is on the main browser window. It troubleshoots layout issues, fine-tune css, analyse the page's DOM and validate your work.

It is also very resourceful for beginners, it's a perfect learning aid.
For professionals, the tool with deliver the code for one element (or more) at a time, the viewer need not be overwhelmed by scanning through pages and pages of code to find that coded sweet spot.

How Will This Help Me?

FILE: The only option here is Undo All, which will disable your selections. Since you can turn on several features at a time, this is a convenient reset device.

FIND: This option allows you to locate a code block by clicking on a particular section of the displayed Web page or by searching for an element by type, class, id, or name.
When I build a Web site, I assign an id to at least each parent element and a class to every element. It is much easier to do this from the start. Doing so, however, leads to many names to keep in mind.

If an element is not behaving as you expect, click on it and check to be sure that the necessary class has been assigned to it. Expand the toolbar to see the particulars about that element.

DISABLE: Straight forward, this option allows to you turn off Script, Popup Blocker, or All CSS.

VIEW: With the View feature, you can analyze source:

DOM by Page
DOM by Element
DOM by Element + Styles
Original (all page source code).
You also can view:

Class and ID Information
Link Paths
Link Report
Tab Indexes
Access Keys
CSS Selector Matches
Source code is formatted with indents and syntax color code for easy review.

When invoked, Viewing Class and Id Information, Link Paths, Tab Indexes, and Access Keys appear as highlighted blocks on the displayed Web page in your browser. You can show one or more at a time; each appears in a different color for easier differentiation. Hover over the highlighted reference point to read the detail in tool tip.

Expand the toolbar area, by dragging the resize bar upward, to see the guts and the glory for things as the DOM information. Reports, such as CSS Selector Matches, will open in a popup window, while Link Report will open in your default Web editor as an XML file. This is useful for sitemap creation.

OUTLINE: The Outline feature is chocked full of troubleshooting goodness, and is one of the go-to features. No more setting an element border in your stylesheet -- only to have to undo -- to debug layout issues. From the Outline menu, select an element to be outlined, and it will be so. Choose from preset menu options or add your own element with a color of your choice. As with other toolbar features, color-coding is used to differentiate the element types, and you can show as many or as few at once as you would like.

The tool is perfect for sorting out DIV issues, and especially useful when working with floated elements that can give you puzzling results. Internet Explorer Developer Toolbar is worth the download just for this handy tool.

IMAGES: This feature tells you everything that you want to know about the images on the viewed page:

Disable Images
Show Image Dimensions
Show Image File Size
Show Image Path
View Alt Text
View Image Report
I find the quick reference of image size particularly convenient.

The Alt Text viewing is a great overview of how well you have incorporated keywords into your alt attributes. You are incorporating keywords in your alt attributes, right?

The View Image Report option generates an XML file listing all the images on the page.

CACHE: The Cache feature is sexier than you might think. It includes the following handy options:

Always Refresh From Server
Clear Browser Cache
Clear Browser Cache For This Domain
Disable Cookies
Disable Session Cookies
Clear Cookies For Domain
View Cookie Information
Love the many options here, especially Always Refresh From Server - the most accurate way to view your revisions. The selective cache clearing gives the developer control over the domain, while leaving other open sites intact.

TOOLS: There are a few options here that warrant a couple more layers of lip balm, namely Show Color Picker and Show Ruler.

So, there you are loitering around Treehugger.com when you realize that their green is exactly the green you want for your new Web site. No worries. Faster than you can pick your nose, you can pick the color (identified by both RGB and hex code values) using the eyedropper. You can even copy it for pasting into your stylesheet or Photoshop color selector.

Show Ruler is a great tool for determining absolute positioning values, for example. Perhaps you have just started laying out your page and you have the masthead in place. You want to position your next element from the top, but how many pixels would you need? Just whip out your Show Ruler option and map the distance. This option has several other components, each of which can be color-coded so that you can easily use them in multiples:

Snap to X/Y Axis
Snap to Element
Hide Tick Marks
Hide Endpoints
The Tools feature also offers browser window Resize with preset values as well as a custom option. Admittedly, this option does not seem to work well. But, hello, Color Picker!

VALIDATE: No surprise what this feature offers. The menu options link off to known validators and include:

HTML, CSS, Feeds, Links, Local HTML, Local CSS, Multiple Validators

It is free from microsoft. Click here to download yours now
Re: Internet Explorer Developer Toolbar by yawatide(f): 8:46pm On May 28, 2008
i am so hooked with firebug and the mozilla web developer toolkit that I don't think i will look at the IE version. Besides, with mozilla's, the web developer toolkit has an inbuilt IE engine which means that I can launch IE all within FireFox and not even have to launch IE at all.

woohoo!

(1) (Reply)

Any Availaible Info On This Web Host? / Please Urgent Help Here Php / Java Script Needed For Wapsite

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 22
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.