怎么调试React源码？多种工具下的调试要领先容
怎么调试react源码？下面本篇文章带各人聊聊多种工具下的调试react源码的要领，先容一下在孝顺者、create-react-app、vite项目中怎样debugger react的真实源码，希望对各人有所资助！
clone React
将Reactclone到外地，并装置依赖.
git clone https://github.com/facebook/react.git
登录后复制
编译项目
若是只是通过简朴的yarn build，并不会天生sourcemap, 这不是我们想要的，我们需要编译泛起代编辑器所需的sourcemap举行映射到现实源码举行调试 。
目今react项目并无法通过简朴增添参数天生sourcemap，我们需要修改scripts/rollup/build.js下的部分设置 【推荐学习：vscode教程、编程教学】
①: 修改 sourcemap 为 true②：注释部分无法天生sourcemap的插件
ok，看起来许多，但着实大致都连在一起(353-355, 387-415), 注释掉了几个插件，此时我们可以举行build了
yarn build
登录后复制
注重: 若是build失败，提醒你需要装置jdk，凭证报错装置即可 。
乐效果果如下：
举行debugger
我们凭证官方文档得知基础开发文件目录在 /fixtures/packaging/babel-standalone/dev.html中，于是我们凭证该html先举行简朴的debug设置 。
vscode
1、建设一个launch.json
2、修改launch.json设置
{
// 使用 IntelliSense 相知趣关属性 。
// 悬停以审查现有属性的形貌 。
// 欲相识更多信息，请会见: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Open dev.html",
// 这里路径可能纷歧样 做统一调解 修改为如下
"file": "${workspaceFolder}/fixtures/packaging/babel-standalone/dev.html"
}
]
}
登录后复制
然后在源码打上断点，点击翻开debug即可看到运行到源码乐成.
注重：此时我们已经有了sourcemap，直接在/packages/react-dom或者/packages/react会运行到代码打上断点
webstrom
webstrom的十分简朴，在dev.html右键举行调试dev.html即可:
如上面的案例已经知足你的大部分的源码调试需求，并且我们也可以通过增添一些组件或者hook来举行调试:
若是你着实想在真实项目中举行源码阅读，可以继续往下阅读 。
在create-react-app中debug
我们平时大多都基于create-react-app或者vite来运行项目，我们可以通过npm link来举行对源码的链接 。
上面的案例适合react开发者使用并且已经知足你的小部分需求，可是我们平时大多都基于create-react-app或者vite来运行项目，我们可以通过npm link来链接一下即可 。
①: 建设一个create-react-app项目
②: 在React项目中将 react,react-dom链接到全局.
注重: 需要凭证你现实目今处于的位置去执行，总而言之就是到build/node_modules/react和build/node_modules/react-dom划分执行npm link就行啦.
cd build/node_modules/react && npm link
登录后复制
如下就乐成了一个:
再把react-dom也link吧.
cd .. && cd react-dom && npm link
登录后复制
③: 在create-react-app的项目中link react与react-dom
npm link react react-dom
登录后复制
大功小成，接下来最先正式的debugger.
vscode怎样debugger
官方已经给出部分文档, 参考文档: 文档
先启动项目 yarn start
增添launch.json设置: 文档
注重:
1、若是你项目端口举行了修改，需要把上方的端口也做修改.
2、官方提供的是edge浏览器，若是你想改谷歌浏览器只需要把type修改为chrome
笔者的设置如下:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "调试creat-react-app源码",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
}
]
}
登录后复制
找个位置打上断点举行调试
③、④为我打上断点的位置，点击 ⑤ 即可看到进入源码啦(可能要多点几下)
至此：我们已经大功告成，可以举行源码调试 。
webstrom怎样debugger
webstorm就显得十分简朴，参考官方文档: 文档
打上断点
启动项目 yarn start
使用按键翻开调试面板, 文档
调试React vite项目
和上方一致，也是通过link
总结：
调试源码的逻辑焦点在于sourcemap，可是我们不难发明其中保存一些问题:
1、目今我们跨项目举行调试（源码在react项目中，我们的项目在另外一个文件中），导致类型治理泛起问题, 这是基于开发项目的界说治理，差别编辑器体现差别.
vscode
这是由于vscode默认剖析ts的，可是不会默熟悉别flow的语法，以是这种的代码会剖析成ts语法，就会报错，我们在项目增添 .vscode/settings.json 增添设置:
{
"javascript.validate.enable": false
}
登录后复制
即体现正常，不再报错:
webstorm
webstrom则是无法找到界说
更多关于VSCode的相关知识，请会见：vscode基础教程！
以上就是怎么调试React源码？多种工具下的调试要领先容的详细内容，更多请关注本网内其它相关文章！
