How to debug JavaScript in DukeScript

Question

Is it possible to debug JavaScript when using DukeScript? I've tried adding FirebugLite

<script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>

It loads and that's awesome but it has no visibility of the $root model. Also I don't know if it's possible to add breakpoints.

Answer 1

Partly, one can include FirebugLite. See for example here. One problem I've found is that Firebug loads but has no visibility of the model, $root returns undefined. I've tried to work around this problem by creating a Javascript resource MyResource.js under main/resouces

MyResource = {
    loadFirebug: function(){
      if (!document.getElementById('FirebugLite')){
          E = document['createElement' + 'NS'] && document.documentElement.namespaceURI;
          E = E ? document['createElement' + 'NS'](E, 'script') : document['createElement']('script');
          E['setAttribute']('id', 'FirebugLite');
          E['setAttribute']('src', 'https://getfirebug.com/' + 'firebug-lite.js' + '#startOpened');
          E['setAttribute']('FirebugLite', '4');(document['getElementsByTagName']('head')[0] || document['getElementsByTagName']('body')[0]).appendChild(E);
          E = new Image;E['setAttribute']('src', 'https://getfirebug.com/' + '#startOpened');
      }      
    },
    someProperty: "someProperty"
};

Then we create a correpsponding Java class in order to load the resource

@JavaScriptResource("MyResource.js")
public class MyResource {

  @net.java.html.js.JavaScriptBody(
      args = {},  body = 
      "MyResource.loadFirebug();"
  )
  public static native void loadFireBug();
} 

Now in the onPageLoad() Java method we can invoke the JavaScript method that loads FirebugLite

/**
 * Called when the page is ready.
 */
public static void onPageLoad() throws Exception {
    d = new Data();
    d.setMessage("Hello World from HTML and Java!");
    d.applyBindings();
    MyResource.loadFireBug();
}

Now when Firebug starts, it has at least a scope of its enclosing resource. We still can't add breakpoints because the resource doesn't appear under the files. Perhaps DukeScript experts can suggest a better way of handling this.

Note 1: you can use load Bootstrap simply by including it into the the page with the script tag. See here

Note 2: Unfortunately FireBug Lite seems to have some problems with Bootstrap, beyond version 1.2. See here

Note 3: Here are a couple of ways on how to access a DukeScript model from the javascript context