Web Developer Toolbar

From Zen Cart(tm) Wiki
Jump to: navigation, search

The Web Developer Toolbar is a toolbar that can be installed into the Firefox or Mozilla web browsers (there is also the Web Accessibility Toolbar that can be installed into IE) which contains a number of tools that allow you to analyse your web pages. It can be found at: http://chrispederick.com/work/webdeveloper/ or https://addons.mozilla.org/extensions/moreinfo.php?id=60


http://chrispederick.com/images/work/webdeveloper/screenshots/toolbar.png


There is documentation of all the functions of the toolbar. Of most use to Zen Carters are probably:

Identify CSS of an element

From the menu choose Outline > Outline Current Element. Roll your mouse over the page item that you want to find out the CSS rule for. All the CSS rules that apply to this element are shown in the browser status bar (at the bottom of the browser). The rule at the end of the list should be the one that overrides all the others.

View page structure

The Web Developer Toolbar has a number of functions to show the structure of the page. For example:

  • Outline > Tables - will outline all the tables in the page
  • Outline > Block Level Elements - will outline all the paragraphs, divs and list items in the page, along with all the other block level elements.
  • Outline > Show Custom Elements - will outline any HTML tag you want to highlight, in any colour you want. Choose different colours to show different elements.

Validators

The Web Developer Toolbar provides easy access to a number of validation services, including HTML validators, CSS validators, link checkers and page size/speed report (all in the Tools menu).