Console.log debugging wastes time. Learning how to debug React app in VSCode gives you breakpoints, variable inspection, and step-through execution that actually pinpoint problems.
Most developers spend 50% of their time debugging. The right tools cut that in half.
Visual Studio Code’s built-in debugger connects directly to Chrome DevTools, letting you pause execution, inspect component state, and trace errors through the call stack without leaving your editor.
This guide walks you through setting up launch configurations, placing breakpoints in React components, debugging hooks like useState and useEffect, and fixing common source map issues.
Works with Create React App, Vite, and Next.js projects.
How to Debug React App in VSCode
Debugging a React app in VSCode is the process of identifying and fixing runtime errors in your JavaScript code using Visual Studio Code’s built-in debugger and Chrome DevTools integration.
You need this when components render incorrectly, state updates fail silently, or error messages appear in your browser console.
This guide covers 7 steps requiring 15-20 minutes and basic familiarity with React components and hooks.
VSCode has become the preferred web development IDE for React developers because of its debugging capabilities, extension ecosystem, and tight integration with Node.js.
Unlike console.log debugging, using breakpoints and variable inspection gives you complete visibility into your application’s execution flow.
Prerequisites
Before you start, make sure you have these tools installed and configured:
- Visual Studio Code version 1.85 or later
- Node.js version 18.x or later with npm
- A React project (Create React App, Vite, or Next.js)
- Chrome or Microsoft Edge browser
- Basic understanding of JSX and React hooks
Time required: 15-20 minutes for initial setup.
If you’re new to Visual Studio Code, check out what VSCode is and how it differs from other code editors.
Step One: How Do You Install the Required VSCode Extensions?
Install the JavaScript Debugger extension from the VS Code Marketplace by pressing Ctrl+Shift+X, searching for “JavaScript Debugger,” and clicking Install.
This extension comes pre-installed in VSCode 1.85+, but verify it’s enabled in your extensions list.
Required Extensions
The JavaScript Debugger (Nightly) extension handles Chrome and Edge debugging sessions automatically.
React Developer Tools is a separate browser extension you install in Chrome for component state inspection.
Optional Extensions
- ESLint – catches syntax errors before runtime
- Prettier – keeps code formatted consistently
- Error Lens – displays error messages inline
These tools support linting in programming and help catch issues before you even start a debug session.
Step Two: How Do You Create a Launch Configuration File?
Create a launch.json file by pressing Ctrl+Shift+D to open the Run and Debug panel, then click “create a launch.json file” and select “Chrome” from the dropdown.
VSCode generates the file in your project’s .vscode folder.
Launch.json Configuration for Create React App
“ { "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}/src" } ] } `
The webRoot setting tells VSCode where your source files live.
Set this to “${workspaceFolder}/src” for Create React App projects.
Launch.json Configuration for Vite
` { "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:5173", "webRoot": "${workspaceFolder}/src" } ] } `
Vite uses port 5173 by default instead of 3000.
Update the url property to match your development server configuration.
Source Maps Configuration
Source maps connect your compiled JavaScript back to the original React source code.
Create React App and Vite enable source maps automatically in development mode.
If breakpoints appear grayed out, add “sourceMapPathOverrides” to your launch.json to fix path resolution issues.
Step Three: Where Do You Set Breakpoints in React Components?
Click in the gutter (left margin) next to any line number in your .jsx or .tsx file to set a breakpoint, indicated by a red dot.
The debugger pauses execution when code reaches that line.
Best Locations for Breakpoints
- Inside useEffect callbacks to inspect when effects run
- Event handler functions like onClick or onSubmit
- Inside useState setter callbacks
- The first line of functional components to check props
- Before and after API calls
Conditional Breakpoints
Right-click a breakpoint and select “Edit Breakpoint” to add a condition.
Enter a JavaScript expression like count > 5 or user.id === “123”.
The debugger only pauses when the condition evaluates to true.
Logpoints
Logpoints print messages to the debug console without stopping execution.
Right-click the gutter, select “Add Logpoint,” and enter a message like User clicked: {buttonName}.
This approach beats scattering console.log statements throughout your codebase during front-end development.
Step Four: How Do You Start the Debug Session?
Start your React development server first by running npm start or npm run dev in the terminal, then press F5 in VSCode to launch the debug session.
Chrome opens automatically and connects to your running application.
Starting the Development Server
Open the integrated terminal with Ctrl+ and run your start command.
Wait until you see “Compiled successfully” or “Local: http://localhost:3000” before starting the debugger.
If you’re unfamiliar with the integrated terminal, learn how to open terminal in VSCode.
Launching the Debugger
Press F5 or click the green play button in the Run and Debug panel.
The debug toolbar appears at the top of VSCode with controls for Continue, Step Over, Step Into, Step Out, Restart, and Stop.
Attaching to an Existing Browser
Change “request” from “launch” to “attach” in launch.json if Chrome is already running.
Start Chrome with remote debugging enabled: chrome --remote-debugging-port=9222.
Step Five: How Do You Inspect Variables and Component State?
When execution pauses at a breakpoint, the Variables panel on the left shows all local variables, closure variables, and global scope values with their current data.
Hover over any variable in the editor to see its value in a tooltip.
Variables Panel
Expand objects and arrays by clicking the arrow next to them.
The panel groups variables into Local, Closure, and Global sections for easier navigation.
Watch Expressions
Add custom watch expressions by clicking the + icon in the Watch panel.
Enter any JavaScript expression like users.filter(u => u.active) or props.items.length to monitor specific values.
Call Stack Navigation
The Call Stack panel shows the execution path that led to the current breakpoint.
Click any frame to jump to that location and inspect variables at that point in the stack trace.
Step Six: How Do You Use the Debug Console for React?
Open the Debug Console with Ctrl+Shift+Y to execute JavaScript code in the context of your paused application, letting you test fixes before modifying source files.
Evaluating Expressions
Type any variable name to see its current value.
Execute function calls like setCount(0) or console.log(state) directly in the console.
Modifying State at Runtime
Change variable values by typing assignments like count = 10 in the debug console.
Call React state setters to test how your component responds to different values without restarting.
Step Seven: How Do You Debug React Hooks and Context?
Set breakpoints inside useEffect callbacks, useMemo functions, and custom hooks to trace when and why they execute during the component lifecycle.
Debugging useEffect
Place a breakpoint on the first line inside useEffect to catch every execution.
Check the dependency array values in the Variables panel to understand what triggered the effect.
Debugging useState
The state value appears in the Variables panel under the component’s closure scope.
Set a breakpoint in the setter callback (if using functional updates) to inspect previous state.
Debugging Context Providers
Add breakpoints in your Context Provider component where state changes occur.
Trace context value changes by watching the value prop passed to the Provider.
Verification
Confirm your debugging setup works correctly by testing these scenarios:
- Set a breakpoint in a component; verify execution pauses when the component renders
- Check that source maps show your original JSX code, not compiled JavaScript
- Hover over a state variable; confirm the tooltip displays the current value
- Add a watch expression; verify it updates as you step through code
- Test hot reload; confirm the debugger stays connected after file changes
If breakpoints work but show wrong file locations, your webRoot path needs adjustment.
Troubleshooting
Breakpoints Not Hitting
Issue: Breakpoints appear grayed out or the debugger skips them entirely.
Solution: Add sourceMapPathOverrides to launch.json:
“ "sourceMapPathOverrides": { "webpack:///src/": "${webRoot}/" } `
Rebuild your project with npm run build to regenerate source maps.
Source Maps Not Loading
Issue: Debugger shows compiled code instead of original React source.
Solution: Verify GENERATESOURCEMAP=true in your .env file for Create React App projects.
For Vite, check that build.sourcemap is set to true in vite.config.js.
Chrome Not Launching
Issue: Debug session starts but no browser window opens.
Solution: Add “runtimeExecutable” to launch.json with the full path to Chrome:
` "runtimeExecutable": "C:/Program Files/Google/Chrome/Application/chrome.exe" `
On macOS: “/Applications/Google Chrome.app/Contents/MacOS/Google Chrome”
Hot Reload Breaking Debug Session
Issue: Debugger disconnects when files change during hot reload.
Solution: Add “restart”: true to your launch configuration to automatically reconnect after rebuilds.
Alternatively, use “attach” mode instead of “launch” for more stable connections.
Wrong Port Configuration
Issue: Debugger connects but shows a blank page or wrong application.
Solution: Match the url in launch.json to your actual dev server port: 3000 for Create React App, 5173 for Vite, 3000 for Next.js.
Alternative Methods
Using React Developer Tools
Install the React Developer Tools browser extension from Chrome Web Store.
Opens Components and Profiler tabs in Chrome DevTools showing component hierarchy, props, state, and hooks values without VSCode.
Best for quick component state inspection during development.
Using console.log with Structured Output
Use console.table() for arrays and objects, console.group() for nested logs, and console.time() for performance checks.
Faster for simple debugging tasks but clutters your codebase over time.
Part of standard types of software testing workflows during development.
Using the debugger Statement
Add debugger; anywhere in your code to create a programmatic breakpoint.
Chrome DevTools pauses execution at that line when the console is open.
Related Processes
Once you’ve mastered React debugging in VSCode, consider these related workflows:
- Setting up ESLint – catch errors before runtime with error squiggles in VSCode
- Configuring TypeScript – add type checking to catch bugs during development
- Running Jest tests – debug unit testing sessions with similar launch configurations
- Setting up Prettier – keep code formatted using Prettier in VSCode
- Performance profiling – use React Profiler to identify render bottlenecks
A solid debugging workflow fits within your broader software development process alongside code review and defect tracking.
FAQ on How To Debug React App In VSCode
Why are my breakpoints not working in React?
Breakpoints fail when source maps don’t match your source files. Check that your webRoot path in launch.json points to the correct folder, usually “${workspaceFolder}/src” for most React projects.
Do I need an extension to debug React in VSCode?
No. VSCode 1.85+ includes the JavaScript Debugger by default. It handles Chrome and Edge debugging automatically. Install React Developer Tools separately in your browser for component inspection.
How do I debug React hooks like useState and useEffect?
Set breakpoints inside hook callbacks. For useEffect, place the breakpoint on the first line inside the function. Check the Variables panel to see current state values and dependency array contents.
What port should I use in launch.json?
Match your development server port. Create React App uses 3000, Vite uses 5173, Next.js uses 3000. Check your terminal output after running npm start to confirm the exact port.
Can I debug React and Node.js backend simultaneously?
Yes. Create a compound launch configuration in launch.json with separate entries for Chrome and Node.js. VSCode runs both debug sessions together, letting you step through frontend and backend code.
How do I inspect React component state while debugging?
Pause at a breakpoint inside your component. Open the Variables panel and expand the Closure section. State variables from useState appear there. Add them to Watch for continuous monitoring.
Why does my debugger show compiled code instead of JSX?
Source maps aren’t loading correctly. Add GENERATESOURCEMAP=true to your .env file. For Vite, set build.sourcemap to true in vite.config.js. Restart your development server after changes.
How do I debug React in VSCode without Chrome?
Use Microsoft Edge instead. Change “type” from “chrome” to “msedge” in launch.json. Edge uses the same debugging protocol. Firefox requires a separate extension called Debugger for Firefox.
What is the difference between launch and attach mode?
Launch mode opens a new browser window controlled by VSCode. Attach mode connects to an existing browser started with remote debugging enabled. Use attach for more stable hot reload connections.
How do I debug API calls in my React app?
Set breakpoints in your fetch or axios call handlers. Use the Network tab in Chrome DevTools alongside VSCode debugging. Check response data in the Variables panel after the await completes.
Conclusion
Knowing how to debug React app in VSCode transforms how you find and fix errors. No more guessing with console.log scattered everywhere.
You now have a complete debugging workflow: launch.json configuration, strategic breakpoint placement, watch expressions for monitoring state, and the debug console for testing fixes on the fly.
The setup takes 15 minutes. The time saved on every bug compounds.
Start with simple breakpoints in your event handlers. Then move to debugging useEffect dependencies and context providers as you get comfortable with the tools.
When runtime errors appear, you’ll step through the code instead of staring at stack traces. That’s the difference between debugging and guessing.
Many of his resources are available on various design marketplaces and for free on Codepen.
Over the years, he's worked with a range of clients and contributed to design publications like Design Your Way, Designmodo, WebDesignerDepot, WPDean, Speckyboy, and Slider Revolution among others.
- CSS Cheat Sheet - May 18, 2026
- How to Set Up VSCode for Python Development - May 16, 2026
- How Using One Platform Can Simplify Order Fulfillment - May 15, 2026
