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

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

它工作得很好，但是模板中包含一些JS。当页面刚刚加载时，这个JS代码被正确加载（在下面的示例中，它提供了一个警告，说“嗨”）。但是，无论是在Chrome还是Firefox中，我都看不到调试器控制台中的代码

我在下面提供了一个简单的示例，在console>Source中的localhost下，在asset/js子文件夹中只看到我的HTML页面和jquery.min.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>

---

有什么想法吗？

因为

testouille.js

在

中，所以加载页面时浏览器不会自动加载它

克隆模板并将其附加到常规DIV时，jQuery将使用

$.getScript（）

模拟加载文件。在Chrome调试器中，以这种方式加载的代码将显示在源代码中的

VM:#####

文件名（其中

####

是一个任意数），而不是其实际文件名

通过在

testouille.js

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

//# sourceURL=testouille.js

---

alert（）方法不应该出现在控制台中。您必须使用console.log才能在控制台中记录消息。e、 g.

console.log（'Hi'）

这就是你想要做的吗？你能分享你网页上源代码标签的截图吗？@ThomasTo。在我看来，OP只是找不到代码本身，而不是他们希望将内容打印到控制台。如果JavaScript是内联的，它不会单独显示在源代码下，因为它是HTML文件的一部分。不过，你可以在控制台->元素中看到它。要添加到@Michael的注释中，Sources选项卡将显示http请求所针对的资产；因为在本例中浏览器只需要请求html文件，并且没有单独的JS文件可请求，所以只有html文件在源代码中，JS不会单独显示。添加这一行在Chrome上效果很好，但在Firefox上效果不好（到目前为止还没有尝试任何其他浏览器）。需要注意的是：我没有在Chrome或Firefox sourcesYeah中看到任何关于VM的内容：######，这类内容都是特定于浏览器的扩展。谢谢，因为我现在了解了问题的来源，我可以将这个有用的主题与特定于浏览器的解决方案的潜在替代方案联系起来：

//# sourceURL=testouille.js