JavaScript/Dojo Module Pattern - how to debug?

Posted by djna on Stack Overflow See other posts from Stack Overflow or by djna
Published on 2010-04-13T07:54:29Z Indexed on 2010/04/13 15:33 UTC
Read the original article Hit count: 545

Filed under:
|
|

I'm working with Dojo and using the "Module Pattern" as described in Mastering Dojo. So far as I can see this pattern is a general, and widely used, JavaScript pattern. My question is: How do we debug our modules?

So far I've not been able to persuade Firebug to show me the source of my module. Firebug seems to show only the dojo eval statement used to execute the factory method. Hence I'm not able to step through my module source. I've tried putting "debugger" statements in my module code, and Firebug seems to halt correctly, but does not show the source.

Contrived example code below. This is just an example of sufficient complexity to make the need for debugging plausible, it's not intended to be useful code.

The page

<!--
  Experiments with Debugging
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head> 
    <title>console me</title>

    <style type="text/css">
      @import "../dojoroot/dojo/resources/dojo.css";
      @import "../dojoroot/dijit/themes/tundra/tundra.css";
      @import "edf.css";
    </style>    

    <script type="text/javascript" src="../dojoroot/dojo/dojo.js">
    </script>

    <script type="text/javascript" >
      dojo.registerModulePath("mytest", "../../mytest");

      dojo.require("mytest.example");

      dojo.addOnLoad(function(){
         mytest.example.greet();                     
      });
    </script>

  </head>
  <body class="tundra">
    <div id="bulletin">
      <p>Just Testing</p>
    </div>
  </body>
</html>
<!-- END: snip1 -->

The java script I'd like to debug

dojo.provide("mytest.example");
dojo.require("dijit.layout.ContentPane");

/**
 * define module
 */
(function(){
      //define the main program functions...
      var example= mytest.example;
      example.greet= function(args) {

          var bulletin = dojo.byId("bulletin");

          console.log("bulletin:" + bulletin);

          if ( bulletin) {
                var content = new dijit.layout.ContentPane({
                    id: "dummy",
                    region: "center"
                  });
                content.setContent('Greetings!');

                dojo._destroyElement(bulletin);
                dojo.place(content.domNode, dojo.body(), "first");
              console.log("greeting done");
          } else {
              console.error("no bulletin board");
          }           
      }
})(); 

© Stack Overflow or respective owner

Related posts about dojo

Related posts about JavaScript