Home arrow Design Usability arrow Page 4 - 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 - Opera 7.5
(Page 4 of 6 )

Opera is one of the few remaining commercial browsers (IE is not sold as a standalone product). For years it has been improving, and in the current version it is one of the best CSS compliant browsers, with probably the fastest rendering engine. It still has some issues with DOM and dynamically generated content, but the company is working on it.

Debugging the HTML

Opera shows sources in Textpad, much like IE, but it has a peculiarity that forces you to check the Frame source from the option menu even when there are no frames present.

Browsers as Test Platforms

You can also upload the page directly to the W3C validator.

The real power of Opera, however, is its user mode, which can be activated via View -> Style -> User mode:

Browsers as Test Platforms

This mode makes it easy for us to see the structure of the document and recognise the missing FORM and the unclosed TABLE.

Browsers as Test Platforms

Debugging Javascript

The Javascript debugging console can be found in Opera at Tools -> Consoles -> Javascript console. It tells us clearly where and what the problem is:

Event thread: onload
Error:
name: TypeError
message: Statement on line 10: Expression did not evaluate to a function object: uls[i].parentNode.getElementByTagName
Backtrace:
  Line 10 of linked script
file://localhost/C:/dummyfunctions.js
    (uls[i].parentNode.getElementByTagName("a"))[0].onclick = function ()
{
return false;
}
;
  Line 50 of linked script
file://localhost/C:/dummyfunctions.js
    collapseNav();
  At unknown location
    {event handler trampoline}
Debugging CSS

Opera does not give any indication as to what render mode is enabled. However, its rendering engine is so close to the standard that it is a good browser to test with.

Testing for accessibility

The real power of Opera’s user mode shows itself when you want to test for accessibility (or when you need these options to access a page). It is dead easy to turn off CSS and use high contrast modes. Opera also links all the alternative style sheets available for the page below the options of the user mode.

We can turn off images by selecting the “No images” option from the View -> Images menu, and pressing F12 or selecing Tools -> Quick Preferences will get us to the preference menu, which enables us to toggle Javascript, Plugins, GIF animation and Java.

Browsers as Test Platforms

Unlike the other browsers, Opera not only resizes the font, but the whole page, including graphics, which does make a lot more sense. However, it shows some bugs when zooming complex CSS layouts and re-arranging them. You can zoom the page via View -> Zoom or with the plus and minus keys.

Browsers as Test Platforms

This feature is also very handy when debugging layout quirks.


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