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

相关推荐
风继续吹..2 小时前
后台管理系统权限管理:前端实现详解
前端·vue
yuanmenglxb20042 小时前
前端工程化包管理器:从npm基础到nvm多版本管理实战
前端·前端工程化
新手小新3 小时前
C++游戏开发(2)
开发语言·前端·c++
我不吃饼干3 小时前
【TypeScript】三分钟让 Trae、Cursor 用上你自己的 MCP
前端·typescript·trae
小杨同学yx4 小时前
前端三剑客之Css---day3
前端·css
Mintopia6 小时前
🧱 用三维点亮前端宇宙:构建你自己的 Three.js 组件库
前端·javascript·three.js
故事与九6 小时前
vue3使用vue-pdf-embed实现前端PDF在线预览
前端·vue.js·pdf
Mintopia7 小时前
🚀 顶点-面碰撞检测之诗:用牛顿法追寻命运的交点
前端·javascript·计算机图形学
wb1897 小时前
企业WEB应用服务器TOMCAT
运维·前端·笔记·tomcat·云计算
烛阴7 小时前
解锁 Gulp 的潜力:高级技巧与工作流优化
前端·javascript