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

Two ways to remove a Napa developed Office Add-in

In this article I will show the two methods available for removing a Napa developers plugin from your mail file.

Introduction

As I was developing some Add-ins using Napa I unwittingly deleted them from my dev site not thinking about the consequences – well then I had to deal with them…..

Deleting a development Add-in

So let’s say we created a new Add-in and you delete it from the Napa interface

j2

and then you realize it is still attached to your mail (doh)

j1

you need to manage you own Add-ins

Managing your own Add-ins

Top right – Gear > Manage Add-ins

j3

j4

Select the one to remove and click on the (-) icon above the grid

j5

And there you have it – pretty simple.

j6

Now here’s the “Better” way of doing it

DON’T delete it from the front page of the napa interface

Within the napa developer IDE for the project, right under the Run Project icon there is a “Retract App” icon – use that instead

j7

So then Jeff still exists in your development IDE but not inside your email. Much more elegant.

Conclusion

In this article we have seen two methods for removing a Napa developed add-in from your email client(s)