Debugging JavaScript with Breakpoints Tutorial

Here’s a simple JavaScript example that you can run and debug using breakpoints. This code simulates a user interacting with a form, and we’ll set breakpoints to inspect the state of the program during execution. You can use this to step through the code.

Example Code: Debugging a Simple Form Submission

Create a new HTML file and paste the following code into it:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Debugging with Breakpoints</title>
</head>
<body>
    <h1>Simple Form</h1>
    <form id="myForm">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
        <br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <br>
        <button type="submit">Submit</button>
    </form>

    <script>
        // Form submission handler
        document.getElementById('myForm').addEventListener('submit', function(event) {
            event.preventDefault();  // Prevent page refresh

            if (!validateForm()) {
                return;  // Stop if validation fails
            }

            const name = document.getElementById('name').value;
            const email = document.getElementById('email').value;

            console.log('Form submitted with values:');
            console.log('Name:', name);
            console.log('Email:', email);

            // Simulating an asynchronous operation (e.g., saving to a database)
            setTimeout(() => {
                console.log('Data saved successfully!');
            }, 2000);
        });

        // Some simple validation
        function validateForm() {
            const name = document.getElementById('name').value;
            if (name.trim() === '') {
                alert('Name cannot be empty!');
                return false;
            }
            return true;
        }
    </script>
</body>
</html>

How to Debug

Open the Page: Open the HTML file in Google Chrome.
Open DevTools: Right-click anywhere on the page and select Inspect, or press Ctrl + Shift + I (Cmd + Option + I on Mac).
Set Breakpoints:
- Open the Sources tab.
- Find the script under file:// or localhost in the left-hand panel.
- Set breakpoints on the lines where you want to inspect the code. For example:
  - Line 32 (where the form values are logged).
  - Line 38 (inside the setTimeout() callback).
  - Line 44 (inside validateForm(), which the submit handler calls before processing the values).
Interact with the Form: Fill out the form and click Submit. The page won’t refresh due to event.preventDefault().
Step Through the Code:
- The debugger will pause at the breakpoints.
- You can inspect the values of the name and email variables.
- Step through the code line-by-line using the debugging controls in DevTools.

Stepping through the code

⚠️ Note: The recording above was captured with a slightly earlier version of this example that did not yet include the if (!validateForm()) guard, so from the const name = ... line onward the line numbers shown in the recording run four lower than in the current code (for example, the form-values log appears on line 28 in the recording but on line 32 in the file you created). The breakpoint and stepping workflow it demonstrates is unchanged.

For an illustrated walkthrough of pausing at a breakpoint and using the stepping controls, see Pause your code with breakpoints in the Chrome DevTools documentation.