How to debug Google Docs Add-On

Question

I'm doing my first steps with Google Docs Add-On dev, and I just can't make the code debug.

I set a breakpoint in the Script Editor window, but when I'm testing the add-on in Google Docs, it won't stop at the break point.

This is the code I'm trying to break at:

$(function() {
    $('#checkDoc').click(performCheck);          
  });

I know the code is executed, but the debugger won't stop there.

What am I missing?

Thanks!

EDIT

It looks like I should have selected a function to run in the Script Editor, and then I could debug it. However, I still can't find the way to link the debugger to the UI, meaning - I want to click a button in the Add-On, and make the debugger stop.

How can that be done?

Answer 1

The Google Apps Script debugger supports step-through debugging only for server-side GS files. Client-side JavaScript can be debugged using browser-based development tools.

However, due to the asynchronous nature of communication between client and server code, this isn't always enough. Often, you will want to trace a thread of logic from server to client or vice-versa. Or you may want to retain the ability to log your application after it's published, when console.log calls are bad form. You've probably used Logger.log() with gs code - well, there's a trick that will let you use it for client side JavaScript as well.

Client-side code can send logs to the server side, where they can be combined and written to a spreadsheet for full-application debugging. On the server, you can either use your own function to append lines to a spreadsheet, but I prefer to use the BetterLog library to take care of those details for me.

With a helper function in your client-side JavaScript, you can write Logger.log() statements that look just like your client side Google Apps Script:

/**
 * Logger.log() for js
 * Passes log to server function "clientLog"
 *
 * Usage - just like Google Apps Script:
 *     Logger.log(msg);
 *
 * From: gist.github.com/mogsdad/d6cd7f095355b7f0ef48
 *
 * @param msg     {string}   The message to log.
 */
var Logger = {};
Logger.log = function ( msg ) {
  // console.log( msg ); // uncomment for browser logging
  google.script.run.clientLog( "log", msg );
}

On the server side, the clientLog() function receives client-side log messages, ensures spreadsheet logging is available, and writes the log with prepended text to uniquely identify client logs:

/**
 * Support client-side logs from HTML file javascript. First argument is
 * expected to be the name of a Logger method.
 * 
 * From: gist.github.com/mogsdad/39db2995989110537868
 *
 * @param {object} arguments   All arguments from [1] are passed on
 */
function clientLog() {
  if (!startBetterLog_()) return;
  var args = Array.slice(arguments);    // Convert arguments to array
  var func = args.shift();              // Remove first argument, Logger method
  if (!Logger.hasOwnProperty(func))     // Validate Logger method
    throw new Error( "Unknown Logger method: " + func );
  args[0] = "CLIENT "+args[0];          // Prepend CLIENT tag
  Logger[func].apply(null,args);        // Pass all arguments to Logger method
}

The combined logs will look something like this:

This is described in more detail in my blog, Did you know? (You can log to a spreadsheet from client JavaScript!)

Answer 2

You need to use the Chrome Developer Console to debug your JavaScript. In the console, make sure you select the frame containing your addon.

Use console.log, because I am not sure if you can set breakpoints inside iframed scripts.