debugging 谷歌脚本-错误脚本- userCodeAppPanel -如何找到错误？

ehxuflar 于 2022-11-14 发布在其他

关注(0)|答案(1)|浏览(132)

如何查找脚本错误？ChromeDevTools -控制台：

当我点击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);

出于安全原因，我将代码编号更改为code。
堆栈驱动程序日志记录e错误报告显示无错误。
请提供以上信息，我如何查找错误？

debugging

来源：https://stackoverflow.com/questions/62747729/google-script-error-script-usercodeapppanel-how-to-find-the-error

1条答案

按热度按时间

zmeyuzjn1#

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 .