Zimlet Developers Guide:Firefox and Firebug
Zimlet Developers Guide: Firefox and Firebug
Introduction | Getting Started | Dev Environment Setup |
|
Advanced Concepts | API Specifications | Example Zimlets |
Mozilla Firefox Settings
Everytime the browser load zimlets, the zimlet code is cached in the browser. When doing development, you are often changing the zimlet JavaScript code and therefore, do not want the browser to cache. Note: You still want the browser to keep cookies and authtokens.
To accomplish the above, perform the following configuration settings:
On Windows
- Launch Firefox.
- Browse to Tools > Options > Privacy
- Click the "Settings" button in the "Private Data" section.
- Check "Cache".
- Uncheck "Authenticated Sessions".
- Uncheck "Cookies".
- Press "OK".
- Check "Always clear my private data when i close Firefox". This will help in clearing cache whenever we press Refresh.
- Uncheck "Ask me before clearing private data".
- Press "OK".
On MacOS
- Launch Firefox.
- Browse to Firefox > Preferences > Privacy
- Check "Clear history when Firefox closes".
- Click the "Setting" button
- Check "Cache".
- Uncheck "Active Logins".
- Uncheck "Cookies".
- Press "OK".
Getting Firebug
Firebug is a Mozilla Firefox Add-on and is a great JavaScript debugging tool. Download it at [1]
Useful Firebug Utilities
Debugger
One of the most useful utilities in Firebug is the debugger;
statement. Simply write the debugger;
statement anywhere in your zimlet JavaScript code and when reached, execution will halt and open the Firebug script debug window. When in the Firebug debug window, you can step through the code, into and over methods and instruct the code to continue.
Example usage:
com_zimbra_test.prototype.function = function() { var i =0; debugger; // javascript halts at this line doSomethingWith(i); }
Console Logging
Similar to a System.out.println()
in Java, console.log(something)
in Firebug allows you to log to the console window. More information is available at [2].
Example usage:
com_zimbra_test.prototype.function = function() { var i =0; console.log("I want to write something to the console"); // will write this line to the Firebug console doSomethingWith(i); }
Note: ensure that console.log statements are removed prior to deploying your Zimlet. Browsers without a console object (IE, Firefox without Firebug, etc) will throw an error when encountering a console.log() statement and halt execution of the Zimlet.
Network
Firebug allows you to see network traffic between the web client browser and the server. When accessing services from your zimlet, the two common network responses/errors you will see are 403 and 500. In Firebug, you can easily debug errors.
- Error 403 == permission denied; or access it not allowed
- Error 500 == your request is incorrect; i.e.the url or some parameter isnt properly formatted or constructed