Google 脚本 - 错误脚本 - userCodeAppPanel - 如何找到错误?

如何找到脚本错误? ChromeDevTools - 控制台:

ChromeDevTools - Console

当我点击 userCodePanel 并且预格式显示以下源时:

<!doctype html>
    <style nonce="dqs2Iw0xA4xt/uhPgBmJpw">
        html, body, iframe {
            border: 0;
            display: block;
            height: 100%;
            margin: 0;
            padding: 0;
            width: 100%;
    }

    iframe#userHtmlFrame {
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }
</style>
<meta name="chromevox" content-script="no">
<script type="text/javascript" src="/static/macros/client/js/**code**-mae_html_user_bin_i18n_mae_html_user__pt_br.js" nonce="**code**/**code**"></script>
<script nonce="**code**/**code**">
maeInit_(true);

出于安全原因,我将代码编号更改为代码

Stackdriver Logging e 错误报告显示没有错误。

请问以上信息如何查找错误?

stack overflow Google Script - Error Script - userCodeAppPanel - how to find the error?
原文答案

答案:

作者头像

Chrome Dev Tools doesn't know where to take you because the JavaScript code is added dynamically.

One option is to map the client side code to Source Code. Applying this to Google Apps Script web applications is a bit hacky but I have been using it in the last few days and it's working very well.

The goal is to add //# sourceURL=filename.js (use whatever filename you want) before every closing <script> but as JavaScript comments are stripped out by HtmlService we have to use HtmlService.HtmlOutput.append two times, one to add the top html content dow to the first / of the referrend comment, the second to add /# sourceURL=filename.js, the closing <script> and the code after it.

The way to apply the above depends on how your script is creating the HtmlService.HtmlOutput object. Few days ago I posted here a self-answered question including a "mcve" --> How to map client-side code to Source Code

Besides the benefit of being able to see the JavaScript code as Source Code in Chrome dev tools, when the console shows logs and errors related to this code, instead of userCodeAppPanel we will see filename.js (or whatever name you used). Clicking the file name will take to the the corresponding line code in Source Code.

The following screenshot shows how a error message is show in the Chrome Dev Tools, in this case showing navagacion.js (sic) instead of userCodeAppPanel.

References