Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

It would also be possible to use chrome for the same. Chrome has a feature where you can specify a parser attribute and make the piece of dynamic JS appear as a file which can then be browsed to and break points set.

the attribute that needs to be set is

//# sourceURL=dynamicScript.js

where dynamicScript.js is the name of the file that should show up in the script file browser.

More information here

Paul Irish also talks about it briefly in his excellent talk on Tooling & The Webapp Development Stack


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.


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.

enter image description here


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

enter image description here


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*).

debug dynamic loading JavaScript in chrome -1


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

debug dynamic loading JavaScript in chrome -1



I'm using google chrome for that purpose.

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

enter image description here

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.


I think you might need to give the eval'd code a "name" like this:

http://blog.getfirebug.com/2009/08/11/give-your-eval-a-name-with-sourceurl/

If you do, I think it's likely the debugger approach from "update 2" should work then.