Javascript Debugging line by line using Google Chrome

by

Assuming you’re running on a Windows machine…

  1. Hit the F12 key
  2. Select the Scripts, or Sources, tab in the developer tools
  3. Click the little folder icon in the top level
  4. Select your JavaScript file
  5. Add a breakpoint by clicking on the line number on the left (adds a little blue marker)
  6. 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.

More Related Contents:

  1. How do you launch the JavaScript debugger in Google Chrome?
  2. how to set DOM Breakpoints in chrome
  3. How to find what code is run by a button or element in Chrome using Developer Tools
  4. Chrome debugging – break on next click event
  5. Chrome developer tools do not show all JavaScript files any more
  6. Colors in JavaScript console
  7. jQuery’s jquery-1.10.2.min.map is triggering a 404 (Not Found)
  8. jqGrid does not render correctly in Chrome/Chrome Frame
  9. Jquery load() only working in firefox?
  10. $ Variable (Dollar Sign) in Chrome?
  11. Breakpoint on property change
  12. How to set a JavaScript breakpoint from code in Chrome?
  13. JavaScript: Is there a way to get Chrome to break on all errors?
  14. How to disable JavaScript in Chrome Developer Tools?
  15. Prevent contenteditable adding on ENTER – Chrome
  16. AJAX request to local file system not working in Chrome? [duplicate]
  17. What is the source of the double-dollar sign selector query function in Chrome/Firefox?
  18. How to get list of network requests done by HTML
  19. Proper way to reset a GIF animation with display:none on Chrome
  20. jQuery in Chrome returns “block” instead of “inline”
  21. Disable source maps in Chrome DevTools
  22. Can’t trigger click with jQuery in a Chrome extension
  23. In a Chrome Extension content script, must I wait for document.ready before processing the document?
  24. Function as Google Chrome bookmark
  25. How can I stop jQuery.ajax() from logging failures to the console?
  26. Choppy/Laggy scroll event on Chrome and IE
  27. Force hide address bar in Chrome on Android
  28. Programmatically accessing function scope using Chrome DevTools console
  29. XMLHttpRequest; Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource [duplicate]
  30. Circumventing Chrome Access-control-allow-origin on the local file system?

Leave a Comment