Significant productivity enhancer: Debugging and Developing O365 Add-Ins using Firebug Lite

In this article I will show you how to add a web based console capability Firebug Lite to your Office Add-Ins. This is particularly helpful when debugging Client Side applications.

Introduction

Firebug is a Firefox plugin and was one of the original developer tools of actual use and power. It has since been superseded by all the powerful work the Chrome Dev team have put into Chrome developer tools, but I still like it (old habits die hard).

Firebug Lite is a browser agnostic JavaScript version of this and provides a subset of functionality, directly in the browser.

This is especially helpful in the case of Client based Add-Ins. Client based Add-Ins use an embedded Internet Explorer experience and the Developer Tools are unavailable. There are ways to debug Add-Ins through Visual Studio, but seeing as I have no intention of writing a line of C#, that does not help me.

Firebug Lite

Adding Firebug Lite to your Office Add-in could not be simpler. Add the following to your application (be warned there are some issues with using it in conjunction with AngularJS).

The Firebug Lite console itself is 300px tall so ideally you need to make your Add-In 450px tall to be able to see it working

    <script type="text/javascript" src="https://getfirebug.com/firebug-lite.js">
        {
            overrideConsole: false,
            startInNewWindow: true,
            startOpened: true,
            enableTrace: true
        }
    </script>

That’s it. !

The JSON parameters are optional and not necessary if you are working in Outlook or OWA. They are necessary in the Word/Excel/PowerPoint clients though as the F12 key have an assigned function. These extra parameters open the Firebug Lite client in a new browser window. Still works, just not embedded directly inside of the Add-In.

From the documentation (Feb 2016 – Firebug 1.4 is live)

1.3. What’s Not in Lite?

Some features are not included in Firebug Lite 1.3, but due the new core that supports code sharing from Firebug, are likely to be included in the Firebug Lite 1.4 version:

  • Live editing for all panels
  • Layout Side Panel
  • Context menu options
  • Tooltips (to show colors and images)
  • Search feature

Other features though are too dependent in browser internals and will not be supported (at least in a near future*), such as:

  • Javascript debugger / Javascript profiler
  • Net panel / HTTP and XHR monitor
  • Access to restricted URI resources
  • Highlight HTML changes

*Discussions about remote debugging indicates that should be possible to support JavaScript debugging in browsers like Google Chrome and Opera in the future.

Looking at the Add-In

I used the basic example from napacloudapp and a stripped out the HTML on the front page – this gave me the ability to still run the Office.initialize in the app.js (necessary to deploy an Office Add-In). Initializing this Office object also gives me programmatic context to the rest of the “host”, be in Outlook or Excel.

f12

Having a console inside of the Add-In gives us a significant amount of flexibility for testing and seeing what is going on. To activate it – focus on the Add-In and hit F12. If you are outside of the Add-In in the browser this will trigger the normal browser developer tools.

In the browser:

f1

In the Outlook client

f2

In Excel

f3

Developing Add-Ins using Firebug Lite?

Oh Yes! Let’s be honest – we are all lazy and would rather not have to go back and forth deploying Add-Ins to test our code – with Firebug Lite now we can start to write the code which will ultimately be deployed as part of our applications. For example:

Got to the Office JavaScript API model page – https://msdn.microsoft.com/en-us/library/office/fp160953.aspx and open the API model on ZoomIt

f4

We can start to see the semblance of the document model for adding data to an excel cell. Let’s see if those objects exist – I can see from the ZoomIt that we can go:

  • Office
  • context
  • document

In the Firebug Lite console (in Excel) type out Office.context.document – and we can see an object exists

f5

type in any old crap and you get just that 🙂

f6

In this manner, not only can we start to test that our code works, we can also do it without having to keep redeploying the Add-In. Once we are comfortable with the code, we can move it to the real code base – this is a real productivity enhancer, especially when you are just getting into Office Add-In JavaScript development.

Building your first Excel Add-In example without deploying anything

Looking at the Build your own first Excel Add-In page we can use some of their code directly inside of the Firebug Lite console.

Click on the enlarge box in the console top right

f7

Then the Up Arrow bottom right – this will give us a pop-up window with a console we can actually read and use

f9

Copy the code from the Excel.run part of the code from the Excel page example and paste it into the right hand Firebug Lite pane

f10

and “Run” (or use CTRL-Enter)

f11

How freaking cool is that !!!!!!!! And we never had to deploy an Add-In to test that out.

Conclusion

Adding Firebug Lite to your Add-Ins during development will be an enormous time saver for you. It will allow you to initially develop you code without having to go through repeated deployments. It will also allow you to debug your code (more on that in later articles) by manipulating your JavaScript functions once they are actually deployed.

In another life I have been using Firebug Lite embedded inside of XULRunner browser, running inside of Eclipse (don’t ask) and it is very cool – more to come on that soon

 

Advertisements

6 thoughts on “Significant productivity enhancer: Debugging and Developing O365 Add-Ins using Firebug Lite

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s