JS 源代码在 Chrome/Firefox 调试器中不可见，但已正确加载到页面中

Question

我有一个网页，它使用模板进行导航并根据用户交互填充/显示它们。

效果很好，但模板包含一些 JS。当页面刚刚加载时，此 JS 代码已正确加载（在下面的示例中，它提供了一个提示 "Hi"）。但是，我没有在 Chrome 或 Firefox 中的调试器控制台中看到代码。

我在下面提供了一个最小示例，我在控制台 > 源代码中看到，在本地主机下，只有我的 HTML 页面和 jquery.min.js 在 asset/js 子文件夹中.

这是我的HTML：

<script src="assets/js/jquery.min.js"></script>
<template id="my_screen">
    Hello
    <script type="application/javascript" src="assets/js/testouille.js"></script>
</template>

<section class="container">
    <div class="my_screen hide"></div>
</section>


<script type="application/javascript">
    function useTemplate(elem) {
        var myTemplate = $('#' + elem),
            normalContent = $('.' + elem),
            clonedTemplate = myTemplate.html();
        normalContent.empty();
        normalContent.append(clonedTemplate);
    }

    $(document).ready(function() {
        useTemplate('my_screen');
    }
    )
</script>

这是我的 Javascript：

alert("Hi");

有什么想法吗？

Answer 1

由于 testouille.js 在 <template> 中，因此在加载页面时浏览器不会自动加载它。

当您克隆模板并将其附加到常规 DIV 时，jQuery 模拟使用 $.getScript() 加载文件。在 Chrome 调试器中，以这种方式加载的代码将显示在源代码中的 VM:#### 文件名（其中 #### 是任意数字），而不是其实际文件名。

您可以通过在 testouille.js:

中添加以下注释来让调试器为其指定一个文件名

//# sourceURL=testouille.js

JS 源代码在 Chrome/Firefox 调试器中不可见，但已正确加载到页面中

JS source not visible in Chrome/Firefox debuggers, but correctly loaded in the page

javascript

google-chrome-devtools

firefox-developer-tools