开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何使用chrome react调试react原生移动应用程序

使用Chrome React调试React原生移动应用程序的步骤如下：

确保你已经安装了Chrome浏览器和React开发者工具插件。如果没有安装，可以在Chrome Web Store中搜索并安装React Developer Tools插件。
在React Native项目的根目录下，运行以下命令启动开发服务器：

react-native start

在Chrome浏览器中打开开发者工具。可以通过右键点击页面，选择"检查"或者按下Ctrl+Shift+I（Windows）/Cmd+Option+I（Mac）来打开开发者工具。
在开发者工具中，点击顶部菜单栏的"React"选项卡。
在React选项卡中，点击"手机图标"按钮，选择"Scan"。
扫描二维码或者输入开发服务器的IP地址和端口号，连接到React Native应用程序。
连接成功后，你将在开发者工具中看到React Native应用程序的组件树和状态。
可以通过在组件树中选择组件来查看其属性和状态。还可以在右侧的"Console"选项卡中查看应用程序的日志输出。
如果需要修改组件的属性或者状态，可以在开发者工具中直接编辑并保存，应用程序将会实时更新。
如果需要调试JavaScript代码，可以在开发者工具的"Sources"选项卡中找到应用程序的JavaScript文件，并设置断点进行调试。

总结：使用Chrome React调试React原生移动应用程序可以通过安装React Developer Tools插件，连接到React Native应用程序，并在开发者工具中查看组件树、状态和日志输出，以及进行属性和状态的修改和JavaScript代码的调试。这样可以方便地进行React原生移动应用程序的开发和调试工作。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云移动开发平台：https://cloud.tencent.com/product/mwp
腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
腾讯云云原生应用引擎：https://cloud.tencent.com/product/tke
腾讯云音视频处理：https://cloud.tencent.com/product/mps
腾讯云人工智能：https://cloud.tencent.com/product/ai
腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
腾讯云虚拟专用网络（VPC）：https://cloud.tencent.com/product/vpc

相关搜索:使用原生react移动箭头使用Chrome扩展"React Developer Tools 4.10.1“调试React应用程序，我希望看到React Tab react和react原生: uuid react包支持移动端吗？如何使用docker构建react原生iOS应用程序？如何使用expo更新React原生android应用程序 react原生导航在屏幕之间移动在使用react原生构建移动应用程序中包括外部javascript文件使用Firebase TestLab测试React原生应用程序使用react原生应用程序实现强制更新如何使用原生React创建mac或windows应用程序 React-原生开放应用程序如何测量react原生应用程序的性能使用React Native开发移动应用程序如何在react原生中使用变量？如何使用原生react创建typescript项目？如何在设备上的react本机应用程序中使用chrome chrome？在原生react中的屏幕之间移动 React原生地图移动到坐标更改如何使用react- native -meteor库将meteor与react原生应用程序连接如何使用基于react的SPA的react原生webview onNavigationStateChange？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

逆袭Flutter? Facebook 发布全新跨平台引擎 Hermes！

移动应用变得愈加繁重的同时也愈加复杂了。开发者为应用添加新功能时通常会遇到卡顿等性能问题。虽然出现性能问题的原因是多种多样的，但用户不关心这些，他们只希望自己在任何设备上使用应用时都能有流畅的体验。

04

React Native——一次学习，随处编写

2015年3月26日，Facebook公司对外正式发布了React Native——使用React框架跨平台开发原生移动应用的开源技术框架。开发者可以使用React Native高效地开发运行于Android与iOS操作系统的应用程序。它的设计理念是：使用ReactNative开发，既拥有Native的良好人机交互体验，又保留了React框架的开发效率。

02

2022年了，跨端方案该怎么选呢？

Flutter 是当下移动端领域非常热门的跨端框架，各个大厂都在积极探索这项技术，并在主营业务上实现落地。

00

几种2022年流行的跨端技术方案的优缺点

React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，支持iOS和安卓两大平台。RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

02

跨端技术方案选什么好？

Taro 是由京东 - 凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架。、一套代码，通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信小程序、H5、App 端等）运行的代码。同时 Taro 还提供开箱即用的语法检测和自动补全等功能，有效地提升了开发体验和开发效率。

01

React Native 开发工具推荐

近几年在大前端的开发领域，选择跨端方案的公司和部门越来越多，曾一何时市面有不下10种跨端框架，但随着“生物进化论”的推动，目前市面上仅剩两种主流方案，就是经常听到的 React Native 和 Flutter。去年终于引来了 React Native 的新版本 0.70.0，开发者也大为振奋。

02

移动开发者必备的 React Native 开发工具

近几年在大前端的开发领域，选择跨端方案的公司和部门越来越多，曾一何时市面有不下10种跨端框架，但随着“生物进化论”的推动，目前市面上仅剩两种主流方案，就是经常听到的 React Native 和 Flutter。去年终于引来了 React Native 的新版本 0.70.0，开发者也大为振奋。

02

移动端调试技巧与工具：构建无缝的开发体验

在移动应用开发过程中，调试是不可或缺的一部分。了解如何有效地调试移动应用，可以提高开发效率并改善应用的质量。本文将深入探讨移动端调试的关键技巧和工具，为您提供一份全面的指南，并提供带有实际代码示例的技巧，以帮助您构建更出色的移动应用。

02

前端跨平台框架对比分析，看这篇就够了

前端跨端实践是指在开发过程中，使用统一的代码库或框架来实现在不同平台上运行的应用程序。

03

ReactJS和React-Native的主要区别在哪里

React-Native已经存在了约2年，而且因为它能被Android使用让我们构建跨平台的移动app而成为真正有趣的框架。一些开发者还为构建适用于Mac和Windows的桌面应用程序量身打造了一些框架，这简直太酷了。

03

ReactNative与小程序容器

结合React Native和小程序容器技术，开发者可以通过热重载和快速迭代提高开发效率，并实现统一的代码和逻辑，简化维护和升级过程。这种技术应用价值使得开发者能够更灵活地构建跨平台应用程序，并充分利用多个生态系统的优势。

04

【Hybrid开发高级系列】ReactNative(四) —— 基础开发技巧

AppRegistry模块则是用来告知React Native哪一个组件被注册为整个应用的根容器。你无需在此深究，因为一般在整个应用里AppRegistry.registerComponent这个方法只会调用一次。上面的代码里已经包含了具体的用法，你只需整个复制到index.ios.js或是index.android.js文件中即可运行。

02

几个跨平台移动App开发方案框架比较

根据一些老博客里面的内容，现在整理一下目前流行的跨平台移动App开发技术的特点，并将几个不同的开发平台框架进行比较说明，仅供大家参考。

02

是时候了解React Native了

随着科技的发展，手机开发也在向好的方向不停的转变。IOS和Android两大手机操作横空出世，称霸江湖。我们每开发一个手机软件最少都需要开发这两个终端。

01

谁说开发APP一定要写代码？有了这些SDK/API想做啥就做啥！

针对行业痛点，国内外涌现出众多APP开发工具，开发者只要有相关的HTML5、CSS和JavaScript知识，便可以轻松快速的开发出属于自己的APP，基于开发工具中众多的模块功能，APP具有完美的原生

09

【安装指南】HBuilder X 下载、安装详细教程

我们推荐uni-app的开发者，同时安装2个版本。经常向我们反馈alpha版问题。开发工具的测试很复杂，并非官方内测好就OK，需要在各种各样的代码的写法下测试。如果大家总抱着等别人去体验alpha，稳定后你再升级正式版的心态话，那正式版也不可能真的稳定。凡是在论坛里被确认的bug，会都被很快修复。

01

打算一个卡片记忆软件，全平台架构如何选型？

折腾来折腾去，我打算做一个卡片记忆软件，用来记忆面试题、知识点等。很多东西看了就忘了，我想做一个软件来帮助我记忆。这个软件的功能就是每天给我推送一些卡片，我看了就可以记住，然后就可以刷题了。

01

一种React Native 跨端框架与小程序混编的方法

Flutter和React Native这两个框架都是构建跨平台移动应用程序的优质框架，但有时做出正确的决定取决于业务使用的角度。Flutter与React Native两大框架背后都站着科技巨头，分别是谷歌和Facebook，所以从这个角度来看两者未来会在竞争中变得更加完善。

02

开发者必知的8款App快速开发工具

“我有一个好创意，就差一个CTO……” “原生APP开发难度大，周期长，成本高，还没上线市场已经被占领了。” “APP版本迭代更新，都是企业的一道难关，没有一个一劳永逸的解决方式吗？” “一个Web开发者如何能快速适应移动互联网时代，用HTML5开发出一个APP呢？” “安卓、IOS双平台同时开发，程序员都累死在加班的路上了……” 针对行业痛点，国内外涌现出众多APP开发工具，开发者只要有相关的HTML5、CSS和JavaScript知识，便可以轻松快速的开发出属于自己的APP，基于开发工具中众多的模块功能

06

历时 2 年、投入 100+ 工程师，Coinbase 全面迁移到 React Native

移动应用分 iOS 和 Android 两个平台以前要分别进行开发，通常很是费时费力。React Native 是 Facebook 在 F8 大会开源的 JavaScript 框架（2015 年 9 月 15 日发布），可以让广大开发者使用 JavaScript 和 React 开发跨平台的移动应用。在短短不到一年的时间里，它成为手机端必不可少的开发模式之一。本文作者介绍了 Coinbase 如何从原生开发迁移到 React Native，以及绿地法和棕地法的优劣之处。绿地法就是从零开始使用一个全新的系统，而不掺杂任何过去的东西，就像一片绿地，从未受到过任何以往开发的影响。而棕地法，是从现有系统开始的，只是一些重要的部分有所更改。

02

2019年，Flutter 和 React Native 谁主沉浮?

本文是帮助你了解这两个应用程序开发框架区别指南。咱们知道，几年前开发和维护iOS和Android的应用程序曾经是一项艰巨的任务(独立的代码库|独立的开发团队|开发成本也忒高)。

04

App跨平台开发框架分析

随着移动互联网的快速发展，微信小程序、Web、App、车载等各种形态的“端”悄然盛行。

03

无头浏览器自动化：Puppeteer 帮你释放效能 | 开源日报 No.64

这个开源项目主要是为那些想深入研究、学习 Linux 内部工作原理等技术专业人士而设计。其优势在于能够帮助用户更好地理解 Linux 操作系统，并且允许他们自由修改、调整操作系统来满足特定需求。

01

React Native与小程序的混编

由于原生应用程序开发相当耗时且成本高，因此使用相同的代码库来创建可以在多个平台上无缝运行的应用程序的跨平台应用程序开发的概念近年来发展势头强劲，对跨平台应用程序开发公司的需求也有所增加，使得在过去的几年里，Flutter与React Native已逐渐成为移动开发社区中最受欢迎的跨平台移动应用开发框架，那么Flutter和React Native 哪个才是开发者的首选呢？

03

独家 | 5个只有少数程序员知道的用例

作者：Shalitha Suranga 翻译：闫晓雨校对：赵茹萱本文约2900字，建议阅读6分钟。Python不仅能够应用于数据科学和Web后端——还可以做更多的事。照片由Chris Ried拍摄，使用Canva编辑并发布在Unsplash Python是一种简单的、对开发人员友好且具有解释性的通用编程语言。Python因其简单的语法、丰富的库生态系统和高效的开发环境而日益流行。程序员使用Python来构建Web后端、实用程序脚本和本机桌面应用程序。如今，Python在科学工程师、数据分析师、机器

03

框架分析（8）-React Native

React Native是Facebook开源的一款用于构建跨平台移动应用的框架。它基于React，可以使用JavaScript编写应用程序，并将其转换为原生代码，以在iOS和Android上运行。

02

几个好用的React-Native 开发工具

传统的开发中，按照平台划分为 iOS , Android , Windows 和 Mac 。其中，随着移动设备的使用移动端应用的开发也越来越多。传统上 iOS 应用使用 Xcode 工具、 Objective-C 和 Swift 语言进行开发， Android 应用使用 Android Studio 工具、 Java 和 kotlin 语言进行开发。随着开发的普及和应用的成熟度，就有人希望能够用统一的的技术完成更多平台的开发，降低开发成本，提升开发效率，在这样的情况下，各式各样的React-Native 开发工具就诞生了。

01

移动跨平台框架React Native 基础教程【01】

React Native系列导航 01-React Native 基础教程 02-安装ReactNative 03-ReactNative目录结构 04-ReactNative视图View 05-ReactNative组件样式style 06-ReactNative文本组件Text 07-ReactNative组件状态state 08-ReactNative组件属性props 09-ReactNative输入组件TextInput 10-ReactNative图片组件Image 11-ReactNative活动指示器组件 12-ReactNative弹出框Alert 13-ReactNative存储数据组件AsyncStorage 14-ReactNative动画组件Animated 15-ReactNative开关组件Switch 16-状态栏组件StatusBar 17-ReactNative滚动视图ScrollView 18-ReactNative选择器Picker 19-ReactNative网络请求

02

跨平台应用框架_安卓前端框架

多年来，跨平台移动开发已经获得了最流行软件开发趋势之一的声誉。这并不令人意外，因为采用跨平台开发技术使得软件工程师使用同一代码就能为不同平台构建应用程序，从而节省时间、金钱以及不必要的工作。

02

快速认识，前端必学编程语言：JavaScript

JavaScript是构建Web应用必学的一门编程语言，也是最受开发者欢迎的热门语言之一。所以，如果您还不知道JavaScript的用处、特点的话，赶紧补充一下这块基础知识。您可以通过以下的文字内容学习，也可以通过文末的视频学习，希望本文对您有所帮助。

01

2020年了，跨平台开发框架现在怎样了？

多年来，跨平台移动开发已经获得了最流行软件开发趋势之一的声誉。这并不令人意外，因为采用跨平台开发技术使得软件工程师使用同一代码就能为不同平台构建应用程序，从而节省时间、金钱以及不必要的工作。

02

Flutter vs Native与React-Native：检查性能

玄武门之变是唐高祖武德九年六月初四（公元626年7月2日）由当时唐高祖李渊次子秦王李世民在唐王朝的首都长安城大内皇宫的北宫门——玄武门附近发动的一次流血政变。

01

在“小程序”PWA上开发WebRTC

WebRTC面临的最大挑战之一是跨平台提供一致、可靠的支持。对于大多数应用程序，尤其是那些在网络上启动的应用程序，这通常意味着除了支持网络应用程序之外，还需要开发原生或混合移动应用程序。渐进式网络应用程序（PWA）是一种新概念，它能够通过允许基于网络的应用程序在不引入中间混合框架的情况下，看起来并像本地移动应用那样运作，从而将实现应用程序在网络上统一。正如将要讨论的那样，这种方法优点颇多，但它对WebRTC应用程序确实是有意义的吗？

01

React Native框架与小程序混编的方案

这种开发方式不会生成原生 UI 组件，而是基于 React，React Native 是一个用于构建基于 Web 的交互界面的 JavaScript 库，因此会有更丰富的 UI 体验效果，同时也能够很好地调用底层框架的UI使用。 React Native 已经成为一种流行的移动开发技术，它提供了一个使用 JavaScript 构建原生跨平台移动应用的强大框架，在需要时，我们也可以使用 Objective-C，Swift或 Java 来编写原生代码来桥接。

02

移动开发的跨平台技术演进

我是2010年开始从事的Android开发，当时会Android和iOS开发的很少，也不火，所有人都在“摸着河底过河”，项目更没有第三方框架一说，大都是自己写的，不像现在各种的框架满天飞。随着移动开发的发展，互联网公司也是层出不穷，有些公司迫于竞争，想要更迅速的更省成本的进行开发，就不再满足Android端一套代码，iOS端一套代码。与此同时，其他技术领域和各大公司也都觊觎着这份大蛋糕，纷纷推出相关的技术，这样跨平台技术应运而生，并且开始在公司中生根发芽。 Android和iOS生态太大了，我们可以把它们比作第一级生态，想要颠覆这两个系统的曾经出现过，但都失败了，因此建立次级生态是最稳妥的策略，Android平台更加开放，因此次级生态的中心就是Android，次生态的形式多种多样，比如在Android系统的基础上魔改建立自己的生态，再或者推出各种跨平台技术建立生态。跨平台技术产生的框架实在太多了，很多还没等我们去学去了解，它们就没落了，成为了跨平台技术的发展的一个过度产物。跨平台技术的产物是不靠谱还是趋势，我想读完本篇文章你会有自己的理解。跨平台技术的分类没有标准的答案，这里把它们分类为5种，分别Web App、Hybrid App、语言编译转换、原生渲染、自绘UI。下面分别介绍它们。

02

移动跨平台技术方案总结

“得移动端者得天下”，移动端取代PC端，成为了互联网行业最大的流量分发入口，因此不少公司制定了“移动优先”的发展策略。

01

打造高效率跨平台应用程序的秘诀

这篇文章介绍了五个跨平台移动应用程序开发框架，它们支持多种操作系统和设备。这些框架提供了简单易懂的语法和组件，同时也具有良好的用户体验、强大的性能和可扩展性。需要根据具体的项目需求来选择适合自己的框架。

01

前端框架之争丨除了Vue、Angular和React还有谁与之争锋

近些年，前端开发领域涌现出了大量框架，让人眼花缭乱，不知如何选择。今天我们将为您对比五个最流行的前端JavaScript框架，并作出概述，介绍其主要功能、工具、学习曲线及其他因素，帮助您做出衡量和选择。

03

Flutter vs React Native，谁才是跨平台应用开发的最佳利器？

随着移动应用的需求越来越大，许多企业开始将焦点转移到移动应用的开发上。通过引入新技术、新平台和新框架，移动应用开发者能够创建划时代的移动应用。

02

为程序员提供的7 个副业方向

虽然可能暂时还不明晰，但在线赚钱的可能性是无限的，在这篇文章中，我将与在大家分享七个副业想法，希望这些想法在未来能为你带来可观的收入。

00

Flutter vs React Native

随着移动应用的需求越来越大，许多企业开始将焦点转移到移动应用的开发上。通过引入新技术、新平台和新框架，移动应用开发者能够创建划时代的移动应用。

04

React Native 与 Flutter ，一场跨平台世纪之战！

谷歌和 Facebook 当前正在进行的跨平台移动应用开发框架之战（Google Flutter vs. Facebook React Native）正在缩小混合应用和原生应用之间的差距。两者都在朝着改进游戏体验的方向前进，但是各自都有一些值得关注的关键区别。

01

WEEX跨平台开发环境搭建

大约两年前，为了写一本Weex的入门书籍，我花了几个月的时间学习了下Weex跨平台相关的知识。

00

开发人员必须知道的跨平台应用开发方案

开发人员可以使用一套相同的代码，一次性地编码即可在多个平台上面运行起来。它减少了开发人员开发应用的时间，并且能够快速地交付。所以目前为止，越来越多的人意识到跨平台应用程序和框架的好处和重要性。

03

React Native 导航：示例教程

移动应用程序由多个屏幕组成。在构建移动应用程序时，首要考虑的是如何处理用户在应用程序中的导航问题，例如屏幕的展示和屏幕之间的切换。

01

混合应用前端框架HybridApp篇

Hybrid App 作为一种既能够在原生应用程序环境中运行，也能够在 Web 浏览器中运行的应用程序。它主要使用 Web 技术进行开发，如 HTML、CSS 和 JavaScript，并使用一个中间层将其封装在原生应用程序中。

04

IM跨平台技术学习(十)：快速对比跨平台框架Electron、Flutter、Tauri、React Native等

开发人员面临着选择正确框架之挑战，以便可以高效构建可在 Windows、macOS 和 Linux 上无缝运行的应用程序。

00

React框架-第一个React+Node.js组合实例

通常情况下Web应用的数据都是由存储在服务端的数据库中。前端往往通过基于HTTP的接口来完成数据的增、删、改、查等操作。

01

【移动开发趋势】2022 年移动应用程序开发的主要趋势

在一般的移动市场中，关于元宇宙和移动应用程序区块链集成的兴起引起了很多关注。同样，在 iOS 和 Android 平台上，在增强现实、聊天机器人和语音识别方面都有令人兴奋的发展。与此同时，谷歌的开源 UI 软件开发工具包 Flutter 和 Facebook 的开发工具 React Native 也出现了值得注意的创新。

02

在应用开发中，我为什么选择 Flutter 而不是 React Native ？

作为一位开发人员，我想在本文中与大家聊聊跨平台开发领域的两大核心选项——Flutter 与 React Native 框架，并介绍我自己为什么更偏爱 Flutter。

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭