Diese Seitein deutsch
| jens.hatlak.de | |
About me | |||
| Atari | Mozilla | |
Mozilla dualboot | ||
| Dreamweaver Manual | Building Mozilla | ||||
| Acronyms | Installing Mozilla | ||||
| Bookmark Indicator | |||||
|
Diese Seite in deutsch |
Custom Buttons | ||||
| MailNews Status Icons | |||||
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.
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).
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.
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.
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:
See also:
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".
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.
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.
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.
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.
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.
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.
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.
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://.
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).
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.
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.
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. ;-)
MultiZilla can save tab sessions as well. But crash recovery...
 |
Jens HatlakApril 25, 2005 |
