How can I debug javascript contained in $(document).ready()?

Question

I'm trying to debug some js in the browser (Chrome specifically). How can I check what value is set for some_data and new_data?

I realized due to variable scope being confined to functions, some_data and new_data don't exist after the document ready() was executed.

$(document).ready(function(){
   var some_data = [4, 8, 15, 16, 23, 42];
       var new_data = some_data * 2;
});

Solution 1

Use developer tools. If you're using chrome, hit F12, go to sources, find the file your javascript is in, find your code, set a breakpoint (by clicking to the left of the line you want the breakpoint on), and hit F10 to execute line by line. You can just hover over the variable names and it'll give you the current values.

Solution 2

my two cents ...

write the word debugger inside of the code... and will generate a breakpoints instantly, if you hit (ctrl + i) will show you the debugger controls...

best

Solution 3

You can use developer tool bar in IE, Chrome. For firefox use Firebug, this is a Firefox add-on. For Safari use inspect element. All of most browser support below key:

F10- execute line by line(step over next function call)
F11- (step into next function call)
F8- Pause script execution.

Comments

[The Onin]

You can also use the F10 call-by-call functionality without breakpoints.