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;
});

Use a debugger and set a breakpoint? How else would you go about debugging? — Bergi, Mar 21 '13 at 18:22
Have you tried setting a breakpoint in chrome dev tools at this point. You could also use conosle.log — Mark Meyer, Mar 21 '13 at 18:23
possible duplicate of [How do you launch the javascript debugger in Google Chrome?](http://stackoverflow.com/q/66420/1048572) — Bergi, Mar 21 '13 at 18:25
You tagged the question with the answer. Set a *breakpoint* in the debugger! — epascarello, Mar 21 '13 at 18:25
console.log() is definitely my friend, but I'd love to be able to manipulate the values, or use functions defined in document.ready(). — Don P, Mar 21 '13 at 18:25
Agree with @NuclearGhost, setting a breakpoint will display the value of variables in the current scope. — victmo, Mar 21 '13 at 18:25
For some reason I'm not allowed to add an answer but the point the OP is making (which is not covered in the "already answered" link, nor by any of these answers) is that in order to find the code to put a breakpoint in, you must first load the page, which means the document.ready events have already been processed, so it's too late to put a breakpoint. The solution I have found (in chrome at least) is to load the page, make a break point, and then re-load the page. as the scripts are reloaded, the breakpoints you put in last time are re-established, so they will fire again. — Andy, Jul 08 '16 at 15:59

score 6 · Accepted Answer · answered Mar 21 '13 at 18:29

6

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.

answered Mar 21 '13 at 18:29

Phillip Schmidt

8,805
3
43
67

You can also use the F10 call-by-call functionality without breakpoints. – The Onin Oct 22 '16 at 14:22

score 3 · Answer 2 · answered Mar 21 '13 at 18:58

3

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

answered Mar 21 '13 at 18:58

ncubica

8,169
9
54
72

score 1 · Answer 3 · answered Mar 21 '13 at 18:33

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.

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

3 Answers3