Next.js - Debugging

Quiz

Debugging is the process of identifying and fixing errors in the code. In Next.js, debugging can be done using browser developer tools or using Visual Studio Code. In this chapter, we will discuss how to debug Next.js applications using browser developer tools and Visual Studio Code.

Debugging with Browser DevTools

Most of the browsers provide developer tools section that can be used to debug and test web applications. Consider following code snippet for Next.js Home page. In the code, we defined a debugger statement when the count reaches greater than 5.

// /app/page.tsx

"use client"

import { useState } from "react";

export default function Home() {
    const [count, setCount] = useState(0);

    if (count > 5) {
        debugger; // Triggers when count exceeds 5
    }

    return (
        <div>
            <h2> Hello, Next.js! </h2>
            <p> Current Count: {count} </p>
            <button onClick={() => setCount(count + 1)}>
                Increment Count
            </button>
        </div>
    );
}

To debug this client side code, start your development server as usual by running next dev, npm run dev, or yarn dev. Once the server starts, open http://localhost:3000.

In the output, open developer tool of your browser.

Open Developer Tools (Ctrl+Shift+J on Windows/Linux, Cmd+Shift+I on macOS)
Go to the Sources tab ( Debugger tab in Firefox browser )

Any time the client-side code reaches debugger statement (ie, count greater than 6), the code execution will pause and that file will appear in the debug area. See the output below.

Debugging with VS Code

Vs code have inbuilt debugging tools for most of programming languages including Node.js. For activating debugging, open the debugging tab (near to extension tab) in VS code. In this tab you will see an option to "create a launch.json file", click on the link. This will create a ./.vscode/launch.json file, which can be used to customize debugging in VS code.

Now, consider the following code in Next.js home component, where we defined a for loop with breakpoint inside. The code will stop running at breakpoint, and we will print the value of variables in VS code console.

export default function Home() {
    var variable = 34;

    // Example of a loop where you can set breakpoints
    for (let i = 0; i < 10; i++) {
        // Define a breakpoint here to inspect the loop execution
        console.log(`Iteration: ${i}, Variable: ${variable}`);
        
        // Modify the variable to test variable changes during debugging
        variable += i;
        
        // Conditional statement to test conditional breakpoints
        if (i === 5) {
            console.log("Reached iteration 5");
        }
    }

    return (
        <div>
            <h2>Hello, Next.js!</h2>
        </div>
    );
}

When your code is ready, go to the Debug panel, select a launch configuration, then press F5 or select Debug: Start Debugging from the Command Palette to start your debugging session. In the VS code terminal, variable that are logged in console at the breakpoint in code. See the image of console below.

Print Page