Step 1: Open Chrome Developer Tools
First, you need to open the Developer Tools in your Chrome browser. You can do this in one of three ways:
- Right-click on any part of the page, and select “Inspect” from the context menu.
- Use the keyboard shortcut Ctrl + Shift + I (Windows/Linux) or Cmd + Option + I (Mac).
- Click on the three-dot menu in the top-right corner of Chrome, go to “More tools” and select “Developer tools.”
Step 2: Open the Sources tab
Step 3: Pause the script execution
Clicking this button while a script is running will pause the script execution. Once you’ve paused the script, you can step through it line by line by clicking the “Step over” button, which looks like a blue square with a white arrow pointing to the right.
Step 4: Set breakpoints (optional)
When the script reaches the breakpoint, execution will pause, allowing you to inspect the current state of the script and step through it line by line.
Step 5: Resume script execution
To resume the script execution, click the “Resume script execution” button, which looks like a blue octagon with a white triangle pointing to the right. This will allow the script to continue running from the point where it was paused.