最近我了解到可以使用以下命令显示添加到 DOM / Dev Tools Elements 选项卡的 JavaScript 代码document.write, eval等到 Chrome 开发工具和其他浏览器的源代码面板。这是通过在结束前添加评论来完成的<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));
}
Related
-
如何在 Google 脚本中的 HtmlService 中调试 JavaScript https://stackoverflow.com/q/26518902/1595451。不是重复的，因为 OP 没有包含 MCVE，没有提到如何
HtmlOutput被创建。最常见的情况是使用HtmlService.createHtmlOutpuFromFile(filename)但在这种情况下我使用HtmlService.createHtmlOutput().append(string).
-
缩小 javascript 时， //@ sourceUrl 被删除 https://stackoverflow.com/q/27934624/1595451。不重复，因为在 Google Apps 脚本 HtmlService 中不会最小化代码。
-
https://stackoverflow.com/a/13129905/1595451 https://stackoverflow.com/a/13129905/1595451。不重复，因为 JavaScript 代码是使用 jQuery 添加的，在本例中，代码是使用 Google Apps 脚本 HtmlService 添加的
参考
- 将预处理代码映射到源代码 https://developer.chrome.com/docs/devtools/javascript/source-maps/
而不是一次添加整个客户端代码（使用单个HtmlOutput.append），将代码至少分成两部分。第一个应该包含从顶部到第一个的代码/ of //# sourceURL=javascript.js，第二部分应该添加其余的代码。这里的关键是避免//同时添加（而不是使用单个HtmlOutput.append使用两个）。
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));
}
我还在原型 SPA 中尝试过这一点，使用模板化 HTML，从多个库中提取多个文件（每个库有一组或两组三个 .html 文件、索引、css 和 js，每个席位对应于至少有一个表单和一个的模块）列表视图。最终HtmlOutput拥有 > 20 个<stript>，所有内容都正确映射到源代码。
映射到源代码的 JavaScript 代码将如下图所示：
右键单击文件名并选择Copy link address将返回类似这样的内容：
https://n-hyluq5mztdwi5brxcufwcb4wfggugjbof23qiby-0lu-script.googleusercontent.com/javascript.js
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
