大家都知道，React Fiber是React全新的Reconciler（Reconciler就是我们通常所说的Virtual DOM，用来计算新老View的差异。）

在我们看完N多大神对它的解释后，但是如果不亲自调试下它的源代码（全新用ES6写了），说实话我心里还是想说（「Talk is cheap. Show me the code」）^_^。

我们在作者提供的"PULL_REQUEST_TEMPLATE.md"，有看到如何调试，见下图：

可是可以，它需要打开chrome来弄，还需要先在测试用例中写个debugger，Source Map也需要弄等等。

那我们该如何在ES6的源代码中直接下断点调它呢？估计大家想到了，最好的方式就是祭出VSCode这个神器。

但还是要些许配置，才能跑起来。因为它的单元测试都是Jest写的，所以我去它的官网去找Debugging in VS Code。但很遗憾作者给出的不试我们想要的。不过，不用担心。VSCode官网部分有提供一个仓库，里面有各种基于VSCode调试的项目例子。

我们找到。先上个图感受下。

好是好，但我们的源代码是ES6，并且有import，所以还需要在args里面加上babel-register。

那么最终的launch.json配置是：

{  "version": "0.2.0",  "configurations": [    {      "type": "node",      "request": "launch",      "name": "Jest Current File",      "program": "${workspaceRoot}/node_modules/jest/bin/jest",      "args": [        "babel-register",        "${file}",        "--config",        "./scripts/jest/config.source.js",        "--runInBand"      ],      "console": "integratedTerminal",      "internalConsoleOptions": "neverOpen",      "env": {        "NODE_ENV": "development"      }    }  ]}复制代码

是不是很简单，--config和--runInBand的用法在有详细说明。在这里我是直接把react项目本身package.json里面scripts部分的debug-test配置直接移过来的，没啥其它：

"debug-test": "cross-env NODE_ENV=development node --inspect-brk node_modules/.bin/jest --config ./scripts/jest/config.source.js --runInBand"

好，现在我们在这个由1000多位大神所贡献的项目中随便找一个有setState的测试用例，下个断点，按F5执行一下：

OK，搞定！

最后，祝大家生活愉快！