There are many online tools, web browser extensions, and add-ons to help you evaluate and test web pages. We will be talking about web page validation later, but you can use these tools now to become familiar with such tools and how to integrate them into your web browser.

Most browser-integration tools are browser specific, compared to online tools which sit in web pages, accessible through any browser. Browser-integration tools include extensions, add-ons, and bookmarklets.

How to Add an Extension or Add-on to Your Web Browser

To add an extension or add-on tool to your browser:

• Go to the page or site for your browser’s extensions or add-ons:
  • Add-ons for Firefox
  • Chrome Web Store – Extensions
  • Internet Explorer Browser Extensions
  • Safari Extensions Gallery
  • Extensions – Opera add-ons
• Follow the instructions.

How to Add a Browser Bookmarklet to Your Web Browser

Typically, browser bookmarklets are not browser specific and can be used on any browser supporting JavaScript. Sometimes called "favelets," a bookmarklet is a script that takes action on the page you are viewing. The most common bookmarklets allow you to save a site to your online bookmarks site or share a web page with a social network. Many bookmarklets are tools to help you view the underlying code and technologies of a web page as well as to test and evaluate it.

Browser bookmarklets are stored in your browser bookmark toolbar or collection. To add a bookmarklet to your bookmark toolbar:

1. Click and drag the indicated button or link to your browser toolbar.
2. To activate the bookmarklet, click the button or link on your browser toolbar and follow its instructions.
3. To quit/turn off the bookmarklet, refresh the page or follow the instructions.

Browser Add-ons and Extensions for Evaluating, Inspecting, and Testing Web Pages

• Firebug
• Firefox Web Developer Toolbar
• Google Chrome Developer Tools
• Internet Explorer Web Developer Toolbar

Online Web Testing, Evaluation, and Validation Tools

• The W3C Markup Validation Service
• The W3C CSS Validation Service
• WAVE – Web Accessibility Evaluation Tool
• BuiltWith Technology Lookup
• The HTML5 test – How well does your browser support HTML5?
• Juicy Studio: CSS Analyser
• WDG HTML Validator
• Web Page Analyzer

Validating and Testing for Web Accessibility

As of March 2012, it is federal law that web pages meet federal laws for Equal Access and the Americans With Disabilities Act.

• IDI Web Accessibility Checker : Web Accessibility Checker
• Functional Accessibility Evaluator – University of Iowa
• Dr. Watson
• WAVE – Web Accessibility Evaluation Tool
• Web Accessibility: AccessColor Tool- free online color contrast analyser
• Welcome to the HiSoftware Cynthia Says Portal
• Pink Juice Reports
• HERA – Testing Accessibility with Style

Bookmarklets for Evaluating and Testing Web Pages

• Resizer – Codebomber
• Firebug Lite : Firebug
• Aardvark Firefox Extension
• maki : a free web design mock-up tool for pixel perfect layouts
• slayeroffice – Favelet Suite
• 32 Indispensable Bookmarklets for Web Developers and Designers – Speckyboy Design Magazine
• Favelets For The W3C Markup Validation Service
• Implementing WAVE into web pages, browsers, or other tools
• MRI – inspects CSS selectors on a web page
• XRAY – explores the "bones" of the web page
• Quick Page Accessibility Tester – Accessibility-Checking Favelets – Accessify
• Firefox Resize Bookmarklet: Now With Re-positioning
• Allan Jardine – Reflections – Design
• Wirify – The web as wireframes
• Web Development Bookmarklets Collection

Browser Testing

Browser compatibility doesn’t start and stop with testing to see if your web pages work in Internet Explorer. They must be tested across a variety of browsers as well as web viewing environments such as Web television, mobile, tablets, etc.

• Check Browser Compatibility, Cross Platform Browser Test – Browsershots
• iPad Peek – What does your web page look like on iPad
• IE NetRenderer – Browser Compatibility Check –
• mobiReady – dotMobi compliance & mobileOK checker
• resizeMyBrowser
• Support Details tests yhour browser – Imulus Tech Support Management
• Pingdom Tools
• Browser testing | Adobe BrowserLab

Collection of Lorelle’s Favorite Bookmarks and Bookmarklets for Web Development

I’ve put together a web page with my favorite web design and web development bookmarks and bookmarklets for you to see and use. These have been collected from around the web and are shared for educational purposes only with students of Lorelle VanFossen.

To use these, click and drag the link to your browser toolbar or view the source code and save this list as an html file and use the bookmark import feature of your browser to import the file.