如何本地 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-projectRead 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} 
  1. 安装依赖
yarn install 
  1. React 使用 yarn workspace 进行多项目管理,由于测试项目为web 项目,只需编译React和React-Dom。
yarn build react/index,react/jsx,react-dom/index,scheduler --type=NODE
  1. 进入编译好的项目目录并创建 link,替换项目使用 React 和 React-Dom
## react link
build/node_modules/react 
yarn link## react-dom link
build/node_modules/react-dom
yarn link
  1. 进入当前项目目录,这里通过 CRA 创建了一个新项目
# create project
npx create-react-app react-client
# 进入项目目录运行
cd react-client
yarn link react react-dom

在这里插入图片描述
可以看到 react 和 react-dom 都已经地换成为软连接的形式
在这里插入图片描述
6. 启动项目,找到需要 debug 方法添加断点即可

yarn start

在这里插入图片描述

总结

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/18541.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

眼精星和金鸣识别新增智能结构化识别,助您快速筛选和统计数据

熟悉眼精星票证识别系统或金鸣表格文字识别大师的用户都知道&#xff0c;近日&#xff0c;这二款软件同时上线了“智能结构化”功能&#xff0c;那么&#xff0c;什么是智能结构化呢&#xff1f; 准确地说&#xff0c;我们这里的智能结构化应为OCR智能结构化&#xff0c;因为它…

多家大模型公司被爆“卖身”,有创业者称接单能力很重要

百模大战下&#xff0c;行业开始“洗牌”。 据外媒《The Information》的报道&#xff0c;随着底层通用大模型格局的基本落成&#xff0c;投资者的热情正在转向支持人形机器人等其他技术。 与此同时&#xff0c;科技巨头和生成式AI的早期赢家也正在加速掀起一场新浪潮&#x…

Flink搭建

目录 一、standalone模式 二、Flink on Yarn模式 一、standalone模式 解压安装Flink [rootbigdata1 software]# tar -zxvf flink-1.14.0-bin-scala_2.12.tgz -C /opt/module/ [rootbigdata1 module]# mv flink-1.14.0/ flink-standalone 2.进入conf修改flink-conf.yaml job…

Linux:系统安全及应用

一、账号安全控制 1、账号安全基本措施 &#xff08;1&#xff09;系统账号清理 a、将非登录用户的Shall设为/sbin/nologin usermod -s/sbin/nologin 用户名 b、锁定长期不使用的账号 usermod -L 用户名 passwd -l 用户名 passwd -S 用户名 c、删除无用的账号…

KaiwuDB 受邀出席中国智能化油气管道与智慧管网技术交流大会

导 读 5月22-24日&#xff0c;由中国石油学会石油储运专业委员会、石油工业标准化技术委员会油气储运专标委等联合主办的“第十三届中国智能化油气管道与智慧管网技术交流大会”在浙江省杭州市盛大召开&#xff0c;KaiwuDB 受邀亮相大会。浪潮院士、山东浪潮数据库技术有限公司…

后台接口搭建步骤Django框架(pycharm社区版一样适用)

第一步&#xff1a;创建项目 打开命令行界面&#xff0c;输入以下命令&#xff1a; django-admin startproject (项目名称) 第二步&#xff1a;创建应用 进入项目根目录&#xff0c;确保与manage.py文件处于同一级&#xff0c;输入下述命令&#xff1a; python manage.py …

二区5分纯生信|单细胞+非负矩阵+AlphaFold+机器学习组合

说在前面 学文不看刊 这篇分析总体来说工作量不算大&#xff0c;scRNA联合bulkRNA分析&#xff0c;多种机器学习组合预测模型&#xff0c;最后用了AlphaFold2预测蛋白及AutoDock分子对接 非常适合小白学习和模仿&#xff0c;其次在筛选出核心基因后可以再加几个外部数据集观…

勒索软件统计数据揭示了网络勒索的惊人速度

本文通过各种报告摘录&#xff0c;提供了有关当前勒索软件形势的统计数据和见解。 全球勒索病毒危机加剧 NTT安全控股《2024全球威胁情报报告》&#xff08;2024年5月&#xff09; 据NTT安全控股公司的《2024年全球威胁情报报告》显示&#xff0c;勒索软件和勒索事件在2023年激…

50 http通用服务器

虽然我们说&#xff0c;应用层协议是我们程序猿自己定的 但实际上&#xff0c;已经有大佬们定义了一些现成的&#xff0c;又非常好用的应用层协议&#xff0c;供我们直接参考使用&#xff0c;http&#xff08;超文本传输协议&#xff09;就是其中之一 目录 认识urlurlencode和…

为WPF的Grid添加网格边框线

在WPF中使用Grid绘制表格的时候&#xff0c;如果元素较多、排列复杂的话&#xff0c;界面会看起来很糟糕&#xff0c;没有层次&#xff0c;这时用网格或边框线分割各元素&#xff08;标签或单元格&#xff09;将会是页面看起来整齐有条理。 默认没有边框线的如下图所示&#xf…

二叉树习题精讲-相同的树

相同的树 100. 相同的树 - 力扣&#xff08;LeetCode&#xff09;https://leetcode.cn/problems/same-tree/description/ /*** Definition for a binary tree node.* struct TreeNode {* int val;* struct TreeNode *left;* struct TreeNode *right;* };*/ bool i…

OpenSSL自签名证书

文章目录 生成1. 生成根证书的私钥&#xff08;root_private_key.pem&#xff09;2. 创建根证书的CSR和自签名证书&#xff08;root_csr.pem&#xff09;3. 生成服务器证书的私钥&#xff08;server_private_key.pem&#xff09;4. 创建服务器证书的CSR&#xff08;server_priv…

考研经验总结——复试上岸(附通信原理)

上岸啦&#xff0c;一志愿拟录取&#xff0c;初试第5、复试4&#xff0c;总成绩第4 文章目录 一、复试流程二、注意事项三、简历模板3.1 基本信息3.2 报考情况3.3 校内实践3.4 荣誉奖励3.5 项目经验3.6 自我介绍 四、通信原理五、最后的总结 一、复试流程 1、 复试流程 准备复…

设计模式(简要,应付软考)

简单工厂模式(Simple Factory Pattern): 又称为静态工厂方法(Static Factory Method)模式,它属于类创建型模式。在简单工厂模式中,可以根据参数的不同返回不同类的实例。简单工厂模式专门定义一个类来负责创建其他类的实例,被创建的实例通常都具有共同的父类。 单例实例&#…

03- Redis 中的 Hash 数据类型和应用场景

1. 介绍 Hash 是一个键值对&#xff08;key - value&#xff09;集合&#xff0c;其中 value 形式如&#xff1a; value [{field1, value1}, ...{fieldN, valueN}]。Hash 特别适合用于存储对象。 Hash 和 String 对象的区别如下&#xff1a; Redis Stringuid:1:name ------…

如何让APP打开时无广告(一秒学会)

相信大家平时在玩手机的时候多多少少都会在意过打开app时的启动广告&#xff0c;虽然可以自己点击跳过&#xff0c;但是确实十分麻烦&#xff0c;很多人想知道如何跳过app启动广告。 现在网上很多切换手机中英文、安装拦截软件等等&#xff0c;我都试过了&#xff01; 统统不管…

基于Netty实现WebSocket服务端

本文基于Netty实现WebSocket服务端&#xff0c;实现和客户端的交互通信&#xff0c;客户端基于JavaScript实现。 在【WebSocket简介-CSDN博客】中&#xff0c;我们知道WebSocket是基于Http协议的升级&#xff0c;而Netty提供了Http和WebSocket Frame的编解码器和Handler&#…

N1912A P 系列双通道功率计

N1912A 双通道功率计 产品综述 <<<P 系列双通道功率计>>> Keysight N1912A P 系列双通道功率计可以提供峰值功率、峰均比、平均功率、上升时间、下降时间 NS 脉冲宽度测量。 “ 功能特点 30 MHz 视频带宽 能够以高达 100 MSa/s 的采样率执行单次实时捕…

2种方法将集合数据List构建成树形结构

文章目录 递归循环构建树结构hutool.TreeUtil.build构建树结构 递归循环构建树结构 先查最外层树节点数据&#xff0c;再递归遍历每一层子节点数据 public ApiResultDto<List<LocationDto>> getTreeByParams(LocationSearchDto searchDto, SecurityUser user) {// …

柔性自驱动生物“电子衣”促进伤口愈合

引用信息 文 章&#xff1a;Combined Amniotic Membrane and Self-Powered Electrical Stimulator Bioelectronic Dress Promotes Wound Healing 期 刊&#xff1a;ACS Applied Materials & Interfaces&#xff08;影响因子&#xff1a;9.5&#xff09; 发表时间…