Menu
I have changed my coding style with more complex projects to loading pages (And their embedded scripts) "on demand" recently. However, it is difficult to debug those scripts as when they are loaded like:
jQuery.get('/myModularPage', function(html){ /* insert the loaded page into the DOM */ }); or
$('#some-container').load('/myOtherPage'); These scripts run perfectly, but if I'm debugging, how can I set breakpoints in these dynamically loaded pages and scripts?
805
In Visual Studio, if you start your application for debugging (by pressing F5 or using the Start Debugging command in the Debug menu), the debugger is attached automatically. You can also attach the Visual Studio debugger to Internet Explorer when the application is already running.
Add this to your js files where you want it to break:
debugger; Then step into/over/out like any other debugger.
Works for dynamically loaded scripts and pages. Only works in Chrome as far as I know.
54
UPDATE
The accepted form is now with a # (hashtag) rather than @ (at symbol)
The syntax was changed to to avoid conflicts with IE conditional compilation statements and some other issues (thanks to Oleksandr Pshenychnyy and Varunkumar Nagarajan for pointing this out)
//#sourceURL=/path/to/file This can really be any string that helps you identify the block of code.
An additional good point from JMac:
For me, the js file was being displayed in the sources list within a group called "(no domain)". Might be worth mentioning as I missed it at first!
ORIGINAL
I struggled with the above for about a week before running across this article. It really does work perfectly for my development environment (Chrome 22 as I write this).
Firebug also supports developer-named eval() buffers: just add a line to the end of your eval(expression) like:
//@ sourceURL=foo.js
For example, given this simple html document:
<!DOCTYPE html> <html> <body> <p>My page's content</p> <div id="counter"></div> <script type="text/javascript"> //if this page is loaded into the DOM via ajax //the following code can't be debugged //(or even browsed in dev-tools) for(i=0;i<10;i+=1) { document.getElementById('counter').innerText = i; } //but if I add the line below //it will "magically" show up in Dev Tools (or Firebug) //@ sourceURL=/path/to/my/ajaxed/page </script> <body> </html> Things I haven't yet discovered:
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With