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.
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).
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.
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
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:
- Net panel / HTTP and XHR monitor
- Access to restricted URI resources
- Highlight HTML changes
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.
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:
In the Outlook client
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:
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:
In the Firebug Lite console (in Excel) type out Office.context.document – and we can see an object exists
type in any old crap and you get just that 🙂
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
Then the Up Arrow bottom right – this will give us a pop-up window with a console we can actually read and use
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
and “Run” (or use CTRL-Enter)
How freaking cool is that !!!!!!!! And we never had to deploy an Add-In to test that out.
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