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

Question

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

它运行良好，但模板包含一些 JS。当页面刚刚加载时，此JS代码已正确加载(在下面的示例中，它提供了一条警报，指出"Hi"(。但是，我在调试器控制台中看不到代码，无论是在 Chrome 还是 Firefox 中。

我在下面提供了一个最小的例子，我在控制台>源，在 localhost 下，只有我的 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