如何调试 build 之后的 react.development.js 文件？本文探讨如何利用 VSCode 来 deb

本文探讨如何利用 VSCode 来 debug react 源代码，用以熟悉代码的实际运行流程。

如何配置调试环境

VSCode 安装 Debugger for Chrome 插件
执行构建

yarn build react/index,react-dom/index --type=UMD

修改 fixtures/packaging/babel-standalone/dev.html 文件内容

<html>

<body>
  <script src="../../../build/node_modules/react/umd/react.development.js"></script>
  <script src="../../../build/node_modules/react-dom/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
  <div id="container"></div>
  <script type="text/babel">
    class ClickCounter extends React.Component {
      constructor(props) {
        super(props);
        this.state = { count: 0 };
        this.handleClick = this.handleClick.bind(this);
      }

      handleClick() {
        this.setState((state) => {
          return { count: state.count + 1 };
        });
      }


      render() {
        return [
          <button key="1" onClick={this.handleClick}>Update counter</button>,
          <span key="2">{this.state.count}</span>
        ]
      }
    }
    ReactDOM.render(
      <ClickCounter />,
      document.getElementById('container')
    );
  </script>
</body>

</html>

根目录下添加或修改 .vscode/launch.json 文件，增加以下配置

{
  // 使用 IntelliSense 了解相关属性。
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch fixtures/packaging/babel-standalone/dev.html",
      "file": "${workspaceFolder}/fixtures/packaging/babel-standalone/dev.html"
    }
  ]
}

打开 build/node_modules/react-dom/umd/react-dom.development.js 文件，function render(element, container, callback) 该方法中添加断点
F5 启动调试，即可进入断点

本系列文件开源在 read-source-code