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.
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:
This mode makes it easy for us to see the structure of the document and recognise the missing FORM and the unclosed TABLE.
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.
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.
This feature is also very handy when debugging layout quirks.
Next: Summary >>
More Design Usability Articles
More By Chris Heilmann
/ 7 
