如何配置VSCode以使用Chrome调试工具调试React-Native？

算力阿峰

2026-5-26

Hey there! I know setting up React Native debugging in VS Code with Chrome can feel a bit daunting at first, especially since there’s less step-by-step guidance out there compared to React.js or Angular. Let me walk you through a simple, newbie-friendly guide to get you debugging smoothly:

Prerequisites

First, make sure you have these basics covered:

Node.js (LTS version recommended) installed on your machine
Either React Native CLI or Expo CLI set up (both work for this guide)
VS Code installed, with the React Native Tools extension added (search for it in the VS Code extensions marketplace)
Google Chrome browser installed

Step 1: Set Up Your React Native Project (Skip if you already have one)

If you’re starting fresh, create a new project:

For bare React Native: npx react-native init MyDebugApp
For Expo: npx create-expo-app MyDebugApp

Then navigate into your project folder:
cd MyDebugApp

Step 2: Enable Remote JS Debugging in Your App

First, launch your app on a simulator/emulator or physical device:

For Android: npx react-native run-android (or npm run android if using Expo)
For iOS: npx react-native run-ios (or npm run ios for Expo)

Once the app loads, open the React Native Developer Menu:

Android: Shake the device, or press Ctrl + M (Windows/Linux) / Cmd + M (Mac)
iOS: Shake the device, or press Cmd + D (Mac)

From the menu, select Debug JS Remotely. This will automatically open a Chrome tab at http://localhost:8081/debugger-ui/ – leave this tab open!

Step 3: Configure VS Code Debug Launch Settings

Open your project in VS Code, then:

Press Ctrl + Shift + D (Windows/Linux) or Cmd + Shift + D (Mac) to open the Debug panel
Click the "create a launch.json file" link (if you don’t have one already)
Select React Native from the list of environments

VS Code will generate a launch.json file with default configurations. You can keep it as-is, but here’s a breakdown of the key ones:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Attach to Chrome",
      "type": "chrome",
      "request": "attach",
      "port": 9222,
      "url": "http://localhost:8081/debugger-ui/",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "React Native: Debug Android",
      "type": "reactnative",
      "request": "launch",
      "platform": "android"
    },
    {
      "name": "React Native: Debug iOS",
      "type": "reactnative",
      "request": "launch",
      "platform": "ios"
    }
  ]
}

Attach to Chrome: Connects VS Code to the already open Chrome debugging tab (great if you already launched your app)
Debug Android/iOS: Launches your app and attaches the debugger in one step

Step 4: Start Debugging in VS Code

Now you’re ready to debug:

If you used Step 2 to launch your app and open the Chrome debugger tab, select Attach to Chrome from the Debug panel dropdown
Click the green play button to start the debugger
Set a breakpoint in your code (click the gutter to the left of any line in files like App.js)
Interact with your app – when the code hits your breakpoint, VS Code will pause execution, letting you inspect variables, step through code, and more!

Quick Troubleshooting Tips for Newbies

Chrome debugger tab didn’t open? Manually navigate to http://localhost:8081/debugger-ui/ in Chrome
Breakpoints aren’t hitting? Make sure the Chrome debugger tab is active (not minimized or in the background), and double-check that webRoot in launch.json points to your project folder
Port 8081 is occupied? Start your React Native server on a different port with npx react-native start --port 8082, then update the url in launch.json to http://localhost:8082/debugger-ui/
Can’t open the Developer Menu? For Android, run adb shell input keyevent 82 in your terminal; for iOS simulators, go to the Hardware menu and select Shake Gesture

内容的提问来源于stack exchange，提问作者arshbot