Start with React Developer Tools in the browser to inspect components, props, and state. 2. Set up VSCode debugging with Chrome or Edge using the Debugger for Chrome or Microsoft Edge Tools extension by creating a launch.json configuration that launches the app at http://localhost:3000 with source map support. 3. For server-side React (e.g., Next.js), debug Node.js code by configuring launch.json to run npm dev with node debugging enabled. 4. Use console.log and the debugger; statement strategically for quick, effective checks. 5. Optionally enable source maps in staging via package.json or Webpack config, but avoid this in production for security. Additionally, implement error boundaries to catch and log runtime React errors. Combining browser DevTools with properly configured VSCode debugging ensures seamless client and server-side debugging.

Debugging React applications in VSCode can be smooth and efficient once set up correctly. Here’s how to do it effectively using modern tools and practices.

1. Use the React Developer Tools (Browser-Based)

Before diving into VSCode-specific debugging, always start with React DevTools in the browser (Chrome or Firefox):

• Install the React Developer Tools extension.
• Open DevTools → "Components" and "Profiler" tabs to inspect component hierarchy, props, state, and performance.

This won’t use VSCode directly but is essential for diagnosing UI/state issues quickly.

2. Debug with VSCode Chrome (or Edge) via vscode-edge-devtools or Debugger for Chrome

You can attach VSCode to a running browser instance to set breakpoints in your React code.

Step-by-step setup:

1. Install the extension:

   
   • Go to VSCode Extensions.
   • Install "Debugger for Chrome" (if using Chrome) or "Debugger for Edge".
   • Alternatively, use the newer built-in "Microsoft Edge Tools for VS Code".

2. Make sure your React app is running:

   npm start

   This usually runs on http://localhost:3000.

3. Add a launch configuration:

   • In VSCode, go to Run and Debug (Ctrl Shift D).
   • Click "create a launch.json file".
   • Choose Chrome or Edge.
   • Update the config:

   {
     "version": "0.2.0",
     "configurations": [
       {
         "name": "Debug React in Chrome",
         "type": "chrome",
         "request": "launch",
         "url": "http://localhost:3000",
         "webRoot": "${workspaceFolder}/src",
         "sourceMapPathOverrides": {
           "webpack:///src/*": "${webRoot}/*"
         }
       }
     ]
   }

4. Start debugging:

   • Click the Run and Debug button (green play icon).
   • VSCode will open a new Chrome/Edge window.
   • Set breakpoints in your .js or .tsx files in VSCode — they’ll hit when code executes.

? Tip: Breakpoints work best in files that are properly mapped via source maps (Create React App handles this by default).

3. Debug with VSCode Node.js (for SSR or backend logic)

If you're using React with SSR (e.g., Next.js), you can debug server-side code directly.

Example for Next.js:

1. In launch.json:

   {
     "name": "Debug Next.js",
     "type": "node",
     "request": "launch",
     "runtimeExecutable": "npm",
     "runtimeArgs": ["run", "dev"],
     "port": 9229,
     "cwd": "${workspaceFolder}",
     "console": "integratedTerminal"
   }

2. Start debugging from VSCode — breakpoints in API routes or server-side functions will now work.

4. Use console.log and debugger strategically

Even with advanced tools, simple methods help:

• Insert debugger; in your code:

  useEffect(() => {
    debugger; // Pauses execution in browser when reached
    setData(processData(props.input));
  }, [props.input]);

• Use console.log with labels:

  console.log("User state:", user);

These work out of the box and are often faster for quick checks.

5. Enable Source Maps in Production (Optional)

For debugging minified code in staging environments:

• In package.json, set:

  "generateSourceMaps": true

• Or in Webpack config (if ejected), ensure devtool: 'source-map'.

?? Never enable source maps in production for security reasons unless necessary.

Bonus: Use Error Boundary and Logging

For runtime React errors (e.g., render errors), source maps and browser DevTools are your best bet. Consider adding an error boundary:

class ErrorBoundary extends React.Component {
  componentDidCatch(error, info) {
    console.error("React error:", error, info);
  }
  render() { return this.props.children; }
}

Wrap components to catch and log issues.

Basically, the key is combining browser DevTools with VSCode’s debugging power via proper launch configs. Once set up, you can debug both client and server code seamlessly.

Not complicated — but easy to miss a step.

The above is the detailed content of How to debug React in VSCode. For more information, please follow other related articles on the PHP Chinese website!