jens.hatlak.de / About me    
Atari   Mozilla / Mozilla dualboot  
Dreamweaver Manual     Building Mozilla  
Acronyms     Installing Mozilla  
    Bookmark Indicator  
Diese Seite in deutsch Diese Seite
in deutsch
    Custom Buttons  
  MailNews Status Icons  

Mozilla

Surfing Made Fun and Web Development Made Easy

Mozilla logo It all began at the end of the last millennium, when the first executable version of a certain browser appeared on the net which had its seeds in the plan to let go the old Netscape 4.x sources and restart at zero. A wise decision.
I do not know exactly since when I am a part of it but I guess it was around M16 (about the middle of 2000). At that time, the Mozilla releases were called milestones and named accordingly. Some time later, 0.6 released which Netscape based their version 6 upon. Even then the Mozilla developers knew why they prefixed the version number with a zero, but Netscape seemed not to care. Correspondingly crushing were the reviews of the commercial spin-off, and certain sites like MozillaQuest received a boost only because of that.

Well, today it looks different. We are writing a one in front of the point and can decide freely: suite or slim single application? Just as you like.

What is So Great About Mozilla? - My Top 10

  1. Outstanding web development tools: JavaScript Debugger, DOM Inspector
  2. Not as vulnerable to viruses & co. as IE/Outlook
  3. Free of charge, yet powerful.
  4. Tabbed browsing. OK, Opera was first, but MultiZilla is better! *g*
  5. Find As You Type, popup blocking
  6. Extensibility (XPIs, extension community -> MozDev), adaptability (many configuration options) and feature richness
  7. Standards. Whether it may be the W3C or RFCs or... Everywhere. Consequently. And cross platform.
  8. Open Source nature: release often, release many (nightlies, CVS); open, top-organized bug handling (Bugzilla); independent and worldwide / uniting :-)
  9. Themes (open as well: anyone can make own or modify existing ones)
  10. All in one, wherever you are. At home, at university, ...
    If you do not agree here you might want to try Firefox & co. ;-)

The Suite: Tools Included

Mozilla offers some really neat tools for web developers, out of the box. With extensions you can furthermore upgrade what the suite does not offer itself (all the more with the single applications).

JavaScript Console

With this tool, you will instantly see whether an extension (see below) is broken or something is not working the way it should do (remember: extensions are a mix of XUL, CSS, RDF and JavaScript). Often you can also help the respective author by sending the relevant output. But even if you are experimenting with JavaScript yourself the tool will be of great help to you: Here you will find any error messages like undefined or nonexistent variables and objects, syntax errors and so on. In combination with the other tools, you will mostly be able to narrow down the cause of the error in no time.

DOM Inspector

First of all, we should clarify what is actually meant by the DOM: A representation of the structure of a document, may it be XML based like RDF or XHTML or pure HTML. The DOM Inspector displays this structure in the form of a tree (DOM tree), just like the Windows Explorer does for the file system, for example.

By default the DOM Inspector shows DOM nodes (nodes within the tree, ultimately elements), on the left the ones of the document currently displayed and on the right the data of the element selected on the left.

Using "File/Inspect a Window" you can select a window in order to further inspect it (side note: you can as well select the DOM Inspector itself, of course!). This way, however, you can only access the window, i.e. the chrome/XUL. Whereas if you want to inspect the page viewed inside a window, you will have to specify its URL. Here you can take advantage of MultiZilla (see below) which offers a button that loads the very page currently displayed into the DOM Inspector. In addition, you can let the document specified show in the so-called browser which will appear at the bottom if you select "View/Browser".

If you finally selected a document you can start: With an HTML document, you will find the <HTML> tag directly under the document root (#document). If you however select for example the <BODY> tag you should see a blinking border around the whole document for a short period of time — this feature can be very useful because it also works the other way round, allowing you to click elements within the document using the icon in the upper left (the one with the little arrow), making them blink and be selected in the DOM tree.

Furthermore, both on the left and on the right there are little switch buttons which have the form of a stylized list. If you for example switch to "JavaScript Object" you will find all properties of the object under target. This is a good way to find style properties or available functions and even execute little tests (richt click, "Evaluate JavaScript..."). If you switch to "Computed Style", you can watch the CSS properties of the element that is actually in the document, i.e. including all Mozilla-specific details. Accordingly, you can see under "CSS Style Rules" which style rules from which files (those beginning with resource://gre are internal ones) apply to an element.

JavaScript Debugger (Venkman)

Probably the most powerful tool at all. Maybe you are already accustomed to being able to use the debugger from "real" programming languages and corresponding IDEs. With Internet Explorer or other browsers alone you don not have that for JavaScript, but with Mozilla you do. The basic handling consists of a few steps:

  1. Click the red X — three dots appear.
  2. Reload the page to be debugged or switch to the "Open Windows" tab and apply "Set as Evaluation Object" to the window/tab with the scripts to be debugged
  3. Use "Step over" until the browser window gets usable again
  4. Do what you want to debug (e.g. fire events)
  5. Set (future) breakpoints (first column in the Source Code window: directly in front of the line numbers) and restart the script
  6. Now you can watch local variables, set own watches, ...

See also:

Find As You Type (f.k.a. Type Ahead Find)

Described quickly but much more valuable: By simple typing you can search every document (even source code). By default, links are searched for only; if you however start the search with a slash (/), the whole text is searched. The default behavior can be changed at "Edit/Preferences/Advanced/Keyboard Navigation".

Selection Source

Explaining the View Selection Source functionality is just as easy as Find As You Type. Just select a range within the current document and choose "View Selection Source" in the context menu.

You should however know that Selection Source works based upon the DOM Mozilla generates internally after parsing the source code and not, like the normal View Source, based upon the actual source code of the page.

Extensions

Mozilla already includes neat features out of the box, but what makes it real fun are extensions in form of so called XPIs, cross platform installation archives.
Talking of extensions for Mozilla, one site has to be mentioned in the same breath: MozDev.

I copied the images shown at the side of the following extensions from the respective MozDev project pages; the rights remain with the respective copyright holders, of course.

MultiZilla

MultiZilla with OSXZilla
theme

If you never heard of MultiZilla, you missed something for sure. MultiZilla was the first tabbed browsing extension for the Mozilla suite and probably the best until now. Mozilla itself copied much of it but never all of it (see below). I myself have been using it since version 1.2.x, I think, and been a loyal fan ever since. Lead developer HJ (funny coincidence: my initials, just the other way round!) is working hard, making MultiZilla one of the most active MozDev projects so far.

For each possible action you can separately define whether it should be executed in a new tab/window or not. Beyond that there is much which makes working pleasenter: Tabs already closed can be reopened, existing ones can be exported to new windows or reloaded automatically after an adjustable amount of time. Whole tab sessions can be saved and restored. Permissions like JavaScript, images, plugins, ... can be set individually for each tab. Tabs can be activated automatically, again after an adjustable amount of time, by simply hovering over it with the mouse. Colored icons on the tabs optionally show the loading state of the page. The middle mouse button can be configured for closing or reopening tabs and of course for opening links in new tabs, loading in the background if desired.

The buttons not only of the MultiZilla toolbar itself but also of Mozilla can be (de)activated individually. The bookmarks menus can be equipped with additional options like opening whole folders in new tabs without them being groupmarks. Even deleting sensitive data upon quitting is possible. All windows opened with JavaScript can be redirected into tabs. An icon can be displayed on the respective tab when popups are blocked.

In addition, the integrated QuickPrefs menu allows for quick access to preferences like cookies, images, popups, JavaScript, browser and referrer spoofing, cache and proxy settings and sensitive data. Furthermore, all extensions installed can be de(activated) individually.

Googlebox

Googlebox

The Google Toolbar is to Internet Explorer what the Googlebox is to MultiZilla. Embedded in the MultiZilla toolbar, you can also directky use the other Google searches like the one for images or news. The buttons created for the search results are especially useful since they allow for directly searching for them in the respective documents.

MozBlog

MozBlog

Blogging is fun! I have a weblog as well. With MozBlog, you can even blog directly out of Mozilla. It does not only support Blogger but also other popular weblog services like Movable Type.

Download Status Bar

Download Status Bar

Honestly, Mozilla's download manager is better than these nerving single download windows, yet still bothering if you want to download many small things like images. That is where the Download Status Bar produces relief: After deactivating the display of the download manager, further downloads will only appear at the bottom of the window — properly lined up and with nice context menus.

Web Developer Toolbar

Web Developer
Toolbar

Everything the web developer needs: Deactivating and bordering parts of the document like styles, images, form elements, tables, ..., showing information, validation possibilities, resizing and many more.

MozEx

How often do you painfully miss the functionality of your favorite editor (for me this is SciTE). That does not have to be with Mozilla: With MozEx you can define your own editors for certain links, textareas or the source code view. You can also setup other programs, for example for downloads, news, mail or telnet, ... and even define your own schemes like myscheme://.

Live HTTP Headers

An essential web development tool. Actually so important that it should be part of the suite by default: With this extensions you can listen to and log the HTTP communication between client (Mozilla) and server. This way you will quickly see if for example the wrong MIME type or which additional HTTP headers have been sent (especially of interest in connection with skripting languages like PHP and redirects).

XUL Console

Just a small helper tool for plagued XUL friends: With this you can easily modify the extracted content of a JAR from an XPI and directly see the result. The search for errors is quite significantly simplified; especially since Mozilla's chrome is directly accessible.

AdBlock

The advertisement blocker par excellence. Adblock does for the rest what Mozilla itself does for popups. Whether it be a plain image, IFRAME or Flash: By specifying wildcards in the image and IFRAME addresses you can block whole servers and subdirectories. Simple, yet effective: right click, "AdBlock xy" and quickly shortening the address — and the whole shebang is gone.

mozTrayBiff (f.k.a. Mozilla Free Desktop Integration)

mozTrayBiff

Ilya achieved with his project what the Mozilla project has not accomplished itself in many years (and even after a long time for Windows): A tray icon for new mails (biff). And not only for KDE but also for XFce and IceWM. Small restriction: Mozilla has to use the GTK 2 toolkit, which is not (yet) the case with normal nightlies from mozilla.org. By the way, that was the major reason for me to switch the toolkit for building Mozilla. ;-)

CuteMenus

CuteMenus

What should I say? Colored icons everywhere!

Session Saver

MultiZilla can save tab sessions as well. But crash recovery...

Other extensions:

Currently broken with regard to suite nightlies:

Old extensions, unfortunately not tended any more:

Status unknown:

Links

 

Valid HTML 4.0!
Jens Hatlak
April 25, 2005