How to debug Ajax request

Question

I have a Rails application which generate HTML like this:

<a href="/ReadItLater/stock?qid=5618572&amp" data-remote="true">stock it</a>

When I click on this link in browser I can get information about AJAX request on Firebug, on Console tab. I can see the respond of the request:

$("#stock_5618528").hide();

But how can I set breakpoint on this line and debug this code?

Solution 1

If you change your response to include the debugger keyword it should hit that as a breakpoint. So in this case the response would be:

debugger;
$("#stock_5618528").hide();

Obviously don't forget to remove that when it goes live. :D

Solution 2

Also, since you're using firebug.

Try using using `console.log()'. It is extremely handy.

You can view your output after your script has executed rather than interrupting execution and then having to deal with ajax timeouts.

All you might need to do is..

$.ajax({
  url: "...",
  success: function(response){
    console.log(response);
  }
});

Solution 3

InfernalBadger responded with a solution for front-end/script debugging. If you're interested in debugging at the server side (ie in the Rails code), do the following

1. Start webrick with:

rails server --debugger

1. And add debugger in the rails code/view where you'd like it to breakpoint, reaching which you'll get a console with all the environment and context loaded up!

<% debugger %>

Comments

[ceth]

Hmm.. I add this line to AJAX response but the debugger didn't launch. May be I need to register debugger in the OS?

[Richard Dalton]

@demas If you are running firefox with firebug installed, make sure you have the script tab enabled and it should break at the debugger keyword if it hits it.