react源码如何调试

调试React源码的方法

克隆React源码仓库

从GitHub上克隆React的官方仓库：

git clone https://github.com/facebook/react.git
cd react

安装依赖并构建

使用Yarn安装依赖并构建React源码：

yarn
yarn build

构建完成后，所有包会生成在build目录中。

使用本地构建的React

在测试项目中，通过yarn link或修改package.json引用本地构建的React：

cd build/node_modules/react
yarn link
cd build/node_modules/react-dom
yarn link

然后在测试项目中运行：

yarn link react react-dom

启用调试模式

在构建时启用调试模式以保留源码映射（source maps）：

yarn build react/index,react-dom/index --type=UMD_DEV

使用Chrome DevTools调试

在Chrome中打开开发者工具，通过源码映射直接调试React源码。确保在Sources面板中能查看到react和react-dom的源码文件。

使用VSCode调试

配置VSCode的launch.json文件，附加到浏览器或Node.js进程：

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

修改源码并测试

直接在react仓库的packages目录中修改源码，重新构建后测试项目会自动使用修改后的版本。通过yarn build命令增量构建以节省时间。

使用测试用例调试

运行React的测试用例验证修改：

yarn test

通过yarn test --watch启动监视模式，方便迭代测试。