SyntaxFix

[javascript] Javascript Debugging line by line using Google Chrome

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.

Examples related to javascript

• need to add a class to an element • How to make a variable accessible outside a function? • Hide Signs that Meteor.js was Used • How to create a showdown.js markdown extension • Please help me convert this script to a simple image slider • Highlight Anchor Links when user manually scrolls? • Summing radio input values • How to execute an action before close metro app WinJS • javascript, for loop defines a dynamic variable name • Getting all files in directory with ajax

Examples related to jquery

• How to make a variable accessible outside a function? • Jquery assiging class to th in a table • Please help me convert this script to a simple image slider • Highlight Anchor Links when user manually scrolls? • Getting all files in directory with ajax • Bootstrap 4 multiselect dropdown • Cross-Origin Read Blocking (CORB) • bootstrap 4 file input doesn't show the file name • Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource • how to remove json object key and value.?

Examples related to debugging

• How do I enable logging for Spring Security? • How to run or debug php on Visual Studio Code (VSCode) • How do you debug React Native? • How do I debug "Error: spawn ENOENT" on node.js? • How can I inspect the file system of a failed `docker build`? • Swift: print() vs println() vs NSLog() • JavaScript console.log causes error: "Synchronous XMLHttpRequest on the main thread is deprecated..." • How to debug Spring Boot application with Eclipse? • Unfortunately MyApp has stopped. How can I solve this? • 500 internal server error, how to debug

Examples related to google-chrome

• SessionNotCreatedException: Message: session not created: This version of ChromeDriver only supports Chrome version 81 • SameSite warning Chrome 77 • What's the net::ERR_HTTP2_PROTOCOL_ERROR about? • session not created: This version of ChromeDriver only supports Chrome version 74 error with ChromeDriver Chrome using Selenium • Jupyter Notebook not saving: '_xsrf' argument missing from post • How to fix 'Unchecked runtime.lastError: The message port closed before a response was received' chrome issue? • Selenium: WebDriverException:Chrome failed to start: crashed as google-chrome is no longer running so ChromeDriver is assuming that Chrome has crashed • WebDriverException: unknown error: DevToolsActivePort file doesn't exist while trying to initiate Chrome Browser • How to make audio autoplay on chrome • How to handle "Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first." on Desktop with Chrome 66?

Examples related to google-chrome-devtools

• When adding a Javascript library, Chrome complains about a missing source map, why? • Chrome dev tools fails to show response even the content returned has header Content-Type:text/html; charset=UTF-8 • Is there any way to debug chrome in any IOS device • Is it possible to open developer tools console in Chrome on Android phone? • What does ==$0 (double equals dollar zero) mean in Chrome Developer Tools? • Understanding Chrome network log "Stalled" state • How to use color picker (eye dropper)? • Bizarre Error in Chrome Developer Console - Failed to load resource: net::ERR_CACHE_MISS • Google Chromecast sender error if Chromecast extension is not installed or using incognito • How to open the Chrome Developer Tools in a new window?