JavaScript Debugging Stepping through code
Example
Once you've paused execution on a breakpoint, you may want to follow execution line-by-line to observe what happens. Open your browser's Developer Tools and look for the Execution Control icons. (This example uses the icons in Google Chrome, but they'll be similar in other browsers.)
Resume: Unpause execution. Shorcut:F8(Chrome, Firefox)
Step Over: Run the next line of code. If that line contains a function call, run the whole function and move to the next line, rather than jumping to wherever the function is defined. Shortcut : F10(Chrome, Firefox, IE/Edge), F6(Safari)
Step Into: Run the next line of code. If that line contains a function call, jump into the function and pause there. Shortcut : F11(Chrome, Firefox, IE/Edge), F7(Safari)
Step Out: Run the rest of the current function, jump back to where the function was called from, and pause at the next statement there. Shortcut : Shift + F11(Chrome, Firefox, IE/Edge), F8(Safari)
Use these in conjunction with the Call Stack, which will tell you which function you're currently inside of, which function called that function, and so forth.
See Google's guide on "How to Step Through the Code" for more details and advice.
Links to browser shortcut key documentation:
