3

On a website I'm trying to find out the part which is called when I select in the first select box in "State/UT" and which subsequently fills the "District/City" select box.

I'm using Firebug on Firefox and have turned on breakpoints in all the functions within the WebResource.axd file. I've also tried the Break on Next option in Firebug, but it takes me to some minified code in the ScriptResource.axd.

I want to catch the AJAX call's returned data in "District/City" so that I can take of VIEWSTATE and EVENTVALIDATION values to chain next call through POST submission using PHP.

I'm unable to find the AJAX callback handler part. How to find it?

The onchange handler for the selectbox has:

javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$ddlSate\',\'\')', 0)

But the script execution does not halt in this function when I set a breakpoint in it.

Sebastian Zartner
  • 18,808
  • 10
  • 90
  • 132
user5858
  • 1,082
  • 4
  • 39
  • 79
  • Put a breakpoint in `__doPostBack`. – Bergi Feb 23 '15 at 10:31
  • @Bergi I've already mentioned .. it does not stop in there when I select in "State/UT" select box. – user5858 Feb 23 '15 at 10:32
  • I too am having issues debugging sections of the code in Firefox and Chrome. Is your question about this issue specifically, or are you more-interested in learning something from the code? – Alexander O'Mara Feb 26 '15 at 06:47
  • Yes it'd be great to learn why I'm also not able to debug it. It does not seem to be working properly. So my question is about both. – user5858 Feb 26 '15 at 12:05
  • This code is auto generated by asp.net ajax library, it is not very flexible for customization. But I am not sure why do you want to submit using php? Can you please explain? – Aman B Mar 04 '15 at 09:33

2 Answers2

2

The Chrome DevTools have a very useful way of stopping the script execution in this situation. Within the Elements panel you can right-click on any node and select Break On... within the context menu. It has several options, but for this case Subtree modifications is the right way to start (the AJAX response is an HTML snippet, so there is a great probability that JavaScript will change the webpage's DOM).

Here is stack trace:

JavaScript call stack

f._onReadyStateChange binds our AJAX's ready state event. It can be proven by its _url variable visible in debugger. I didn't explore what is happening there. Anyway, e._updatePanel() inserts HTML from the response into the DOM at line 1158:

b.innerHTML = g

Note that this is the line number of the formatted script, while the actual script is minified.

Community
  • 1
  • 1
Boris Zagoruiko
  • 12,705
  • 15
  • 47
  • 79
  • Note that Firebug was the first tool to have those [Break on ... features](https://getfirebug.com/wiki/index.php/HTML_Panel#Context_Menu) for DOM elements and it still has [a few more Break On ... features](https://getfirebug.com/wiki/index.php/Break_On_...) than other devtools. – Sebastian Zartner Feb 03 '16 at 07:17
0

Firebug's Net panel has a Break On XHR option, which helps you to locate where the request happens.

When that option is enabled, the script execution will break at the point where the XMLHttpRequest's send() function is called.

A few lines up (at line 4221) you will find the response handler function (called _onReadyStateChange) being assigned to the request's onreadystatechange property.

Search for the function definition in the code and set a breakpoint after the check for .readyState === 4 (meaning the request has completed).

When you then select something from the drop-down list, your execution will halt at that point. Then you're able to see the response text within the Watch side panel.

Sebastian Zartner
  • 18,808
  • 10
  • 90
  • 132