Google Apps Script客户端代码与源码映射失效，调试无对应代码

问题根源 #

Google Apps Script的HtmlService会自动压缩、合并客户端脚本，普通的//# sourceURL标记容易被处理后失效，尤其是动态加载的脚本更难被浏览器调试工具识别。

具体修复步骤 #

1. 修正静态脚本的sourceURL写法 #

将每个静态脚本（如employee.js、jobs.js）的代码包裹在自执行函数中，确保sourceURL标记在脚本块的末尾，避免被压缩干扰：

(function() {
  // 你的脚本代码
  function fetchEmployeeList() {
    // 业务逻辑
  }
})();
//# sourceURL=employee.js

同时，在code.gs中返回模板时，使用IFRAME沙箱模式，提升调试兼容性：

function doGet() {
  return HtmlService.createTemplateFromFile('index')
    .evaluate()
    .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

2. 处理doT.js动态加载的脚本 #

动态加载的脚本需要在注入页面前手动追加sourceURL标记，确保浏览器能识别对应文件名：

// 假设通过doT获取到脚本内容scriptContent和文件名fileName
scriptContent += `\n//# sourceURL=${fileName}.js`;
// 创建脚本标签注入页面
const scriptTag = document.createElement('script');
scriptTag.textContent = scriptContent;
document.head.appendChild(scriptTag);

3. 优化Clasp部署配置 #

在项目根目录的appsscript.json中确认以下配置，启用V8运行时和完整日志记录：

{
  "runtimeVersion": "V8",
  "exceptionLogging": "STACKDRIVER",
  "webapp": {
    "access": "ANYONE_ANONYMOUS",
    "executeAs": "USER_DEPLOYING"
  }
}

V8运行时对现代调试工具的兼容性更好，能减少代码处理时的异常。

4. 手动映射本地代码到网络资源 #

如果上述方法仍不生效，可通过浏览器开发者工具手动映射：

• 打开Sources面板，右键空白区域选择「Add folder to workspace」，添加本地项目的脚本文件夹
• 找到网络请求中被压缩的脚本文件，右键选择「Map to network resource」，关联到本地对应的脚本文件
  这样就能直接在本地文件中设置断点、查看错误对应的代码行。

5. 避免脚本合并的干扰 #

确保每个通过include引入的脚本都单独添加sourceURL标记，不要将多个脚本的标记放在合并文件的末尾，这样即使HtmlService合并脚本，每个脚本段的标识也能被正确识别。

验证方式 #

部署后打开Web应用，在浏览器开发者工具的Sources面板中查看是否能看到你命名的脚本文件，点击控制台的错误日志，若能直接跳转到对应代码行则说明配置生效。

内容的提问来源于stack exchange，提问作者The Dead Man