Search code examples
angularjsgulpoffice-addins

Angularjs - How to debug and log when developing an Office add in

I am developing and Office add in using AngularJS and the adal-angular template provided by Microsoft through the Yeoman Office generator.

After everything was configured correctly I published my manifest.xml to a file share. I then told Excel to trust this file share as an app catalog. I can run the add in just fine, using Excel.

Now, though the add in runs fine, I have no indication of errors or logging messages. If an error occurs, I can't see what actually happen, I can only see the .html file I'm currently loading. This might look like this:

enter image description here

It can't be true that I haven o way of logging, debugging or at least see errors when developing my add in.

As I'm using Gulp to serve the application, I have a command prompt running. It looks like this:

enter image description here

Shouldn't I be able to log in this window, and see errors whenever they occur?

Solution

  • If you want to debug in the Windows desktop versions of Excel/Word/PowerPoint, you can use the IE Developer Tools, which have a good debugger, console, DOM-explorer, etc:

    1. Run the add-in
    2. Go to System32/F12 on your machine
    3. Run F12Chooser.exe
    4. Click Refresh and wait a couple seconds
    5. Choose the process you want to debug from your add-in

    The main advantage here is that you can use the native Office clients with this debugging method. For testing in Office Online, Mr.P's answer will work well for you. Note also that the F12 Chooser is available starting in Windows 10.

    -Michael Saunders, PM for Office add-ins