大家都知道，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官网Debugging Recipes部分有提供一个vscode-recipes仓库，里面有各种基于VSCode调试的项目例子。
我们找到debugging-jest-tests。先上个图感受下。
好是好，但我们的源代码是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的用法在Jest CLI Options有详细说明。在这里我是直接把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，搞定！
最后，祝大家生活愉快！
上文内容不用于商业目的，如涉及知识产权问题，请权利人联系博为峰小编(021-64471599-8017)，我们将立即处理。
