如何直接调试React源码

一、克隆源码

源码地址：github.com/facebook/re… ，使用18.3.1

本地node版本：17.x

git clone https://github.com/facebook/react #克隆源码
cd react
git checkout 18-3-1 #切换到18.3.1版本源码
yarn #安装依赖

二、安装vite

cd packages
npm create vite@4 #使用vite建项目，node17最高支持vite@4
cd ..
yarn # 项目根目录下重新安装依赖，monorepo自动连接inspire包
yarn add vite-plugin-babel -W #vite需要使用babel插件处理源码中的flow和jsx代码

1. packages/inspire下新建vite.config.js,内容如下

import { defineConfig } from 'vite'
import babelPlugin from 'vite-plugin-babel'
import {
    DARK_MODE_DIMMED_WARNING_COLOR,
    DARK_MODE_DIMMED_ERROR_COLOR,
    DARK_MODE_DIMMED_LOG_COLOR,
    LIGHT_MODE_DIMMED_WARNING_COLOR,
    LIGHT_MODE_DIMMED_ERROR_COLOR,
    LIGHT_MODE_DIMMED_LOG_COLOR,
    GITHUB_URL,
    getVersionString,
} from 'react-devtools-extensions/utils';
const NODE_ENV = process?.env?.NODE_ENV;

const __DEV__ = false;

const DEVTOOLS_VERSION = getVersionString();

const EDITOR_URL = process.env.EDITOR_URL || null;
const LOGGING_URL = process.env.LOGGING_URL || null;
export default defineConfig({
    plugins: [
        babelPlugin({
            babelConfig: {
                presets: ['@babel/preset-flow', '@babel/preset-react'] // 处理flow和jsx
            }
        })
    ],
    define: // 全局变量
    {
        __DEV__,
        __EXPERIMENTAL__: true,
        __EXTENSION__: false,
        __PROFILE__: false,
        __TEST__: NODE_ENV === 'test',
        'process.env.DEVTOOLS_PACKAGE': `"react-devtools-core"`,
        'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
        'process.env.EDITOR_URL': EDITOR_URL != null ? `"${EDITOR_URL}"` : null,
        'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
        'process.env.LOGGING_URL': `"${LOGGING_URL}"`,
        'process.env.NODE_ENV': `"${NODE_ENV}"`,
        'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
        'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
        'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"${DARK_MODE_DIMMED_LOG_COLOR}"`,
        'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"${LIGHT_MODE_DIMMED_WARNING_COLOR}"`,
        'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
        'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
    }
});

2. 在react/package.json添加如下命令

3.在packages/inspire/main.js添加react代码

4.替换/react/packages/react-reconciler/src/ReactFiberHostConfig.js为以下内容

export * from 'react-dom/src/client/ReactDOMHostConfig.js'

5.替换packages/shared/ReactSharedInternals.js为以下内容

// import * as React from 'react/src/React.js';
import ReactSharedInternals from 'react/src/ReactSharedInternals.js';
// const ReactSharedInternals =
//   React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;

export default ReactSharedInternals;

6.运行vite, 启动成功

三、配置vscode调试

1. 新建调试文件

2.选择chrome

4.url和当前vite的host和端口一致

5.启动调试

完成就可以使用vscode调试了