如何调试 Google 文档插件

Question

我正在使用 Google Docs Add-On 开发，但我无法调试代码。

我在脚本编辑器中设置了一个断点window，但是当我在Google文档中测试插件时，它不会在断点处停止。

这是我要破解的代码：

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

我知道代码已执行，但调试器不会就此停止。

我错过了什么？

谢谢！

编辑

看来我应该在脚本编辑器中为运行选择一个函数，然后我就可以对其进行调试了。但是，我仍然无法找到 link 调试器到 UI 的方法，意思是 - 我想单击附加组件中的一个按钮，然后停止调试器。

如何做到？

Answer 1

您需要使用 Chrome 开发者控制台来调试您的 JavaScript。在控制台中，确保 select 包含您的插件的框架。

使用console.log，因为我不确定您是否可以在 iframed 脚本中设置断点。

Answer 2

Google Apps 脚本调试器仅支持服务器端 GS 文件的逐步调试。客户端 JavaScript 可以使用基于浏览器的开发工具进行调试。

但是，由于客户端和服务器代码之间通信的异步性质，这并不总是足够的。通常，您会想要跟踪从服务器到客户端的逻辑线程，反之亦然。或者，当 console.log 调用形式不正确时，您可能希望保留在应用程序发布后记录它的能力。您可能已经将 Logger.log() 与 gs 代码一起使用 - 好吧，有一个技巧可以让您也将它用于客户端 JavaScript。

客户端代码可以将日志发送到服务器端，在那里它们可以合并并写入电子表格以进行完整的应用程序调试。在服务器上，您可以使用自己的函数将行附加到电子表格，但我更喜欢使用 BetterLog 库来为我处理这些细节。

借助客户端 JavaScript 中的辅助函数，您可以编写看起来就像客户端 Google Apps 脚本的 Logger.log() 语句：

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

合并后的日志将如下所示：

这在我的博客中有更详细的描述，Did you know? (You can log to a spreadsheet from client JavaScript!)

如何调试 Google 文档插件

How to debug Google Docs Add-On

google-docs

google-apps-script