如何本地 Debug React 源码

日常开发过程中,有时 debug react 源代码进行问题排查。一种方案是直接把通过 html 引入进来,另外一种是编译并通过 yarn 链接到项目中,本地将介绍如何通过这两种方法进行代码 Debug。

页面引入源代码方式

这种方式比较简单,直接引入 React 代码,适合学习使用。

复制代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      const { useState } = React;
      
      function MyApp() {
        const [counter, setCounter] = useState(10)       
        return <h1>Hello, world! </h1>;
      }

      const container = document.getElementById('root');
      const root = ReactDOM.createRoot(container);
      root.render(<MyApp />);

    
    </script>
    <!--
      Note: this page is a great way to try React but it's not suitable for production.
      It slowly compiles JSX with Babel in the browser and uses a large development build of React.

      Read this page for starting a new React project with JSX:
      https://react.dev/learn/start-a-new-react-project

      Read this page for adding React with JSX to an existing project:
      https://react.dev/learn/add-react-to-an-existing-project
    -->
  </body>
</html>

找到想要 debug 的代码,添加断点进行 debug。

编译源代码

通过编译源代码进行React的 Debug,这种方式的好处是可以直接在项目中使用,替换项目引用的 React。

  1. 从 github 下载最新代码,并指定所需要的版本

    git clone https://github.com/facebook/react

    查询分支

    git brank -r

    checkout想要的版本号

    git checkout ${version}

  2. 安装依赖

    yarn install

  3. React 使用 yarn workspace 进行多项目管理,由于测试项目为web 项目,只需编译React和React-Dom。

    yarn build react/index,react/jsx,react-dom/index,scheduler --type=NODE

  4. 进入编译好的项目目录并创建 link,替换项目使用 React 和 React-Dom

    react link

    build/node_modules/react
    yarn link

    react-dom link

    build/node_modules/react-dom
    yarn link

  5. 进入当前项目目录,这里通过 CRA 创建了一个新项目

    create project

    npx create-react-app react-client

    进入项目目录运行

    cd react-client
    yarn link react react-dom

可以看到 react 和 react-dom 都已经地换成为软连接的形式

  1. 启动项目,找到需要 debug 方法添加断点即可

    yarn start

总结

对于React 代码 debug 的两种方式,个人更倾向于第二种方式,编译源代码的方式稍微麻烦一些,但是对原始代码没有任何侵入性。

相关推荐
weixin_399380699 分钟前
TongWeb8.0.9.0.3部署后端应用,前端访问后端报405(by sy+lqw)
前端
伍哥的传说30 分钟前
H3初识——入门介绍之常用中间件
前端·javascript·react.js·中间件·前端框架·node.js·ecmascript
洛小豆1 小时前
深入理解Pinia:Options API vs Composition API两种Store定义方式完全指南
前端·javascript·vue.js
洛小豆1 小时前
JavaScript 对象属性访问的那些坑:她问我为什么用 result.id 而不是 result['id']?我说我不知道...
前端·javascript·vue.js
叹一曲当时只道是寻常1 小时前
Softhub软件下载站实战开发(十六):仪表盘前端设计与实现
前端·golang
超级土豆粉1 小时前
npm 包 scheduler 介绍
前端·npm·node.js
bug爱好者1 小时前
原生小程序如何实现跨页面传值
前端·javascript
随笔记1 小时前
uniapp开发的小程序输入框在ios自动填充密码,如何欺骗苹果手机不让自动填充
前端·ios·app
bug爱好者1 小时前
原生微信小程序最实用的工具函数合集
前端·javascript
3Katrina2 小时前
JS事件机制详解(2)--- 委托机制、事件应用
前端·javascript·面试