Debugging Fusion Viewer or Mobile Viewer of AIMS in Firebug

By Daniel Du

Have you ever started programming on Fusion viewer –as known as flexible web layout in Infrastructure Studio — or Mobile viewer of Autodesk Infrastructure Map Server? If yes, this post may be helpful for you.

Fusion viewer and Mobile viewer are implemented with heavy JavaScript at client side and some PHP code at server side.  At most time, you will be fighting with JavaScript when extending the functionalities of Fusion Viewer or Mobile Viewer.  To debug JavaScript, a good toolset is Firefox + Firebug.

To improve performance, Fusion Viewer or Mobile Viewer are referencing a compressed version of JavaScript lib, which is created by ant + YUICompressor, but for debugging purpose, you will need the uncompressed version.

For Fusion Viewer, let’s say you are using the “slate” template, please open C:Program FilesAutodeskAutodesk Infrastructure Web Server Extension 2013wwwfusiontemplatesmapguideslateindex.html with your favorite text editor, I am using notepad++, change following code:

<script type="text/javascript" src="../../../lib/fusionSF-compressed.js"></script>

to

<script type="text/javascript" src="../../../lib/fusion.js"></script>

For Mobile Viewer, please open C:Program FilesAutodeskAutodesk Infrastructure Web Server Extension 2012wwwMobileViewerindex.html and change JavaScript and CSS file references as indicated in the comment:

<!-- For debugging, use these links-->
<link href="css/mobileviewer.css"
rel="stylesheet" media="screen" type="text/css" />
<script type="text/javascript" src="lib/mobileviewer.js">
</script>

Now you are ready to open your webpage in Firefox and enable Firebug to debug. You can setup break points in JavaScript code and check the runtime value of objects in monitoring window. It also to step into or step over by pressing F11 or F10 to run through your JavaScript code. There are many other interesting functionalities provided by Firebug, so please give it a try and find more.

Mobile Viewer is targeting the safari browser on iPad/iPhone/iPod touch, but it runs on Firefox on PC as well, so you can debug your extension on PC and check it on mobile devices. On the Apple^®iPhone^® itself, the settings for the Apple^® Safari^® app allow the debug console to be enabled (look under the ‘Developer’ menu in the settings) which is useful in determining errors that cannot be reproduced on the desktop.

Of cause, the recent versions of other browsers also have developer tools, like IE9 or Google Chrome, which one do you prefer?