I want to discuss browser stuff, an impulse driven by, you guessed it, Google‘s release of the Chrome Web browser.
Before I discuss Chrome let me digress to talk about Firefox 3. FF3 has been out in full release for a couple of months and to stick with any other browser you would have to be, in my humble opinion, either nontechnical or a committed masochist.
Sure, other browsers have their strengths, but if you want a browser that is fast, mostly standards-based, open source (which is a huge issue), cross platform, extensible and mostly well-behaved, then Firefox is the best, and some might argue, the only choice. But the thing that really sets Firefox 3 apart for us geeks is all the amazing developer add-ons available. If you haven’t checked what’s available in this category let me introduce you to a few of my leetle friends.
First up is the DOM Inspector. If you want to really explore and understand how modern Web pages are built you absolutely need this Firefox add-on.
DOM Inspector can be used to inspect and edit a live Document Object Model. You’ve most likely read about the DOM before but in case you forget (also a digression – that’s three stack pushes so far), it is an object-oriented interface to the structure of an HTML document or XUL application.
You know what an HTML document is but maybe XUL is less familiar, so one more digression (another stack push): XUL is an XML user interface markup language that came out of the Mozilla Project. XUL is a pretty big topic that I don’t have the space to cover here, and as it isn’t a World Wide Web Consortium (W3C) standard and applies only to browsers based on the Gecko rendering engine, we’ll defer the topic for another column. (Stack pop).
The DOM is really important because it allows scripts and other processing systems to understand and manipulate the content of downloaded Web pages. A trivial example of this would be to use, say, JavaScript to dynamically change the color scheme of a page by finding and modifying all HTML elements that define the page background and text colors.
Yet another digression (stack push number four): Check out Greasemonkey, yet another Firefox add-on that allows the manipulation of selected Web pages through the DOM using JavaScript.
Using Greasemonkey you could, if you so desired, change heading styles of every page your browser visits, or you could apply a completely new design to the content of one specific site as rendered by your browser. Greasemonkey is an amazingly cool idea that I’ll cover in depth some day. (Pop)
The DOM is a W3C standard, and the lowest level of implementation, called DOM Level 1, has been a W3C recommendation since 1998 and is now supported by all modern browsers. Unfortunately the same can’t be claimed for the higher levels of the DOM. Wikipedia has a complex and confusing comparison of the DOM implementations and W3C recommendation compliance of the major browser layout engines.
This implementation variability means cross browser scripting that requires DOM access has to be very carefully implemented and, as a consequence there are lots of Web developers with drinking problems. (Pop).
The glory of the DOM Inspector add-on is that it makes it easy to navigate and manipulate the DOM hierarchy of a document loaded into your browser.
DOM Inspector provides a two-paned window, and you can choose different views of the DOM contents in each pane. DOM Inspector keeps the views synchronized so that if, for example, the left pane is displaying the DOM nodes (a hierarchical view of the elements of the DOM), the right pane can show the value of the currently selected node or the JavaScript objects associated with that node. (Pop.)
