Debugging

Browser-based debugging

By default, WebDialogs don't offer the kinds of debugging support that web browsers provide. However, some useful workarounds exist now and there are interesting possibilities for the future.

Static content

It's trivial to try out static WebDialog content in a browser. Just store the content in files and use set_file to tell WebDialog about them. This will also help you to clean up your code; HTML files can use other (eg, CSS, JavaScript) files, so multiple files can be used to promote clarity.

Finally, static files let you try out changes quickly and easily. Using your favorite text editor, edit your HTML (etc) files. Just hit refresh in the browser to see the result!

The "location" snafu

If your JavaScript code sets location, the browser may put up a nastygram (or worse). Here is a two-part workaround that dances around this issue. As you're starting up the dialog from Ruby, set a flag variable:

wd.set_file(file_path)
wd.show_modal do
  wd.execute_script('window.webdialog_comm = "normal";')
end

In your JavaScript client code, use a wrapper to set location, making sure that it checks the flag variable:

  
function callback(cbn, msg) {
  if (window.webdialog_comm == 'normal') {
    var base = 'skp:' + cbn + '@';
    window.location = base + msg;
  }
}

Dynamic content, callbacks, etc.

Because SketchUp expects to use its own WebDialogs, there is no built-in way to use a browser for debugging dynamic content, callbacks, etc. However, Browser_Dialog is a (partial) solution.

JavaScript syntax checking

It's useful to have a quick way to tell if your JavaScript syntax is clean. Why not let the page itself tell you the status? In your CSS file, set up some coloring classes:

  
.green { color: green; }
.red   { color: red;   }

Then, wrap your JavaScript code with some jQuery magic:

  
$('h1').addClass('red');
... more JavaScript code ...
$('h1').removeClass('red').addClass('green');

Finally, load the page and look at the header:

  • If it's black, your JavaScript never ran at all.
  • If it's red, your JavaScript crashed part-way through.
  • If it's green, your JavaScript ran to completion.

Logging and tracing

In a normal web application, JavaScript can send text to the browser console, as:

  
console.log("The sky is falling!");

Unfortunately, this does not work under SketchUp. However, there still some options for logging and tracing:

  • The alert method does work under SketchUp; it can be used to print text in popup dialogs.

  • If Ruby callbacks are functioning, you can send a message to the callback to display on (say) the SketchUp console.


This wiki page is maintained by Rich Morin, an independent consultant specializing in software design, development, and documentation. Please feel free to email comments, inquiries, suggestions, etc!

Topic revision: r8 - 02 Jan 2012, RichMorin
This site is powered by Foswiki Copyright © by the contributing authors. All material on this wiki is the property of the contributing authors.
Foswiki version v2.1.6, Release Foswiki-2.1.6, Plugin API version 2.4
Ideas, requests, problems regarding CFCL Wiki? Send us email