Ajax'd Javascript in dev tools

Honestly I'm mostly writing this as a note to my self since I have learnt about and then forgotten this particular trick several times over the last few years.

If you're loading javascript through ajax (quite common when working with ASP.NET MVC) then you can give a hint to the browser which enables it to open it in the dev tools with a specific file name. Just add //# sourceURL=filename.js before the closing </script> tag.

e.g.

<script>
    $(function() {
        console.log("wibble")
    })

    //# sourceURL=wibble.js
</script>

From the browser's dev tools you should now be able to open this file by searching for "wibble.js" (Ctrl+P brings up the search)

Comments

[Ben Dowen]

Nice trick thanks for sharing.