React Native用react devtools调试的临时方法

最新推荐文章于 2025-10-19 00:47:52 发布
原创 最新推荐文章于 2025-10-19 00:47:52 发布 · 3.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react native #react devtools

本文介绍了如何通过React Developer Tools来调试Chrome浏览器中的React组件。当遇到无法查看组件结构及其props和state属性的问题时，可以通过下载并安装React Developer Tools解决。文章还提供了一个简单的方法：直接在命令行中运行react-devtools。

由于chrome浏览器扩展的工具只能console和sources调试（其实这两个也足够了）

不过很多情况下想看组件结构及其props，state属性

于是我就去官方文档下了devtools，https://reactnative.cn/docs/debugging.html#react-developer-tools

但是卡在下图

临时想到的法子：

然后命令行react-devtools运行就好了

qq_35089721
关注
使用react-devtools调试react-native项目
徐同保的专栏
04-07 2220
https://www.npmjs.com/package/react-devtools 安装包： yarn global add react-devtools 通过命令行启动： 可以直接修改app的样式，类似于在chrome中：
【笔记】React-Native React DevTools
JackyCheung
03-04 1278
接下来需要怎么调试？...我是用安卓真机连接电脑，然后一顿操作后，还是连接不上，然后仔细看了下文档有个故障排除的解决方案。在运行命令react-devtools前，我已经用命令adb shell input keyevent 82打开调试菜单，选择好了Show Element Inspector。1、本想在Demo项目中添加依赖(npx react-devtools)，但其他项目就需要再操作一次，所以全局安装就好了。安装成功后，运行命令react-devtools，会自动打开Electron窗口。
(四)ReactNative VSCode IDE开发插件
qq1377399077的专栏
04-06 873
vscode是我个人用过的最舒服的开发工具，同样，集成了git，支持插件，最主要的是占用内存小。atom是我开发react native最先用的工具，有酷炫的开发效果，但是最令我不爽的是，占用内容大，酷炫的插件没装几个就卡的不行。所以个人推荐vscode，让代码飞。。。(一)React Native Tools该扩展工具(React Native Tools)给React Native项目提供了一个
Reactide调试工具进阶：React DevTools深度使用技巧
最新发布
gitblog_01121的博客
10-19 677
你是否还在为React组件状态调试频繁切换浏览器与编辑器？是否在复杂组件树中难以定位Props传递问题？本文将带你掌握Reactide集成的调试工具套件，通过组件树可视化、状态实时编辑、模拟器联动三大核心技巧，将调试效率提升40%以上。读完本文你将获得：组件状态双向绑定调试、Props穿透追踪、热重载工作流优化的完整解决方案。 ## Reactide调试环境快速配置 Reactide作为专为R...
react-native-debugger：基于React Native官方调试器的独立应用程序，包括React Inspector Redux DevTools
02-03
React Native调试器 使用Redux DevTools安装程序运行的redux示例 这是一个用于调试React Native应用程序的独立应用程序： 基于官方的并提供更多功能。 包括 。 包括Redux DevTools，使用制作 。 包含 （ ）作为devtools扩展。 安装 要安装该应用程序，您可以从下载预构建的二进制文件。 对于macOS ，您可以使用进行安装： <自制软件2.6.0 $ brew update && brew cask install react-native-debugger > =自制软件2.6.0 $ brew install --cask react-native-debugger 这会将React Native Debugger.app放在/applications/文件夹中。 注意：React Native兼容性 要使用此应用程序，您需要确保使用的是React Native Debugger和react-native的正确版本： React Native调试器 React性的 > = 0.11 > = 0.62
react-native使用react-devtools调试项目
qq_53761321的博客
06-09 541
react-devtools 依赖于 electron，而 electron 需要到国外服务器下载二进制包，所以国内用户这一步很可能会卡住。，然后再尝试安装 react-devtools。package.json 添加代码 运行这段代码。
react-native项目构建配置及window调试devtools
weixin_33774615的博客
12-03 204
1，安装android-studio，jdk, sdk 配置环境变量，（一定不能配错了，摔太多次） 　　https://www.jianshu.com/p/aaff8bb91f69 　　https://www.jianshu.com/p/2819e3075ab1 　　网上一堆说，配置host文件，安装android-studio的，反正个人体验，不靠谱，（http://www.androi...
React Native在VS Code debuger调试全流程终极指南
老猿阿浪的博客
05-16 1505
"为什么我的断点总是不生效？" —— 这是 React Native 开发者使用 VS Code 调试时最常见的痛点。本文将手把手带你掌握 VS Code 调试 React Native 的完整方案，从零配置到高级技巧，彻底解决你的调试难题。
React Native Debugger reactnative可视化调试工具
03-16
在实际使用中，React Native Debugger通常与`react-native-debugger-open`命令行工具结合，以便在启动应用时自动打开调试器。此外，还可以通过`react-native log-ios`或`react-native log-android`命令来收集应用的...
ReactNative react-devtools 夜神模拟器连调
qq_50909707的博客
01-28 1034
这里选择5.3.1版本，因为高版本可能与夜神模拟器无法联动，导致部分功能无法正常使用。在expo程序里点击这里刷新，开启程序页面。在模拟器里，点击侧边“
react native 调试工具react-devtools
weixin_44753443的博客
05-13 1435
react-native-debugger react native 自带的调试实在是不好用 网上大多数还是苹果手机的调试插件 在bilibili找到了一个 教学视频连接：https://www.bilibili.com/video/BV1mk4y1r7vf?spm_id_from=333.880.my_history.page.click 非常详细非常好 这个视频介绍了4个调试工具 因为我需要写安卓的原生 所以选择了第三个 是用的挺好的 不过视频有点老了 命令下载不推荐了 还是去他的GitHub下载比较
EXPO XDE ReactNative 调试工具 windowsPC 版本
09-11
An Expo project is a React Native project. You can use Expo XDE, our development environment, to create mobile applications in a matter of minutes. 家里网速不好,下载了两天,没有下载下来 ,花钱买了 代理才终于下载出来!
react native项目增加devtools工具
weixin_33690963的博客
03-19 232
第一步：安装react devtools工具 在当前项目中打开命令行，添加react devtools工具，因为运行的工具有九十几M，下载时需要时间，请耐心等待 yarn add react-devtools 第二步：配置package.json中命令 编辑package.json文件，在scripts节点中增加devtools节点，命令为 "devtools": "r...
通过react-devtools调试ReactNative代码
sinat_40988345的博客
09-12 424
3、打开雷电模拟器开发者菜单。2、装完成后在命令行中执行。
React Native性能分析工具：React DevTools高级用法
gitblog_00665的博客
09-19 493
你是否曾遇到React Native应用在复杂交互时出现卡顿？是否困惑于为何看似简单的组件树却导致了严重的性能瓶颈？React DevTools（React开发工具）不仅是组件调试的基础工具，更是性能优化的强大武器。本文将深入解析React DevTools的高级功能，带你掌握组件渲染追踪、性能分析、状态调试等进阶技巧，让你在15分钟内从"盲调性能"转变为"精准优化"。 读完本文你将获得： - ...
蛋疼的react-native与react-devtools
zdluoa的博客
03-29 4855
react-native版本：        react-devtools版本：3.2.1谷歌版本：            这几个版本放在一起就蛋疼了，react-native 始终无法在react-devtools或chrome上进行调试1、在chrome上调试，需要安装react-developer-tools的插件，想要chrome开发者栏中出现react tab            必须...
RN：调试工具Chrome、react-native-debugger、react-devtools、flipper对比
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
08-17 3379
Chrome 运行 yarn start 的时候会自动打开 http://localhost:8081/debugger-ui react-native-debugger 社区开源的 debugger 工具，功能强大 brew install --cask react-native-debugger open "rndebugger://set-debugger-loc?host=localhost&port=8081" flipper Facebook 开源的 debugger 工具，功能强
React Query Devtools 教程
gitblog_00773的博客
08-13 550
`react-query-devtools` 的目录结构主要包括以下几个部分： ``` react-query-devtools/ ├── src/ # 主体源码目录 │ ├── index.tsx # 主入口文件，用于创建并挂载Devtools组件 │ └── ... ├── build/ # 构建产出文件夹 ├── ...
ReactNative0.76版本发布，默认开启新架构
wayne214的博客
10-24 1968
React Native 0.76 版本是一个重要的更新，它默认启用了新架构，引入了 React Native DevTools，并带来了多项性能改进和新功能。这个版本标志着 React Native 六年来的发展成果，并且得到了开发者社区的大力支持。新架构的启用意味着开发者可以更高效地构建高质量的原生应用。此外，React Native DevTools 的引入提供了一个更可靠、熟悉且集成的调试体验。性能改进包括 Metro 分辨率的提升和新的样式属性，如boxShadow和filter。
DevTools如何调试react-native
03-20
### 如何使用 React DevTools 调试 React Native 应用 React DevTools 是一种强大的工具，用于调试基于 React 的应用，包括 React Native 项目。以下是关于如何配置和使用它来调试 React Native 庢程序的具体说明。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值