Zimlet Developers Guide:Firefox and Firebug

From Zimbra :: Wiki

Jump to: navigation, search
Zdg-6-menu-icon-zimbra.jpg Introduction Zdg-6-menu-icon-green-flag.png Getting Started Zdg-6-menu-icon-terminal.png Dev Environment Setup Zdg-6-menu-icon-gear.png
Developing Zimlets
Proxy Servlet Setup
Firefox and Firebug
Troubleshooting
Zdg-6-menu-icon-advanced.jpg Advanced Concepts Zdg-6-menu-icon-library.jpg API Specifications Zdg-6-menu-icon-checkbox.jpg Example Zimlets


Developer Article

Article Information

This article applies to the following ZCS versions.
  ZCS 8.0 Article  ZCS 8.0
  ZCS 7.0 Article  ZCS 7.0
  ZCS 6.0 Article  ZCS 6.0

Contents

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

  1. Launch Firefox.
  2. Browse to Tools > Options > Privacy
  3. Click the "Settings" button in the "Private Data" section.
  4. Check "Cache".
  5. Uncheck "Authenticated Sessions".
  6. Uncheck "Cookies".
  7. Press "OK".
  8. Check "Always clear my private data when i close Firefox". This will help in clearing cache whenever we press Refresh.
  9. Uncheck "Ask me before clearing private data".
  10. Press "OK".

On MacOS

  1. Launch Firefox.
  2. Browse to Firefox > Preferences > Privacy
  3. Check "Clear history when Firefox closes".
  4. Click the "Setting" button
  5. Check "Cache".
  6. Uncheck "Active Logins".
  7. Uncheck "Cookies".
  8. 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


Verified Against: Zimbra Collaboration Server 7.0 Date Created: 12/22/2009
Article ID: http://wiki.zimbra.com/index.php?title=Zimlet_Developers_Guide:Firefox_and_Firebug Date Modified: 04/11/2014
Personal tools