如何在 Google 脚本中调试 HtmlService 中的 JavaScript

问题描述 投票：0回答：2

我在 Google HTMLService（Google 脚本中的 html 窗口）中的 JavaScript 中找不到语法错误。我的工作涉及谷歌可视化，这需要这个。这是我第一次使用 JavaScript 和 HTML，所以我很容易犯错误，这使得这是一个令人痛苦的问题。

执行日志仅显示 html 已运行，而我不知道在代码中的何处查找错误。我预计某个地方会说“错误：第 x 行”或“对象未接受第 y 行”，但我只是不知道该看哪里。

如果您能指出在哪里找到解决方案或如何澄清我的问题，我将不胜感激。

javascript debugging google-apps-script web-applications google-visualization
2个回答
2
投票

您可以使用浏览器的开发人员工具。在 Chrome 中，按 f12 按钮，或选择更多工具、开发者工具，浏览器中将打开如下所示的窗口：

Developer Tools

其中一个选项卡标记为 Console。您可以使用以下命令将信息打印到控制台：

console.log('This is text: ' + myVariable);

声明。

当 Apps 脚本宏运行并向您的浏览器提供 HTML 时，如果出现错误，它们将显示在控制台日志中。

我使用了您发布的 HTML，并在控制台中收到了消息：

HTML Error

因此，对于 HTML 的 

<script>
标记中的 JavaScript，您不会在 Apps 脚本代码编辑器中查找错误。您需要使用浏览器开发人员工具。 .gs 代码文件中的 JavaScript 是服务器端代码。它在谷歌的服务器上运行。 HTML 标记中的 JavaScript 在用户计算机上的用户浏览器中运行。

您还可以在浏览器中逐步执行客户端 JavaScript 代码。

一个问题是，当提供 HTML 时，代码会发生更改。

因此，Apps 脚本代码编辑器中的 JavaScript 看起来将与浏览器中提供的内容不同。如果您查看提供给浏览器的 JavaScript，它将看起来与原始文件中 Script 标记中的代码完全不同。

您还可以使用具有错误检查功能的代码编辑器。 Net Beans 有一个免费的代码编辑器。

0
投票

调试 Google Apps 脚本 Web 应用程序很大程度上取决于所使用的 Google Apps 脚本功能，即是否使用模板化 HTML 创建、客户端是否与服务器端通信等。

作为OP案例，Google Apps脚本执行日志没有显示任何错误消息，很可能创建了

HtmlOutput
，并且应该可以在客户端检查代码。

Google 向客户端发送一个 IIFE，将传递给 HtmlService 的 HTML/CSS/JavaScript 的 satinized 版本插入到 iframe 中，即白色间距不会相同，注释不会包含在其他更改中。无论如何，您可以使用开发工具查看生成的 JavaScript 并从开发工具控制台调用 JavaScript 函数等。

要从 Google Apps 脚本网络应用程序执行客户端 JavaScript，请首先选择控制台下拉选择器上的 

userHtmlFrame(userCodeAppPanel)
：

您甚至可以使用开发工具元素面板或在开发工具控制台中使用 JavaScript 对客户端 JavaScript 进行更改，以及执行其他操作。请记住，在那里所做的更改不会保存在 Google Apps 脚本项目中。

值得一提的是，可以使用 Google Apps 脚本编辑器调试纯 JavaScript。更简单的方法是将 JavaScript 代码放在 .gs 文件中，并使用 HtmlTemplate 创建 Web 应用程序的 

HtmlOutput
对象以及：
ScriptApp.getResource(name).getDataAsString()
。此外，这种方法将有助于使用桌面工具测试 JavaScript 代码，有助于更轻松地修复因缺失/错位 
<,>,",',(,),:,;
导致的“格式错误”错误，并利用 JavaScript 中不可用的智能感知功能。 .html 文件。

在 .gs 文件而不是 .html 文件上具有客户端 JavaScript 的 Web 应用程序示例。客户端 JavaScript 位于 

javascript.js.gs
文件中。在这个过于简化的示例中，要测试的函数需要参数。这使得该函数无法直接从编辑器工具栏运行，因此 test.gs 文件中有几个“测试”函数，用于设置所需的参数并调用我们要调试的函数。

代码.gs

/**
 * Respond to HTTP GET request. Returns a htmlOutput object.
 */
function doGet(e){
  return HtmlService.createTemplateFromFile('index')
    .evaluate()
    .setTitle('My web app');
}

/**
 * Returns the file content of a .gs or .html Google Apps Script file.
 *
 * @param {filename} Google Apps Script file name. It should not include the .gs or .html file extension
 */
function include(filename){
   const [name, suffix] = filename.split('.');
   switch(suffix){
     default: 
       return HtmlService.createHtmlOutputFromFile(name).getContent();
     case 'js':
       const content = ScriptApp.getResource(name).getDataAsString(); 
       return `<script>${content}</script>`;
     }
   
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <?!= include('stylesheet.css') ?>
  </head>
  <body>
    <p>Add here some content</p>
    <?!= include('javascript.js') ?>
  </body>
</html>

javascript.js.gs

/**
 * Arithmetic addition of two operands. Validates that both operands are JavaScript numbers.
 *
 * @param {number} a Left addition operand
 * @param {number} a Right addition operand
 */
function addition(a,b){
   if(typeof a !== 'number') || typeof b !== 'number') throw new Error('Operands should be numbers');
   return a + b;
}

测试.gs

/**
 * Passing two numbers. Expected result: 2.
 */
function test_addition_01(){
  const a = 1;
  const b = 1;
  const result = addition(a,b);
  console.log(result === 2 ? 'PASS' : 'FAIL');
}

/**
 * Passing one number and one string. Expected result: Custom error message.
 */
function test_addition_02(){
  const a = 1;
  const b = '1';
  try{
    const result = addition(a,b);
  } catch(error) {
    console.log(error.message === 'Operands should be numbers' ? 'PASS' : 'FAIL');
  }
  
}

注意：

ScriptApp.getResource
即使在库中包含此方法也无法从库中提取文件

要调试使用其他技术的 JavaScript，即 

document.getElementById(id)
，一种选择是使用开发工具控制台或使用 try...catch 并从服务器端调用某些函数 google.script.run，用于记录执行时的错误日志。

要调试调用 JavaSCript 库的 JavaScript，您可以将库代码复制到一个或多个 .gs 文件中，或者使用 

UrlFetchApp
和 
eval
将其加载到服务器端（请参阅如何从外部源加载 javascript 和在 Google Apps 脚本中执行它)

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.