如何调试 Google Docs 插件答案

【问题标题】：How to debug Google Docs Add-On如何调试 Google Docs 插件
【发布时间】：2015-11-20 12:07:10
【问题描述】：

我正在使用 Google Docs Add-On dev 进行我的第一步，但我无法调试代码。

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

这是我要破解的代码：

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

我知道代码已执行，但调试器不会停在那里。

我错过了什么？

谢谢！

编辑

看起来我应该选择一个函数在脚本编辑器中运行，然后我可以调试它。但是，我仍然找不到将调试器链接到 UI 的方法，这意味着 - 我想单击 Add-On 中的一个按钮，并使调试器停止。

如何做到这一点？

【问题讨论】：

你是按箭头键还是bug键？
它们都是灰色的。我正在刷新 google 文档窗口并运行插件。
OK，所以我发现我应该选择我要运行的函数，然后Debug按钮亮起。但是，我仍然找不到如何将调试器链接到附加组件，这样当我单击按钮时，调试器将停止执行。相应地修改问题。
您想在脚本标签中调试客户端 JavaScript，还是在服务器端 Apps 脚本代码中调试？

标签： google-apps-script google-docs

【解决方案1】：

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

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

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

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

/**
 * 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!)中有更详细的描述

【讨论】：

【解决方案2】：

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

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

【讨论】：