怎么调试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项目中,GA黄金甲项目在另外一个文件中),导致类型治理泛起问题, 这是基于开发项目的界说治理,差别编辑器体现差别.
vscode这是由于vscode默认剖析ts的,可是不会默熟悉别flow的语法,以是这种的代码会剖析成ts语法,就会报错,我们在项目增添 .vscode/settings.json 增添设置:
{ "javascript.validate.enable": false }
登录后复制
即体现正常,不再报错:
webstorm
webstrom则是无法找到界说
更多关于VSCode的相关知识,请会见:vscode基础教程!
以上就是怎么调试React源码?多种工具下的调试要领先容的详细内容,更多请关注本网内其它相关文章!