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?
3
-
1Have you used firebug? Are you aware of its break point features?Zasz– Zasz2011-08-13 09:11:07 +00:00Commented Aug 13, 2011 at 9:11
-
3I 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– Tom Smykowski2011-08-13 09:19:24 +00:00Commented Aug 13, 2011 at 9:19
-
If that page has jQuery, refer to this answer 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– Zasz2011-08-13 09:59:24 +00:00Commented Aug 13, 2011 at 9:59
Add a comment
|
6 Answers
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.
1 Comment
stephenbayer
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?
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
Comments
Install firebug in FF. Visit this link: http://getfirebug.com/
2 Comments
Tom Smykowski
I have Firebug installed for months. I can't find it there. Maybe you can find it?
Raynos
@tomaszs your looking for the profiler. Run that, it tracks all functions
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.
4 Comments
Tom Smykowski
Nice idea if you have access to the project files. And what if you don't?
laurent
I wonder why would someone want to debug a site if they don't have access to the code?
Tom Smykowski
sorry, i wrote it wrong: i don't have easy access to site files (you know html, css, js)
light24bulbs
if they are hacking it dude
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")\);
Comments
I often using Firefox add-on JavaScript Deobfuscator
https://addons.mozilla.org/en-us/firefox/addon/javascript-deobfuscator/
