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 中文网

相关推荐
. . . . .21 小时前
shadcn组件库
前端
2501_9447114321 小时前
JS 对象遍历全解析
开发语言·前端·javascript
发现一只大呆瓜1 天前
虚拟列表:支持“向上加载”的历史消息(Vue 3 & React 双版本)
前端·javascript·面试
css趣多多1 天前
ctx 上下文对象控制新增 / 编辑表单显示隐藏的逻辑
前端
lbb 小魔仙1 天前
【HarmonyOS实战】React Native 表单实战:自定义 useReactHookForm 高性能验证
javascript·react native·react.js
_codemonster1 天前
Vue的三种使用方式对比
前端·javascript·vue.js
寻找奶酪的mouse1 天前
30岁技术人对职业和生活的思考
前端·后端·年终总结
梦想很大很大1 天前
使用 Go + Gin + Fx 构建工程化后端服务模板(gin-app 实践)
前端·后端·go
We་ct1 天前
LeetCode 56. 合并区间:区间重叠问题的核心解法与代码解析
前端·算法·leetcode·typescript
张3蜂1 天前
深入理解 Python 的 frozenset:为什么要有“不可变集合”?
前端·python·spring