1

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?

gvo
  • 845
  • 1
  • 14
  • 22
  • 1
    The alert() method is not supposed to show up in the console. You'll have to use console.log in order to log the message in the console. e.g. `console.log('Hi')` Is that what you were trying to do? – Niss Sep 17 '18 at 17:10
  • can you share the screenshot of source tab of your web page? – Ankit Halder Sep 17 '18 at 17:12
  • @ThomasTo. seems to me that OP just can't find the code itself, not that they are expecting stuff to be printed to the console. – VLAZ Sep 17 '18 at 17:21
  • If the JavaScript is inline it won't show separately under Sources because it's part of your HTML file. You would be able to see it in Console -> Elements however. – dikuw Sep 17 '18 at 17:44
  • 2
    To add to @Michael 's comment, the Sources tab will show the assets for which an http request was made; since the browser only needs to request your html file in this example, and there is no separate JS file to request, only the html file is in Sources and JS does not show up separately. https://developers.google.com/web/tools/chrome-devtools/sources – hcs Sep 17 '18 at 18:23

1 Answers1

2

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
Barmar
  • 741,623
  • 53
  • 500
  • 612
  • Adding this line works well on Chrome, but not on Firefox (didn't try any other browser so far). To be noted : I didn't saw anything with a VM:### either in Chrome or Firefox sources – gvo Sep 18 '18 at 08:29
  • Yeah, things like this are browser-specific extensions. – Barmar Sep 18 '18 at 08:30
  • Thanks, since I now understand where the problem comes from, I can relate this useful topic for potential alternatives to the browser specific solution : https://stackoverflow.com/questions/690781/debugging-scripts-added-via-jquery-getscript-function – gvo Sep 18 '18 at 08:37