Home arrow Design Usability arrow Page 3 - Browsers as Test Platforms
DESIGN USABILITY

Browsers as Test Platforms


In this article we will take a look at browsers from a developer’s point of view. When developing for the Web, it is inevitable that we need to debug and test our work. How easy or how hard is it to find the problems causing errors, and how easy is it to replicate certain environment changes? Once we identify the steps we need to take to test properly, we will see if there is a chance to extend the browser to make these steps a lot easier.

Author Info:
By: Chris Heilmann
Rating: 5 stars5 stars5 stars5 stars5 stars / 8
December 08, 2004
TABLE OF CONTENTS:
  1. · Browsers as Test Platforms
  2. · Microsoft Internet Explorer 6
  3. · Mozilla Firefox 1.0
  4. · Opera 7.5
  5. · Summary
  6. · Browser wishlist

print this article
SEARCH DEVARTICLES

Browsers as Test Platforms - Mozilla Firefox 1.0
(Page 3 of 6 )

The browser that has undergone many name changes (Phoenix, Firebird, FireFox) is the standalone browser of the Mozilla Suite - the same engine as newer Netscape browsers. When Netscape 4.x got axed, the gecko engine emerged, driving the first ill-fated versions of Netscape 6 and 6.1 and getting better with each version. The Gecko engine is very true to the W3C standards, but also quite forgiving when it comes to invalid markup, albeit not as much as IE. If we want to check for W3C valid CSS and markup, Firefox is a good bet.

Debugging the HTML

Firefox does not open the HTML in Textpad or Notepad, but has an internal source viewer with syntax highlighting. This makes it a bit easier to track HTML errors. Firefox also has an extensive page information tool, which can be accessed by right-clicking the page and choosing “page info” from the context menu. Alternatively we can select Tools -> Page Info from the top menu.

Browsers as Test Platforms

To see why our FORM doesn’t send off any data, we can choose the “Forms” tab and see that we forgot to enter a form. If the page had a FORM, its fields would have been listed in the fields section.

To trace back the missing closing tag of the table, we can use the DOM inspector, which can be reached via Tools->DOM Inspector or Ctrl+Shift+I.

Browsers as Test Platforms

This very powerful tool allows us to inspect the structure of the HTML document. In our case TABLE should appear directly after P following the DIV with the class “multicolthree”. As Firefox had to close the element on its own to be able to render it, it moved it to the end of the parent element - indicating that we forgot to close it.

The DOM Inspector is a wonderful way to trace back changes and bugs in markup. You can even use it to change and delete parts of the current cached document, which comes in handy when you want to print a page that has no real print version. Simply go to the DOM Inspector and highlight and delete all the unwanted elements before you print the page.

Debugging Javascript

Firefox does not pop up any error message when it encounters a script problem but adds it to the Javascript Console in the Tools menu:

Browsers as Test Platforms

We can clearly see the mistake we made and its location in the correct file. We couldn't ask for more.

Debugging CSS

The page information dialogue mentioned above also tells us which rendering mode the browser is in.

Browsers as Test Platforms

In addition to this information, the DOM Inspector also shows you which classes and IDs are applied to the different elements, which makes it rather easy to spot faults like IDs being used more than once.

Testing for accessibility

To check our site without scripting support we have to select Tools -> Options and select the “Web Features” option.

Browsers as Test Platforms

Here we can easily turn images and scripting on and off. On the advanced menu we can also disallow scripts to perform certain changes like change attributes of the current window or change images.

If we want to turn off styles, we can do so via the View-> Page Style dialogue.

Browsers as Test Platforms

Resizing the font can be done via the Text Size dialogue in the same menu or by pressing Ctrl and + respectively Ctrl and -. We can reset the font size to the default by pressing Ctrl and 0.


blog comments powered by Disqus
DESIGN USABILITY ARTICLES

- Responsive Web Design: More Than Just a Buzz...
- Add New Website Features to Please Users
- Gzip Components in Action
- Configuring Gzip Components
- Gzip Components
- Create Great JavaScript and CSS Menus Simply
- Design Principles that Shape a Web Site
- Creating Aqua Style Images
- Easy as A,B,C – dynamic A to Z indexes
- EasyChart: a Usability Teaching Tool to Demo...
- Building Friendly Pop-up Windows
- Back to School: Design Usability
- Using HTML_QuickForm To Manage Web Forms, Pa...
- Using HTML_QuickForm To Manage Web Forms, Pa...
- More Website Knick Knack

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials