Added by Cameron Shorter, last edited by Cameron Shorter on Jan 20, 2008  (view change)

Labels

 
(None)

Mozilla based browsers provide more powerful debugging tools so it is usually best to start there.

Javascript console (Mozilla)

The console is included in most Mozilla browser installs. Here you can view javascript errors.
Select Tools->Javascript Console

Firebug

Firebug is probably the most useful debugging tool for Mapbuilder. It provides extensions to Firefox which allow numerous debugging features, but of most use is you can see all the GET/POST requests and responses.

Once installed, select Tools->Firebug->Disable Firebug (ticked). Then when you reload a page, you will see all the GET/POST requests in a console window at the bottom of the browser window.

Venkman javascript debugger (Mozilla)

This allows you to insert breakpoints, step through code etc.

Install by selecting Tools->Extensions->"Get more extensions" then search for Venkman. Then the debugger is available by selecting Tools->Javascript Debugger.

To run, load a mapbuilder webpage. Open the Debugger. Insert breakpoints. Then Reload the mapbuilder webpage.

Web Developer extension for Mozilla based browsers

This adds lots of debugging goodies to Firefox/Seamonkey etc. and is well worth installing. Available at:
http://chrispederick.com/work/webdeveloper/

Microsoft Windows Script debugger (IE)

Use this for debugging Internet Explorer. Unfortunately it is quite poor compared to the Mozilla tools.
Download from: http://msdn.microsoft.com/library/default.asp?url=/downloads/list/webdev.asp
Docs at: http://msdn.microsoft.com/library/default.asp?url=/library/en-us/sdbug/Html/sdbug_1.asp

To debug javascript at the line you want the debugger to appear insert the following statement:

debugger;

The debugger will appear when IE executes the line. You then can set the breakpoints through the rest of the code. Beware that it doesn't seem to always stop at breakpoints. When that happens just put a debugger statement at that location.

View Rendered Source (Mozilla)

This allows you to view the actual HTML code as used to display the page, including the HTML output of the widgets.

Install by selecting Tools->Extensions->"Get more extensions" and search for rendered source. Then it will be available under Tools->View Rendered Source

View Rendered Source (IE)

There is a view rendered source for IE as well, available at http://billfriedrich.tripod.com/index.html?Web.

Javascript debugger

A general javascript debugger that should work under IE http://www.edwardh.com/jsunit/

XMLHttpRequest bookmarklet IE

A nice bookmarklet to see the XMLHttpRequests in internet explorer
http://blog.monstuff.com/archives/000291.html

Debug alerts

In the config.xml file, you can insert a <debug> tag inside a widget and model tags.

<widgets>
  <Legend id="legend">
    <debug/>
  </Legend>

This will trigger alert messages displaying XML, XSL, and HTML used during the widget rendering.

Image URLs

To figure out why a WMS layer isn't loading, it useful to load the GetMap URL in a browser window by itself to check the error output.  Use the Web Developer Extensions (above) or view rendered source (above) to access to URL of the WMS image.  Then try the image URL in the browser by itself.  You may be receiving an XML error from the WMS.

Javascript Bookmarklet  -  Ad hoc Debug Window

Here's a bookmarklet that opens an ad hoc debug window for executing Javascript statements in the scope of the currently running web page.

Instructions:

  1. Paste the URL shown below (should be pasted as one single long string) in the location bar of a running Mapbuilder browser window.
    javascript:w=window.open(%22%22,%22myWin%22);h='<form><textarea%20name=%22input%22%20rows=%2220%22%20cols=%22100%22></textarea><br>'; h+='<input%20type=%22button%22%20value=%22evaluate%22%20onclick=%22opener.evl(this.form.input.value)%22><br>'; h+='<textarea%20id=%22out%22%20rows=%225%22%20cols=%22100%22></textarea></form><br>';w.document.write(h); evl=function(f){w.document.getElementById(%22out%22).value=eval(f)};void(0);
  2. A new window will open displaying two textarea boxes.
  3. Type Javascript expressions in the top text box, then click "evaluate" to see the evaluated results in the bottom text box.

Example 1.  To view the rendered source of the currently loaded document, type the following in the top text box and click "evaluate":

document.documentElement.innerHTML;

Example 2.  To inspect the properties and methods of the Mapbuilder "config" object, copy/paste the following into the top text box and click "evaluate":

var str;
for(i in config) {
    str += i + ' =          ' + config[i] + '\n';
}

Note:  You can change the height of the textarea boxes by changing the "rows" attribute in the Javascript Bookmarklet.

Printing the Mapbuilder Object Model

The following javascript snippet is intended to be pasted into the top text box of the Javascript Bookmarklet (ad hoc debug window) described above.

Paste the script snippet below into the top text box of the ad hoc debug window, then click "evaluate" to print out a nicely indented Mapbuilder object model.
This helps troubleshoot a configuration file or just make sure things are set properly.  It also makes for a great learning tool for developers who are new to Mapbuilder!

The script snippet

// Starting node of object model...   (i.e. config.objects)
goStartNode = config.objects;

// Enumerate 'model' nodes?
gbEnumerateModel = 0;

gsOutput=gsIndent='';
gsSpace     = '    ';
gnLevel   = 0;
gnLimit   = 6;  // No. of levels deep to enumerate
gnLineLen = 30; //

function pad(chr,len)
{
   var ps='';
   for(var i=0; i<Math.abs(len); i++) ps+=chr;
   return ps;
}

function inspect(poCurNode,psParentNode)
{
    gnLevel++;
    if(gnLevel!=1) gsIndent += gsSpace;

    for(var i in poCurNode)
    {
        bEnumerate = 1;

        // The following block tests special cases and sets display of node
        var theType = ( typeof poCurNode[i] == 'function' ) ? '[function]' : poCurNode[i];

        if( psParentNode == 'listeners' ) {
            theType = '[function]';
        }

        else if( i == 'parentModel') {
            theType = '[object Object] id="'+poCurNode.parentModel.id+'"     url="'+poCurNode.parentModel.url+'"';
            bEnumerate = 0;
        }
        else if( i == 'targetModel') {
            theType = '[object Object] id="'+poCurNode.targetModel.id+'"     url="'+poCurNode.targetModel.url+'"';
            bEnumerate = 0;
        }
        else if( i == 'containerModel') {
            theType = '[object Object] id="'+poCurNode.containerModel.id+'"     url="'+poCurNode.containerModel.url+'"';
            bEnumerate = 0;
        }
        else if( i == 'model' && psParentNode == 'extent' ) {
            theType = '[object Object] id="'+poCurNode.model.id+'"     url="'+poCurNode.model.url+'"';
            bEnumerate = 0;
        }
        else if( i == 'model' ) {
            theType = '[object Object] id="'+poCurNode.model.id+'"     url="'+poCurNode.model.url+'"';
            bEnumerate = gbEnumerateModel;
        }

        else if( i == 'tabLabels') {
            theType = '[object Element] expr="'+poCurNode.tabLabels.expr+'"';
        }
        else if( poCurNode[i] == '[object XMLDocument]' ) {
            theType = '[object XMLDocument] documentURI="'+poCurNode[i].documentURI+'"';
        }
        else if( poCurNode[i] == '[object Element]' ) {
            theType = '[object Element] nodeName="'+poCurNode[i].nodeName+'"';
        }
        else if( poCurNode[i] == '[object HTMLDivElement]' ) {
            theType = '[object HTMLDivElement] id="'+poCurNode[i].id+'"';
        }
        else if( poCurNode[i] == '[object HTMLImageElement]' ) {
            theType = '[object HTMLImageElement] id="'+poCurNode[i].src+'"';
        }

        // Dynamic padding to align right column
        len = gnLineLen - i.length;
        gsOutput += gsIndent+ i + pad(' ',len) + theType + '\n';

        if // Test if should recurse
        (
            (
                poCurNode[i] == '[object Object]' ||
                i.match( /(listeners|values)/ )
            )
            && bEnumerate
            && !( i == 'contextEditorDemoConfig' && psParentNode == 'contextEditorDemoConfig' )
            && !( i == 'model' && !gbEnumerateModel )
            && psParentNode != 'objects'
            && gnLevel<gnLimit
        )
        {
            inspect(poCurNode[i],i);
        }
    }
    gnLevel--;
    if(gnLevel==1) gsOutput+='\n\n';
    gsIndent=gsIndent.substr(4);
}

inspect(goStartNode);
gsOutput;

Example Output (using Mapbuilder Complete Demo)

wmsCapsUrlInput               [object Object]
    model                         [object Object] id="referenceTemplate"     url="completeConfig.xml"
    widgetNode                    [object Element] nodeName="ModelUrlInput"
    id                            wmsCapsUrlInput
    autoRefresh                   true
    outputNodeId                  MbWidget_1
    htmlTagId                     wmsCapsUrlInput
    node                          [object HTMLDivElement] id="wmsCapsUrlInput"
    initTargetModel               [function]
    prePaint                      [function]
    postPaint                     [function]
    clearWidget                   [function]
    stylesheet                    [object Object]
        xslUrl                        http://localhost/mapbuilder_cvs/lib/widget/ModelUrlInput.xsl
        xslDom                        [object XMLDocument] documentURI="http://localhost/mapbuilder_cvs/lib/widget/ModelUrlInput.xsl"
        processor                     [object XSLTProcessor]
        docNSUri                      xmlns:mb='http://mapbuilder.sourceforge.net/mapbuilder'
        transformNodeToString         [function]
        transformNodeToObject         [function]
        setParameter                  [function]
    paint                         [function]
    submitForm                    [function]
    handleKeyPress                [function]
    formName                      urlInputForm_2
    targetModel                   [object Object] id="wmsCapTemplate"     url="undefined"
    resultDoc                     [object XMLDocument] documentURI="http://localhost/mapbuilder_cvs/demo/complete/completeConfig.xml"
    urlInputForm                  [object HTMLFormElement]


ntsLookupForm                 [object Object]
    model                         [object Object] id="referenceTemplate"     url="completeConfig.xml"
    widgetNode                    [object Element] nodeName="WebServiceForm"
    id                            ntsLookupForm
    autoRefresh                   true
    outputNodeId                  MbWidget_3
    htmlTagId                     ntsLookupForm
    node                          [object HTMLTableCellElement]
    initTargetModel               [function]
    prePaint                      [function]
    postPaint                     [function]
    clearWidget                   [function]
    stylesheet                    [object Object]
output truncated...

Please Note

"A script on this page is causing Mozilla/Firefox to run slowly..."
You may see this warning when running the script with gbEnumerateModel=1.  Just hit "cancel" to continue running the script.  You may see this warning multiple times before the script completes.

Bug in IE:
I have tested this script in the latest versions of Mozilla and Firefox, but noticed that there is an error in IE.

XML-XSLT Tester - XFactor

XFactor is an easy-to-use XSLT editor and tool that is available as a software companion to XSLT For Dummies.
XFactor allows you to load external XML and XSLT document and then view the transformed output.  The loaded documents can then be edited so that you can test and troubleshoot your XSLT.  Features syntax highlighting, auto-indenting...

http://www.dummies.com/WileyCDA/DummiesTitle/productCd-0764536516,page-1.html

XML-XSLT Tester - Treebeard

Similar to XFactor above, except that it seems to have a richer set of features.  Treebeard allows you to load external XML and XSLT document and then view the transformed output.

Treebeard does not seem to work properly with Java 1.5.x.  Users have reported it works fine with 1.4.2.

http://treebeard.sourceforge.net/

Comments  (Hide Comments)

XML-XSLT Tester/Debugger - Exchanger XML Lite

This is a much better tool than the previous two listed tools (XFactor & Treebeard).  It opens your XML and XSLT documents (from local disk or URL),  parses them checking for well-formedness, then you can run the transformation (your choice of several processors including Xalan & Saxon) to see what you get.  You can even run process through a debugger where you can set breaks and step through to see exactly how your XSLT is transforming your XML - Great for learning XSLT.  Exchanger is free for non-commercial use.  There is also a paid version.

 http://www.freexmleditor.com/


Posted by John Aguinaldo at Jun 30, 2008 16:38