ReactNative react-devtools 夜神模拟器连调

目录

一、安装react-devtools

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

三、联动


一、安装react-devtools

复制代码
yarn add [email protected] -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 中文网

相关推荐
coding随想40 分钟前
JavaScript ES6 解构:优雅提取数据的艺术
前端·javascript·es6
小小小小宇1 小时前
一个小小的柯里化函数
前端
灵感__idea1 小时前
JavaScript高级程序设计(第5版):无处不在的集合
前端·javascript·程序员
小小小小宇1 小时前
前端双Token机制无感刷新
前端
小小小小宇1 小时前
重提React闭包陷阱
前端
小小小小宇1 小时前
前端XSS和CSRF以及CSP
前端
UFIT1 小时前
NoSQL之redis哨兵
java·前端·算法
超级土豆粉1 小时前
CSS3 的特性
前端·css·css3
星辰引路-Lefan1 小时前
深入理解React Hooks的原理与实践
前端·javascript·react.js
wyn200011282 小时前
JavaWeb的一些基础技术
前端