当前位置: 首页 > article >正文

ReactNative react-devtools 夜神模拟器连调

目录

一、安装react-devtools

二、在package.json中配置启动项

三、联动


一、安装react-devtools

yarn add react-devtools@5.3.1 -D

这里选择5.3.1版本,因为高版本可能与夜神模拟器无法联动,导致部分功能无法正常使用。

二、在package.json中配置启动项

"react-devtools": "react-devtools"

也可以通过终端运行:

yarn run react-devtools

此时会启动eletron程序并打开react调试工具,如下界面:


在模拟器里刷新app应用即可连接上:

在expo程序里点击这里刷新,开启程序页面。

开发工具连接成功。

若连接不上,可以在终端执行以下命令:

adb reverse tcp:8097 tcp:8097

让adb去监听。

参考:React 开发者工具 ·React Native 中文网

三、联动

在开发工具里选择components可以指到对应的应用元素选中:

在模拟器里,点击侧边“···”,再选择菜单选项,打开开发者菜单:

点击“Show Element Inspector”选项后,即可在模拟器里进行选中元素:

双向选中成功。

更多参考:React 开发者工具 ·React Native 中文网


http://www.kler.cn/a/523430.html

相关文章:

  • docker安装Redis:docker离线安装Redis、docker在线安装Redis、Redis镜像下载、Redis配置、Redis命令
  • 【漫话机器学习系列】064.梯度下降小口诀(Gradient Descent rule of thume)
  • 求解旅行商问题的三种精确性建模方法,性能差距巨大
  • Deepseek的RL算法GRPO解读
  • RK3588平台开发系列讲解(ARM篇)ARM64底层中断处理
  • 【数据结构】_顺序表经典算法OJ(力扣版)
  • 【云安全】云原生-K8S-搭建/安装/部署
  • 【LeetCode: 941. 有效的山脉数组 + 双指针】
  • 学习数据结构(1)时间复杂度
  • CRM 微服务
  • LeetCode 119. 杨辉三角 II
  • PyCharm中Python打包工具不见了的解决方案
  • parametric_vector = linspace(0, 1, num_points);详细解释
  • 【Python百日进阶-Web开发-FastAPI】Day813 - FastAPI 响应模型
  • Linux——网络基础(1)
  • 基于SpringBoot的阳光幼儿园管理系统
  • MongoDB平替数据库对比
  • DeepSeek:突破传统的AI算法与下载排行分析
  • 输出国际象棋棋盘
  • GBase 8a 9.5.3.27 DBlink配置---源端GBase
  • Xposed-Hook
  • 每日一题 430. 扁平化多级双向链表
  • Nginx 性能优化技巧与实践(二)
  • GORM 支持的数据库解析
  • 力扣 【99. 恢复二叉搜索树】Java题解(二叉树的 Morris 遍历)
  • Vue.js 配合 Vue Router 使用 Vuex