When developing web apps, I am using Chrome it has a great JS debugger unfortunately there is a small problem. Modern Web Applications contain a lot of dynamically loaded Javascript on the page. One common scenario is to load a modal with asynchronously loaded content. If this content would be a normal page with some Javascript. Well we have a problem, we are not able to examine the scrpts and set breakpoints on this page. It wont work on default.

Fortunately there is a solution. Chrome provides simple parser command which can tag dynamically loaded JS.

<script type="text/javascript">
....
//@ sourceURL=createOrder.js 
</script>

This line tells the chrome debugger that this whole script inside the script tag should be interpreted as a createOrder.js file. You can find the file on the debugger list and easily set up breakpoints or check the code.

If you are working with Asp.Net MVC and Razor Engine use Write function

 

<script type="text/javascript">
....
@{Write("//@ sourceURL=createOrder.js");}
</script>