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

相关推荐
前端炒粉20 小时前
React 面试高频题
前端·react.js·面试
程序员陆业聪20 小时前
让 Android 里的 AI 真正「干活」:Function Calling 工程实现全解
前端
mumuWorld20 小时前
解决openclaw以及插件安装的报错
前端·ai编程
GISer_Jing20 小时前
前端组件库——shadcn/ui:轻量、自由、可拥有,解锁前端组件库的AI时代未来
前端·人工智能·ui
执行部之龙20 小时前
JS手写——call bind apply
前端·javascript
京东零售技术20 小时前
告别手动搬砖: JoyCode + i18n-mcp 实现前端项目多语言自动化
前端
李少兄20 小时前
企业资源计划(ERP)系统全景指南
java·前端·数据库·erp
张一凡9320 小时前
React 项目也能用依赖注入?我尝试了一下,真香
前端·react.js
somebody20 小时前
零经验学 react 的第15天 - 过渡动画(使用 react-transition-group 库进行实现)
前端
SuperEugene21 小时前
Vue3 + Element Plus 表单开发实战:防重复提交、校验、重置、loading 统一|表单与表格规范篇
前端·javascript·vue.js