How to Debug nextjs app in chrome and vscode

This guide provides detailed steps for debugging Next.js applications in Chrome and VSCode, covering the following key areas:

1. Debugging with Chrome DevTools

Step-by-Step Instructions:

a. Launch Next.js Application In the terminal, start your Next.js application in development mode using the following command:

bash
npm run dev

This launches the application on the default port 3000.

b. Open Chrome DevTools Open your application in Chrome (typically at http://localhost:3000), then press F12 or right-click the page and select 'Inspect' to open the developer tools.

c. Debug with Sources Panel Switch to the 'Sources' tab in DevTools. Here, you can view all loaded files. Set breakpoints by clicking on line numbers in the JavaScript code. When execution reaches a breakpoint, it pauses automatically, allowing you to inspect variable values and the call stack.

d. Inspect Console Output Switch to the 'Console' tab to view console.log() outputs, which help you understand the application's flow and current state.

2. Debugging in VSCode

Configuration Instructions:

a. Install Debugger for Chrome Extension Ensure you have installed the Debugger for Chrome extension, which enables direct debugging in VSCode using Chrome's debugging engine.

b. Configure launch.json File In VSCode, open your Next.js project, navigate to the Debug view (the bug icon in the sidebar), click 'Create launch.json file', and select the Chrome environment. Below is a basic configuration example:

json
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

c. Start Debugging Session After configuration, select the newly created configuration in VSCode's Debug view and click the green start button. This opens a new Chrome window with your Next.js application loaded and connected to VSCode's debugger.

d. Set Breakpoints and Inspect Variables In VSCode, set breakpoints directly in the code editor by clicking the blank space to the left of line numbers. When execution hits a breakpoint, it pauses automatically, allowing you to view the call stack, watch expressions, and inspect variables.

Combining Chrome and VSCode

By using Chrome to inspect application behavior and VSCode for source-level breakpoint debugging, you can efficiently combine both tools to enhance debugging efficiency and accuracy. This approach is especially valuable for frontend development, as it leverages VSCode's powerful code editing features alongside Chrome's robust web debugging capabilities.

1. Debugging Next.js in Chrome

To debug a Next.js application in the Chrome browser, we primarily use Chrome's Developer Tools. Here are the steps:

Step 1: Open your Next.js application and run it in the browser.

Step 2: Press F12 or right-click on any page element and select 'Inspect' to open the Developer Tools.

Step 3: Switch to the 'Sources' tab and locate the JavaScript file you need to debug in the file explorer on the left.

Step 4: Click the blank area next to the line numbers to set breakpoints.

Step 5: Refresh the page or trigger breakpoints by performing specific actions; the code execution will pause at the breakpoint, allowing you to inspect variable values and perform step-by-step debugging.

Example: For example, if you want to debug a button click event, set a breakpoint at the beginning of the event handler function. When you click the button, the browser will pause at this breakpoint, enabling you to inspect the event object and related variables.

2. Debugging Next.js in VSCode

Debugging a Next.js application in VSCode requires some configuration. Here are the basic steps:

Step 1: Ensure that next and typescript are installed in your project (if you use TypeScript).

Step 2: Open your Next.js project in VSCode.

Step 3: Create a .vscode folder if it doesn't exist, and create a file named launch.json within it. This file will contain the VSCode debugging configuration.

Step 4: Add the following configuration to your launch.json file:

json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Next: Node",
      "runtimeExecutable": "npm",
      "runtimeArgs": [
        "run",
        "dev"
      ],
      "port": 9229
    }
  ]
}

Step 5: In your package.json file, ensure that your dev script includes the --inspect flag. For example:

json
"scripts": {
  "dev": "next dev --inspect"
}

Step 6: In VSCode, open the 'Run and Debug' view (the play button in the sidebar), select the 'Next: Node' configuration, and click the green play button to start the debugging session.

Step 7: VSCode will launch the Next.js application and attach the debugger. Now you can set breakpoints in your code and begin debugging as usual.

Example: If you want to debug API routes, set a breakpoint in the API file. When the API is requested, VSCode will pause execution at the breakpoint, allowing you to inspect the request and response objects.

By using these two methods, you can effectively debug Next.js applications, ensuring code quality and performance for both client and server sides.