Developer Tools

This document provides general guidelines for programming, debugging, and hosting gadgets.

Programming and Debugging Tips

Part of the gadget development process (or any code development process) is understanding why things don't always work the way you expect them to. This section describes some basic techniques for avoiding problems, and for fixing them when they occur.

Start Small

A fundamental rule of programming is to start small. Get a basic, skeletal gadget working, and then build it up gradually. Test it at every stage before moving on. Using this approach makes it easier to tell when a change you made introduced problems.

Use the Firefox JavaScript Console

You can use the Firefox web browser to test your gadgets on iGoogle during development. If a gadget isn't working properly, open the JavaScript Console (Tools > JavaScript Console), select Errors, and scroll down to see if your gadget has JavaScript syntax errors. Before each test, remember to clear the Console to flush old error messages.

If you're using a different type of browser, look for a JavaScript console or debugger supported by your browser.

Confirm Your Assumptions

Confirming your assumptions during the development process can save you a lot of time and wasted effort. Are you sure that your variable has the value you think it does? Are you certain that your array contains elements? Is it possible that the function that "doesn't seem to be working right" isn't getting called at all? You can test your assumptions by printing out status messages at different points in your program. For example, the following gadget has a print() function that writes debugging messages to debug_div if the debug flag has a non-zero value:

<?xml version="1.0" encoding="UTF-8" ?> 
<Module>
  <ModulePrefs
    title="Debug Example"
    height="200"/>
  <UserPref
    name="myname"
    display_name="Name"
    required="true" />
  <UserPref
    name="mycolor"
    display_name="Color"
    default_value="Pink"
    datatype="enum" >   
      <EnumValue value="Blue" />
      <EnumValue value="Yellow" />
      <EnumValue value="Pink" />
      <EnumValue value="Gray" />
  </UserPref>
  <Content type="html"> 
  <![CDATA[ 
    <div id="content_div" style="font-size:20pt; padding:5px; text-align: center;"></div>
    <div id="debug_div" style="font-size:9pt; padding:5px; color: red;"></div>

    <script type="text/javascript">
      // Get userprefs
      var prefs = new gadgets.Prefs();

      // debug flag. When its value is non-zero, debugging messages are displayed
      var debug = 1;
      // The string containing debugging messages
      var debug_html = "";

      // Display date
      function displayDate (){
        // DEBUG: is the function getting called?
        print("In displayDate function<br>");
          
        // Create Date object
        var today = new Date();
        // Get current time
        var time = today.getTime();
        var content_html = "";     
        var element = document.getElementById('content_div');
        element.style.backgroundColor=prefs.getString("mycolor");
        element.style.height=100;

        // DEBUG: print out prefs values
        print("The background color is " + prefs.getString("mycolor") + "<br>");
        print("The name is " + prefs.getString("myname") + "<br>");
      
        content_html += today.toDateString();
        // Write content HTML to div
        document.getElementById("content_div").innerHTML = content_html;    
      }
  
      // Outputs debug messages if debug flag has a non-zero value
      function print(msg) {      
        if (debug) {
          debug_html += msg;
          // Write debug HTML to div
          document.getElementById("debug_div").innerHTML = debug_html;
        }
      }
      gadgets.util.registerOnLoadHandler(displayDate);
    </script>
  ]]> 
  </Content>
</Module>

Note: See MiniMessages for a description of the MiniMessage API, which lets you modify the behavior and appearance of the messages you display in a gadget.

Additional Tools

The following Firefox add-ons can help you get more fine-grained insight into your gadgets during development:

• Firebug provides debugging tools and DOM inspection.
• Web Developer adds to the browser a menu and toolbar containing web developer tools.

Back to top