12

I want to figure out how a website reloads it's content using AJAX. Therefore i would like to see what JS functions are called in real time because I can't figure out what function is responsible for reloading the page dynamically. How to see all executed functions JS in real time in FF, Chrome, Opera or IE?

Tom Smykowski
  • 25,487
  • 54
  • 159
  • 236
  • 1
    Have you used firebug? Are you aware of its break point features? – Zasz Aug 13 '11 at 09:11
  • 3
    I have firebug. I can't put break point because i don't know what function it is. Have you red my question? Please do it. I need something to see what functions are called not to put break point into a function. – Tom Smykowski Aug 13 '11 at 09:19
  • If that page has jQuery, refer to [this answer](http://stackoverflow.com/questions/743876/list-all-javascript-events-wired-up-on-a-page-using-jquery) to see what functions are wired up to the elemnet causing an ajax call, then, you can use breakpoints and step function to trace it. – Zasz Aug 13 '11 at 09:59

6 Answers6

11

Maybe using the 'profile' button in the firebug console tab can give you an indication of the function(s) that are fired. Furthermore you can tell firebug's console to show xmlhttp requests (expand 'console' at the top of the firebug screen. After that, If an ajax request fires, it should be visible in the console. In the 'post' tab in such a request you may be able to infer the function triggering the request, looking at the parameters.

KooiInc
  • 119,216
  • 31
  • 141
  • 177
  • I'm trying to debug an issue only in IE some sort of infinite loop, but If I have to use Firefox to get a list of methods being called so I at least know where to look that's cool. but when I use the profile button and then load the page, the profiling resets when the new page loads. So how to catch what is run when the page first loads? – stephenbayer Mar 19 '15 at 20:44
3

I think what you want is a feature in Chrome:

find the element that is being reloaded and right click, choose inspect from context menu, then right click the html of the element (in the bottom firebugish pane), in the context menu there are options to:

  • break on subtree modifications
  • break on attributes modifications
  • break on node removal

in your case maybe set "break on subtree modifications" on the body tag would do it?

Article on awesome new dev features in chrome: http://www.elijahmanor.com/2011/08/7-chrome-tips-developers-designers-may.html

Matthew
  • 12,892
  • 6
  • 42
  • 45
1

Following on the answer given in case you have access to the source code. With this regular expression you can do a console.log of all function calls:

search for:

function (.*){

replace with:

function \1 { console.log\(("\1")\);
colonize
  • 13
  • 5
1

Install firebug in FF. Visit this link: http://getfirebug.com/

yasar
  • 13,158
  • 28
  • 95
  • 160
1

I would do a big search and replace on all the file using a regular expression that matches the function names (something like "function (.*)\((.*)\){") and use that to insert a console.log(functionName) at the beginning the function.

So you search for function (.*)\(.*\){ and replace it with function \1 (\2){ console.log("\1"); (Note: Regular expressions are most likely wrong as I didn't check them - you'll need some testing to get it right).

It seems a bit crazy but it should work. I've used that method to debug a Director Lingo project.

Obviously, make sure you backup the whole project before doing the replacement.

laurent
  • 88,262
  • 77
  • 290
  • 428
0

I often using Firefox add-on JavaScript Deobfuscator

https://addons.mozilla.org/en-us/firefox/addon/javascript-deobfuscator/

dam_dam
  • 11