How to debug a Google Docs add-on

Question

I am taking the first steps using the Google Docs Add-On dev, and I just can't debug the code.

I set a breakpoint in the Script editor window, but when I test the add-in in Google Docs, it will not stop at the breakpoint.

This is the code I'm trying to break:

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

I know that the code has been executed, but the debugger will not stop there.

What am I missing?

Thanks!

EDIT

Looks like I had to select the function to run in the Script editor, and then I could debug it. However, I still cannot find a way to associate the debugger with the user interface, that is - I want to click a button in the add-in and stop the debugger.

How can I do that?

Answer 1

JavaScript, Chrome. , , .

console.log, , iframed-.

Answer 2

Google Apps Script GS . JavaScript .

- . . , console.log . , , Logger.log() gs - , , JavaScript .

, . , BetterLog, .

JavaScript Logger.log(), , 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 );
}

clientLog() , :

/**
 * 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
}

:

? ( JavaScript!)