第
React源码调试方式
目录正文断点调试搜索定位ChromeDevtools调试sourcemapnpm下载react包插件注释调试React最初源码关联react源码项目总结
正文
什么？调试React源码还有优雅和不优雅之分？
别着急，我们先来听个故事：
东东是一名前端工程师，主要用React技术栈，用了多年之后想深入一下，所以最近开始看React源码。
断点调试
他把react和react-dom包下载了下来，在项目里引入，开发服务跑起来后，打开ChromeDevtools打断点调试。
这样调试了一段时间之后，他有了一些困惑：
这样调试是可以的，但是总感觉和源码有段距离，因为调试的是react-dom.development.js
搜索定位
而源码里这些逻辑是分散在不同的包里的，所以就算搞懂了逻辑，也不知道这些逻辑在哪些包里，只能靠搜索来定位。
所以他就在想，是不是有更好的调试方式，能够调试React最初的源码呢？
于是，他跑来问我：光哥，你调试React源码会有这些问题么？你是怎么调试的呀？
我说，确实，我最开始也是调试的react-dom.development.js，但是现在已经能直接调试React最初的源码了，而且是在VSCode里调试的，点击调用栈能直接打开对应的React源码文件并定位到对应行列号：
哇哦，这就是我想要的调试效果，这是怎么做到的呀。
想实现这样的调试效果确实还有点复杂，我们一点点来看：
首先，我们要做到在VSCode里调试React项目，而不是在ChromeDevtools里，这样才能做到直接打开对应的文件：
用VSCode调试React项目
我们用create-react-app创建一个react项目，然后npmrunstart跑起来。
ChromeDevtools调试
这时候浏览器访问就可以用ChromeDevtools调试了：
但我们的目标是在VSCode里调试，所以要添加一个VSCode的debugger配置：
在根目录下建一个.vscode/launch.json的文件，添加一个chrome类型的调试配置，输入调试的url。
然后点击debug启动：
这时候就可以在VSCode里直接打断点调试了：
用VSCode调试肯定会比ChromeDevtools方便一些。但这不是我们最主要的目的，现在调试的依然是react-dom.development.js：
那怎么调试react最初的源码呢？
这就涉及到sourcemap的作用了：
sourcemap
JS代码经过编译，会产生目标代码，但同时也会产生sourcemap。sourcemap的作用就是映射目标代码中的位置和源码中的位置。
比如源码中的第3行第5列的代码对应着编译后的第1行第10列的代码。
类似这样的映射有很多，经过编码以后是这样的：
在js文件最后一行，加上这样一行注释就可以关联sourcemap：
//#sourceMappingURL=/path/to/your/sourcemap.map
调试工具支持解析sourcemap来映射调试的代码位置到源代码中的位置。
比如chromedevtools的Sources面板就会提示从哪个文件sourcemapping过来的，点击链接还可以跳到映射之前的文件：
同样，VSCodeDebugger也支持sourcemap，有个sourceMaps的调试配置选项来开启和关闭sourcemap功能，默认开启。
那这么说我们只要让react-dom.development.js关联上sourcemap，就能调试最初的React源码了？
理论上是这样的，但是现在下载的react、react-dom包里都不带sourcemap，我们得把React源码下载下来自己build：
build出带有sourcemap的react包
npm下载react包
用npm下载的react包是这样