Inside WebTools Pro

Inside WebTools Pro

By 

As Web pages continually grow in complexity, Web developers/designers need to check the many aspects of the Web pages they create. In the past, one only needed to check a page in different browsers to see how they were displayed, and perhaps perform a bit of validation. These are still important steps but there are many more things to be checked, such as page load times, color depth, meta tags, events on the page and more.

For those of us that use Firefox, there are a large assortment of "extensions" to perform these checks and validations. In fact, new ones are added on an almost weekly basis.

There are now several addons/plugins for Internet Explorer (IE) as well. One of those is WebTools Pro.

The Features

When installed, the software adds a button to the IE toolbar. When accessed, a compact, vertical menu bar is displayed in the upper corner of the screen. It's separate from the browser and can be dragged around the screen to another location.

The menu bar has six main sections, and additional sub-sections. Many of the sections will print a report (a copy of the detailed popup screen, neatly formatted). These can be very valuable for reference and archives. In addition, if any changes are made while using the menu bar, the page can be refreshed and re-printed.

Upon opening the menu bar, the "Page Info" section is displayed. Here you can gather information on the document, such as document title, creation date, protocol, size, total image size, load times at several different connection rates, screen size, color depth, the page's color palette, the HTML as it is parsed by the browser and meta tags. You can select a portion of the page and its code will be revealed in a separate window. In addition, changes can be made to the text in the selected portion and an updated page can be viewed. (It doesn't actually change the page, just what's displayed in the browser. To return the page to its original state, just refresh the browser window.) All of the images displayed on the page can be listed, along with all the links, scripts, forms and style sheets.

The DOM (Document Object Model) can be displayed in a tree format. Every item of the page's DOM is displayed and includes a link for detailed information from the Microsoft Web site. Another tab (DOM Watch) allows you to inspect individual elements and, if desired, make changes that are then reflected in the current page. In addition, you can inspect different aspects of the page's JavaScript (objects, strings, events), including CSS, as well as the node tree and embedded objects.

The "Page X-Ray" tab offers a skeletal view of the page, including image, table, cell, div, span borders, comments, hidden blocks, fields and characters. An advanced button obtains further details on each HTML element on the page.

A "Change Page" tab allows you to make changes to the page to see how things will display, e.g., remove/hide images, display text only, toggle CSS and zoom in/out. It's interesting to see how the page can be viewed with those things turned off.

The "Find" tab provides several unique features to provide some background about the Web page and its server. You can mark certain text, highlight all the links or show all the anchors of the page. You can do a Google search or check words in the online "Urban Dictionary." You can do a whois search of the owner of the site, check the page in the Wayback Machine at archive.org, or check the Alexa stats for the Web site.

There are also tabs for validation, reference materials on CSS, HTML, DNS reports and a reference tab for checking keywords.

System Requirements and Pricing

The toolbar requires Internet Explorer 5 or higher (Windows only). You can test out the program with the trial version (though some of the features aren't available - but it has no time limit). A single user license is $29.50 and includes a 30-day money back guarantee.

Conclusion

All in all, the WebTools Pro toolbar can an asset to any Web developer/designer, if you use IE. The software works quickly and is easy to use. If you're not sure what each section offers, the WebTools Web site offers an easy-to-follow explanation of each item in the package. Also listed on the site are the options that aren't included in the trial (unlicensed) version.

 

URL: