Is possible to debug dynamic loading JavaScript by some debugger like WebKit, FireBug or IE8 Developer Tool?

Question

From my recent question, I already created some JavaScript function for dynamic loading partial view. So, I can\'t debug any dynamic loading JavaScript. Because all of loade

Answer 1

For current Google Chrome browser or other modern browsers, you can easily search for any evaluated code with developer tool like the following images.

1. Simulate some dynamic loading file.

2. Press Ctrl+Shift+F in source tab and search for the above function.

Create some breakpoint and execute function to test it.

Answer 2

Try adding a "debugger;" statement in the javascript you're adding dynamically. This should cause it to halt at that line regardless of breakpoint settings.

Answer 3

Yes, It is (now) possible to debug dynamically loaded JavaScript using Google Chrome!

No need to add extra debugger; or any other attribute for dynamically loaded JS file. Just follow the below steps to debug:

Method 1:

My tech lead just showed a super-easy way to debug dynamically loaded Javascript methods.

1. Open Console of chrome and write the name of the method and hit enter.
   In my case, it is GetAdvancedSearchConditonRowNew
   If the JS method has loaded then it will show the definition of the method.

---

---

2. Click on the definition of the method and the whole JS file will be opened for debugging :)

---

---

Method 2:

As an example, I'm loading JS file when I click on a button using ajaxcall.

1. Open network tab in google chrome dev tools
2. Click on a control (ex. button) which loads some javascript file and calls some javascript function.
3. observe network tab and look for that JS function (in my case it is RetrieveAllTags?_=1451974716935)
4. Hover over its initiater and you'll find your dynamically loaded JS file(with prefix VM*).

---

---

5. Click on that VM* file to open.
6. Put debugger whereever you want in that file :D

---

---

Answer 4

I'm using google chrome for that purpose.

In chrome at scripts tab you can enable 'pause on all exceptions'

And then put somewhere in your code line try{throw ''} catch(e){}. Chrome will stop execution when it reaches this line.

EDIT: modified image so it would be clearer what I'm talking about.

Answer 5

Using Google Chrome (or Safari) Developers Tool, you can run JavaScript line by line.

Developer Tool > Scripts > Choose which script you want to debug > pause sign on the right side Or set breakpoints by click the line number

Answer 6

In Firebug, you should be able to see that script after the page is loaded and the script is injected. When you do, you can set a breakpoint in the appropriate place, and it'll be preserved when you refresh the page.