Debugging an Office Web Add-in in Production


It is sometimes tough to determine what is happening in a production environment and you need to get logging information from the add-in to see what is happening. How can you do that?

One way is to build a console.log() option into your add-in that looks for a Debug flag in the manifest. So, you will create two manifest, one that enabled Debugging and another than disables it. More on that in a bit. To start, here is the basic class I created in order to handle this:

/*!
 * logger JavaScript Library v1.0.1
 * http://davecra.com
 *
 * Copyright David E. Craig and other contributors
 * Released under the MIT license
 * https://tldrlegal.com/license/mit-license
 *
 * Date: 2016-08-09T12:00EST
 */
var console = (function () {
    "use strict";

    var console = {};

    console.initialize = function () {
        ///
<summary>
        /// Add a textarea/console to the bottom of the page and then setup the logger
        /// </summary>

        /// <param name="DebugMode" type="Boolean">If debug mode enabled - we show the console for logging</param>
        var debugMode = getParameterByName("Debug") == "true";
        if (debugMode) {
            // add the console to the screen
            $("body").append("<textarea id='log' style='width:100%' cols='2000' rows='7' wrap='off'></textarea>");
            $("body").append("<button id='saveLog'>Copy Log to Clipboard</button>");
            $("#saveLog").click(function () {
                var field = $("#log");
                field.select();
                document.execCommand("copy");
            });
        }

        console.log = function (msg) {
            ///
<summary>
            /// GLOBAL: Logs to the textarea on the page
            /// </summary>

            /// <param name="msg" type="string">The message to log</param>
            if (debugMode) {
                var d = new Date(Date.now());
                var current = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
                var data = $("#log").val();
                $("#log").val(current + " - " + msg + "\r\n" + data);
            }
        };
    }

    function getParameterByName(name) {
        ///
<summary>
        /// Get a parameter form the URL
        /// </summary>

        /// <param name="name" type="String">Name of the parameter to get from the query string</param>
        /// <returns type="String">Value of the paramater</returns>
        var url = window.location.href;
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, " "));
    }

    return console;
})();

To enable logging you will add the following code to your initialize:


console.initialize();
console.log("Started...");

Once initialized this will add a TEXTAREA to the bottom on the page where the log entries will be loaded. Additionally, it will place a “Copy To Clipboard” button at the bottom that when clicked will copy the contents of the TEXTAREA to the clipboard so that they can be forwarded to you as needed.

Once implemented and initialized, you can add a console.log() anywhere you want in your code to add an entry to the log. Now, how do you turn this on. What this is doing in initialize is to see if the debug flag is set in the Query String of the SourceLocation setting in the Manifest. To turn on debugging, you change the following line as such:


<DesktopSettings>
<SourceLocation DefaultValue="~remoteAppUrl/MessageRead.html?Debug=true"/>
<RequestedHeight>250</RequestedHeight>
</DesktopSettings>

That is it. From this you will be able to share two manifests with your users/administrators. The first one will be your default production manifest and the second one can be loaded if you need debugging information from the add-in.

3 thoughts on “Debugging an Office Web Add-in in Production

  1. For some reason when I try to do this (or to pass any other query parameter in the manifest SourceLocation) it seems that the query parameter is just stripped out before the page is loaded so I can’t get to it via JavaScript. I am currently just developing on localhost and uploading the manifest as a file.

    • I have not seen this problem before. It might be browser specific or application specific. Where are you running the add-in? Chrome, IE, Edge or Outlook client? You might also ask for the full URL (window.location.href) and verify it is NOT there. It might be that the code in getParameterByName() is failing. Let me know what you find.

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