如何将客户端代码映射到源代码答案

【问题标题】：How to map client-side code to Source Code如何将客户端代码映射到源代码
【发布时间】：2022-10-13 12:12:06
【问题描述】：

最近我了解到可以将使用document.write、eval 等添加的JavaScript 代码显示到Chrome Dev Tools 和其他浏览器的Source 面板中。这是通过在结束 <script> 标记之前添加注释来完成的：

<script>
...

//# sourceURL=filename.js
</script>

我试过了，但是 HtmlService 没有将评论添加到浏览器中。 Google Apps 脚本客户端代码如何显示在“源”面板中？

下面是我添加sourceURL 的尝试，如上图所示代码.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));
}

有关的

How to go about debugging JavaScript in the HtmlService in Google Scripts
When minifying javascript, //@ sourceUrl is removed。不是重复的，因为在 Google Apps Script HtmlService 中不会最小化代码。
https://stackoverflow.com/a/13129905/1595451。不是重复的，因为 JavaScript 代码是使用 jQuery 添加的，在这种情况下，代码是使用 Google Apps Script HtmlService 添加的

参考

Map Preprocessed Code to Source Code

【问题讨论】：

标签： google-apps-script web-applications source-maps

【解决方案1】：

与其一次性添加整个客户端代码，不如将其拆分为至少两部分。第一个应将代码从顶部添加到//# sourceURL=javascript.js 的第一个/，第二部分应添加其余代码。这里的关键是避免同时添加//。

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)
  }
  /`)
  .append(`/# 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));
}

【讨论】：