如果这个项目对你有帮助,欢迎点个Star支持作者!

访问地址:https://terry-su.github.io/debug-react-source-code/example/react-16.13.1

优势是可修改源码,比如在源码中添加注释。 使用步骤:

1 . 选择要调试的React版本对应分支,然后点击下载压缩包。

版本列表(持续更新):

• debug-react-17.0.1
• debug-react-17.0.0
• debug-react-16.14.0
• debug-react-16.13.1
• debug-react-16.6.0

2 . 将压缩包解压后,用vscode打开该文件夹。vscode需安装Debugger for Chrome插件,用于在vscode对源码添加断点

3 . 安装依赖后,开启服务

npm install

npm start

4 . 在源码中添加断点,按F5启动调试即可

目录结构为:

/react.development/
/react-dom.development/
/babel.js
/dependency-main.html
/dependency-react.html
/dependency-react-dom.html
/index.html
/index.js

其中,index.js即为调试入口文件。

"另辟蹊径搭建阅读React源码调试环境-支持所有React版本断点调试细分文件"