Javascript Debugging line by line using Google Chrome
debugging, google-chrome, google-chrome-devtools, javascript, jquery
Solution
Assuming you're running on a Windows machine...
- Hit the `F12` key
- Select the `Scripts`, or `Sources`, tab in the developer tools
- Click the little folder icon in the top level
- Select your JavaScript file
- Add a breakpoint by clicking on the line number on the left (adds a little blue marker)
- Execute your JavaScript
Then during execution debugging you can do a handful of stepping motions...
- `F8` Continue: Will continue until the next breakpoint
- `F10` Step over: Steps over next function call (won't enter the library)
- `F11` Step into: Steps into the next function call (will enter the library)
- `Shift + F11` Step out: Steps out of the current function
Update
After reading your updated post; to debug your code I would recommend temporarily using the jQuery Development Source Code. Although this doesn't directly solve your problem, it will allow you to debug more easily. For what you're trying to achieve I believe you'll need to step-in to the library, so hopefully the production code should help you decipher what's happening.
Problem
How can I step through my javascript code line by line using Google Chromes developer tools without it going into javascript libraries? For example, I am heavily using jQuery on my site, and I just want to debug the jQuery I have written, and not the javascript/jquery within the jquery libraries. How do I only step through my own jquery/javascript and not have to step through the millions of lines in the jquery libraries? So if I have the following: ``` function getTabFrame() { $.ajax({ url: 'get_tab_frame.aspx?rand=' + Math.random(), type: 'GET', dataType: 'json', error: function(xhr, status, error) { //alert('Error: ' + status + '\nError Text: ' + error + '\nResponse Text: ' + xhr.responseText); }, success: function(data) { $.each(data, function(index, item) { // do something here }); } }); } ``` if I place the breakpoint at `$.ajax({`, if I them start debugging that it where it stops, if I then press F11, it goes straight into the jQuery libraries. I don't want that to happen, I want it to go to the next line which is `url: 'get_tab_frame.aspx?rand=' + Math.random(),`. I have tried pressing F10 instead, but that goes straight to the closing `}` of the function. And F5 just goes to the next breakpoint without stepping through each line one by one.