如何让Google Apps Script客户端代码显示在Dev Tools Sources面板？

在闭合<script>标签前添加//# sourceURL=filename.js注释，可让通过document.write、eval等方式注入DOM的JavaScript代码，显示在Chrome DevTools及其他浏览器的Source面板中。但在Google Apps Script的HtmlService中使用该方法时，注释未被传递到浏览器。我采用的是HtmlService.createHtmlOutput().append(string)方式生成HtmlOutput，而非常用的createHtmlOutputFromFile方法。

尝试代码 #

Code.gs #

function doGet(e) {
  return HtmlService.createHtmlOutput()
    .append(`
  <!DOCTYPE html>
  <html>
  <head>
  <base target="_top">
  </head>
  <body>
  <form>
  <input type="text" name="something" value="default value"><br>
  <button type="submit">Submit</button>
  </form>
  <script>
  function formSubmitHandler(){
    google.script.run.doSomething(event.currentTarget)
  }
  //# sourceURL=javascript.js
  </script>
  </body>
  </html>
`)
    .setTitle('Demo')
    .addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

function doSomething(formData){
  console.log(JSON.stringify(formData.something));
}

相关问题说明 #

• 与“如何调试Google Apps Script中HtmlService的JavaScript”不重复：原问题未提供最小可复现示例（MCVE），也未说明HtmlOutput的创建方式；
• 与“压缩JavaScript时//@ sourceUrl被移除”不重复：Google Apps Script HtmlService不会压缩代码；
• 与相关jQuery添加JS代码的方案不重复：本场景为HtmlService直接添加代码。

参考资料 #

• 将预处理代码映射到源代码

内容的提问来源于stack exchange，提问作者Wicket