React Native在VS Code debuger调试全流程终极指南

“为什么我的断点总是不生效？” —— 这是 React Native 开发者使用 VS Code 调试时最常见的痛点。本文将手把手带你掌握 VS Code 调试 React Native 的完整方案，从零配置到高级技巧，彻底解决你的调试难题。

一、环境准备：搭建完美调试基础

1.1 必备工具安装

首先确保你的开发环境已经安装以下工具：

• VS Code（最新稳定版）
• React Native Tools 扩展（微软官方出品）
• React Native 项目（0.60+ 版本）

# 检查React Native版本
npx react-native --version

# 安装VS Code扩展
code --install-extension msjsdiag.vscode-react-native

1.2 项目结构验证

确保你的项目结构符合标准：

my-app/
├── android/
├── ios/
├── node_modules/
├── src/
├── .vscode/          # 即将创建
├── app.json
└── package.json

二、基础配置：launch.json 详解

2.1 创建调试配置文件

1. 在项目根目录创建 .vscode 文件夹
2. 新建 launch.json 文件
3. 添加基础配置：

{
   
   
  "version": "0.2.0",
  "configurations": [
    {
   
   
      "name": "Debug Android",
      "cwd": "${workspaceFolder}",
      "type": "reactnative",
      "request": "launch",
      "platform": "android"
    },
    {
   
   
      "name": "Debug iOS",
      "cwd": "${workspaceFolder}",
      "type": "reactnative",
      "request": "launch",
      "platform": "ios"
    },
    {
   
   
      "name": "Attach to packager",
      "cwd": "${workspaceFolder}",
      "type": "reactnative",
      "request": "attach"
    }
  ]
}

2.2 配置参数深度解析