Note: All operations in this article refer to the React official documentation, which is combined with my own debugging ideas.

Current versions react to 17.0.3, the original official document links ~ ~ zh-hans.reactjs.org/docs/how-to… ~ ~

You can’t debug the React source code directly by downloading it. Need to source package, generate the react, react – dom packaging code, then in his under the program created creat – react – app link to react after the packaging, the react – dom document. Use react and react-dom in your app. However, the packaged file still retains the method name in the source code. We can read the source code first. If we want to break a method in the source code, we can search for the method in the packaged code and then debug the breakpoint.

  1. Install Nodev8.0.0+ and Yarn V1.2.0 +. JDK Yarn can be installed globally using NPM Yarn -g. You can download the JDK installation package from the official website and install it yourself.

  2. Git clone https://github.com/facebook/react.git to download the react to the local project.

  3. Packaging the react project CD ~ / path_to_your_react_clone / / / into your local react yarn in the source project build react/index, the react/JSX, react – dom/index, the scheduler –type=NODE // Package react project

  4. Go to the build directory and use Yarn link to point the react and react-dom to the build directory in the local directory. cd build/node_modules/react yarn link cd build/node_modules/react-dom yarn link

  5. Go to your create-react-app project and link the react and react-dom files to your local build directory. yarn link react react-dom

Note that yarn start is required every time a breakpoint is completed for the breakpoint to take effect.

So let’s try it out. =

Add a log line to the react package

After restarting the project, it will take effect in the browser

Next, we can start our debugging tour.