时间戳

首页 > 解决方案 > JS 源在 Chrome/Firefox 调试器中不可见，但在页面中正确加载

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

问题描述

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

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

我在下面提供了一个最小示例，在控制台 > 源中，在 localhost 下，只有我的 HTML 页面和资产/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");

任何的想法？

标签： javascriptgoogle-chrome-devtoolsfirefox-developer-tools

解决方案

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

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

你可以让调试器给它一个文件名，方法是把下面的注释放在testouille.js：

//# sourceURL=testouille.js

推荐阅读