vscode 配置调试react源码，超简单，一分钟

克隆react源码并运行yarn下载依赖

配置 .vscode/launch.json

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
  {
    "type": "node",
    "name": "vscode-jest-tests",
    "request": "launch",
    "program": "${workspaceFolder}/node_modules/jest/bin/jest",
    "args": [
      "${file}",
      "--config",
      "./scripts/jest/config.source.js",
      "--runInBand"
    ],
    "cwd": "${workspaceFolder}",
    "console": "integratedTerminal",
    "internalConsoleOptions": "neverOpen",
    "disableOptimisticBPs": true,
    "env": {
      "NODE_ENV": "development"
    }
  }
  ]
}

安装vsocde Flow Language Support 插件，设置flow .vscode/settings.json

{
  "javascript.validate.enable": false,
  "flow.pathToFlow": "${workspaceRoot}/node_modules/.bin/flow"
}

安装vscode jest 插件，修改 react项目 scripts/jest/preprocessor.js 源码

在 babelOptions 对象中添加 sourceMaps: 'both'字段

添加断点，运行调试按钮

可以了