Assuming you're running on a Windows machine...
- Hit the
F12key - Select the
Scripts, orSources, 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...
F8Continue: Will continue until the next breakpointF10Step over: Steps over next function call (won't enter the library)F11Step into: Steps into the next function call (will enter the library)Shift + F11Step 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.
Answer from Richard on Stack OverflowVideos
Assuming you're running on a Windows machine...
- Hit the
F12key - Select the
Scripts, orSources, 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...
F8Continue: Will continue until the next breakpointF10Step over: Steps over next function call (won't enter the library)F11Step into: Steps into the next function call (will enter the library)Shift + F11Step 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.
...How can I step through my javascript code line by line using Google Chromes developer tools without it going into javascript libraries?...
For the record: At this time (Feb/2015) both Google Chrome and Firefox have exactly what you (and I) need to avoid going inside libraries and scripts, and go beyond the code that we are interested, It's called Black Boxing:
When you blackbox a source file, the debugger will not jump into that file when stepping through code you're debugging.
More info:
- Chrome: Blackbox JavaScript Source Files
- Firefox: Black box libraries in the Debugger
I'm on Chrome 3.0.195.27, and I'm able to use the following keys:
F8 -> Run
F10 -> Step over
F11 -> Step into
Make sure you have focus on the JavaScript console.
Use the pause, step over, step into, step out buttons at the right end of the inspector, below the search field and above the watch/call stack section.
Firebug is one of the most popular tools for this purpose.
All modern browsers come with some form of a built-in JavaScript debugging application. The details of these will be covered on the relevant technologies web pages. My personal preference for debugging JavaScript is Firebug in Firefox. I'm not saying Firebug is better than any other; it depends on your personal preference and you should probably test your site in all browsers anyway (my personal first choice is always Firebug).
I'll cover some of the high-level solutions below, using Firebug as an example:
Firefox
Firefox comes with with its own inbuilt JavaScript debugging tool, but I would recommend you install the Firebug add on. This provides several additional features based on the basic version that are handy. I'm going to only talk about Firebug here.
Once Firebug is installed you can access it like below:
Firstly if you right click on any element you can Inspect Element with Firebug:
Clicking this will open up the Firebug pane at the bottom of the browser:
Firebug provides several features but the one we're interested in is the script tab. Clicking the script tab opens this window:
Obviously, to debug you need to click reload:
You can now add breakpoints by clicking the line to the left of the piece of JavaScript code you want to add the breakpoint to:
When your breakpoint is hit, it will look like below:
You can also add watch variables and generally do everything that you would expect in a modern debugging tool.
For more information on the various options offered in Firebug, check out the Firebug FAQ.
Chrome
Chrome also has its own in built JavaScript debugging option, which works in a very similar way, right click, inspect element, etc.. Have a look at Chrome Developer Tools. I generally find the stack traces in Chrome better than Firebug.
Internet Explorer
If you're developing in .NET and using Visual Studio using the web development environment you can debug JavaScript code directly by placing breakpoints, etc. Your JavaScript code looks exactly the same as if you were debugging your C# or VB.NET code.
If you don't have this, Internet Explorer also provides all of the tools shown above. Annoyingly, instead of having the right click inspect element features of Chrome or Firefox, you access the developer tools by pressing F12. This question covers most of the points.