CODEWITHSUNDEEP
javascriptgoogle-chrome-devtoolsfirefox-developer-tools
gvo
gvo

Reputation: 855

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

I have a web page which does navigation using templates and filling / showing them depending of user interactions.

It works quite well, but the templates contains some JS included with them. This JS code is correctly loaded (in the example below, it provides an alert saying "Hi") when the page is just loaded. However, I don't see the code within the debugger console, either in Chrome or Firefox.

I've provided a minimal example below, where I see in the console > Source, under localhost, only my HTML page and jquery.min.js in the asset/js sub-folder.

Here is my 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>

And here is my Javascript : 

alert("Hi");

Any idea?

Upvotes: 1

Views: 2974

Answers (1)

Barmar
Barmar

Reputation: 780724

Since testouille.js is in a <template>, it's not loaded automatically by the browser when the page is loaded.

When you clone the template and append it to a regular DIV, jQuery emulates loading the file using $.getScript(). In the Chrome debugger, code that's loaded this way will be shown in a VM:#### filename (where #### is an arbitrary number) in Sources, rather than with its actual filename.

You can make the debugger give this a filename by putting the following comment in testouille.js:

//# sourceURL=testouille.js

Upvotes: 2

Related Questions