Menu
I have a web application which dynamically adds javascript files based on what the user chooses as options using ajax in real time to avoid refreshing the screen.
I am now trying to debug these dynamically added javascript files and have tried both Google Chrome's developer tools and Firebug's pluggin for Firefox, and have noticed that the dynamically added javascript "files" do not appear, so I can't select them to add breakpoints etc.
So, is there a solution for this, i.e. debugging dynamically added javascript files?
356
2) Reload the web page in Chrome and open DevTools. Now once the javascript gets loaded dynamically, you will be able to see it under (no domain) in Sources tab. You will be able to put a breakpoint in it. Next time you reload the page, code will stop at this breakpoint.
Javascript files can be debugged in Chrome Browser the same way you debug HTML/CSS files i.e using Chrome Developer Tools which can be launched via following shortcuts as per the OS you use.
What makes JavaScript great is also what makes it frustrating to debug. Its asynchronous nature makes it easy to manipulate the DOM in response to user events, but it also makes it difficult to locate problems.
Check out sourceURL which is a way to indicate to the DevTools that should treat eval'd strings as real files. It does exactly what you're looking for.
At the end of the string to be evaled, leave comment of this form:
//# sourceURL=app/js/myapp.js
From there, Chrome DevTools (and Firebug) will treat this as a "real file".
Much more explanation here and HTML5 Rocks has an article and a sourceURL demo.
155
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
