debugging web pages (Firebug, IE F12 tools)

Question

I would like to know how I can use a debugger (Firebug or IE's F12 tools) to trace step by step the code I am receiving from a webpage once I POST.

My problem is that I fill out a form, and after POSTing the form, I get a response that has some redirects and other stuff apparently happening there. I would like to know how can I simply halt execution upon POST and go step by step on the javascript code that is happening, and see exactly how the redirects are formed.

The thing is I cannot place any breakpoints because I don't have the page's response before I even POST it...

I hope I was clear enough about my issue.

Thanks in advance.

Answer 1

You can add a debugger; statement as the first line of your JavaScript code, which launches a debugger if one is registered.

Therefore, all you need to do is ensure Firebug is launched before the page is loaded, and the JavaScript execution should be halted to allow you to step through the program.

Another (hacky) way you could do this is to place an alert() or similar as the first line; an alert() blocks the program flow until the prompt is closed. Without closing the alert, you could place a breakpoint on the next line of executable code after the alert() , then OK the alert, and then debug away.

Answer 2

Assuming you have IE9 installed:

1. Press F12.
2. Click on the network tab
3. Click "Start capturing"
4. Execute your script
5. You will see all the responses and redirecs there.