我有一个网页，它使用模板进行导航并根据用户交互填充/显示它们。
它工作得很好，但模板包含一些 JS。当页面刚刚加载时，此 JS 代码已正确加载(在下面的示例中，它提供了一个提示“Hi”)。但是，无论是在 Chrome 还是 Firefox 中，我都没有在调试器控制台中看到代码。
我在下面提供了一个最小的示例，我在控制台 > 源代码中看到，在本地主机下，只有我的 HTML 页面和 asset/js 子文件夹中的 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>
这是我的 Javascript:
alert("Hi");
有什么想法吗？
最佳答案
自 testouille.js在<template> ，它不会在页面加载时由浏览器自动加载。
当您克隆模板并将其附加到常规 DIV 时，jQuery 会使用 $.getScript() 模拟加载文件.在 Chrome 调试器中，以这种方式加载的代码将显示在 VM:#### 中。源中的文件名(其中 #### 是任意数字)，而不是其实际文件名。
您可以通过在 testouille.js 中添加以下注释来让调试器为其指定一个文件名:
//# sourceURL=testouille.js
关于javascript - JS 源在 Chrome/Firefox 调试器中不可见，但在页面中正确加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52372616/