[原创］如何打开chrome react native developer debug and monitor the react native simulator

最新推荐文章于 2023-10-27 16:49:08 发布
原创 最新推荐文章于 2023-10-27 16:49:08 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何在模拟器中启动Google Chrome并使用其内置的开发者工具。通过特定的快捷键打开新的标签页，并输入特定URL来激活调试界面。

launch google chrome

run the app in the simulator

in the simulator ,choose shake guesture from the hardware menu,
now open a new tab in chrome, hit cmd+alt+j and the chrome developer tools are opened, then input http://localhost:8081/debugger-ui

React Native开发者菜单&Chrome调试
小小T的专栏
09-27 4582
React Native项目的开发者菜单打开如下： Reload Reload即将项目中js代码部分重新生成bundle，然后传输给模拟器或手机； Reload在只是修改了js代码的情况下，如果要预览修改结果，你不需要重新编译你的应用。在这种情况下，你只需要告诉React Native重新加载js即可。 注意：如果你修改了native 代码或修改了Images.xcassets、res/d...
React Native Debugger在Chrome中查看network信息
weixin_33955681的博客
12-06 2946
最近在开发一个React Native的项目，用了React Native Debugger之后发现在浏览器中看不到network的信息，十分不方便。然后查了一下资料，找了一个最简单的解决方案，顺便就分享和记录一下~ 第一步 在入口文件（App.js）中加入这一行 GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XML...
react-native调试
weixin_40466351的博客
10-27 2788
一些老的教程和文章会提到 React 的 Chrome 插件，这一插件目前并不支持 React Native，而且调试本身并不需要这个插件。注意：使用 Chrome 调试目前无法观测到 React Native 中的网络请求，你可以使用功能更强大的第三方的react-native-debugger或是官方的flipper（注意仅能在 0.62 以上版本可用）来观测。如果页面中有debug，会进入debug模式，会方便我们的调试。我用的真机调试，手机摇晃会出现出现的页面，点击debug。
Chrome禁止状态下的React流程及开启状态下的React流程
weixin_30888707的博客
08-28 512
前言：项目使用RTMP流播放Flash视频 当Chrome禁止Flash　　React走创建周期后停止（componentWillMount、render、componentDidMount） 当Chrome由关闭状态转换为开启状态 　　React走更新流程（shouldComponentUpdate、componentWillUpdate、render） 转载于:https:/...
react native 使用chrome调试时面板说法
zhizhuodewo6的博客
06-13 297
React-Native调试技巧总结
aa671125的专栏
03-08 7719
前言React-Native调试不像本地代码调试一样方便,但也是可以调试的.毕竟如果程序不能调试,那基本无法正常开发.接下来我们看下如何调试RN的程序.1.打开开发者菜单.开发者菜单是RN的一个调试菜单,里面有很多选项,例如重新加载程序,Debug模式开启,实时更新,快速热修复,类似于instant run,开发者调试设置等等.开发者菜单只可在debug版本中调出,假如是apk的release版本则
react-native-performance-monitor：React Native Performance Monitor-React Native渲染性能的实时图形
02-03
通过该项目，您可以在React Native应用程序中查看渲染时间的实时图表。 目的是使您能够创建实验（即更改标记并查看它如何影响渲染时间）。 安装 npm i react-native-performance-monitor --save npx react-native-...
react-native-debug-server-host:适用于iOS的React Native Debug服务器主机
04-30
Debug Server Host For iOS 更新(2017.10.12) 增加pod集成方式 解决根rootViewController不是navigation时，无法显示...增加了rnpm install react-native-DebugServerHost的支持。 更新（2016.11.15） 由于reac
精选资源
适用于 Android 和 iOS 的 React Native NFC 模块 react-native-nfc
05-28
为 React Native 带来 NFC 功能。灵感来自phonegap-nfc和react-native-ble-manager 该库最简单（也是最常见）的用例是读取NFC包含 的标签NDEF，可以通过以下代码实现： import React from 'react'; import {View, ...
react-native-debugger
09-11
"react-native-debugger"是一款专为React Native开发者设计的强大调试工具，尤其适用于使用较旧版本如0.12.1的React Native项目。这个工具允许开发者深入到应用程序的JavaScript层进行调试，提供了一种直观的方式来...
精选资源
react-native-unity-view：在react native中显示统一视图
02-05
将unity3d集成到React Native应用程序中。 添加一个react native组件以显示统一性。 在iOS和Android上均可使用。 例 见 推荐克隆演示项目以学习API。 确保在打开问题之前正确运行演示。 预习 如何使用 安装 npm ...
React Native 调试技巧
0729Liang
08-03 1349
一、打开RN开发者菜单 不管是真机还是模拟器，都需要首先输入命令，打开RN开发者菜单，命令如下 adb shell input keyevent 82 真机左右摇晃手机几下，也可以打开开发者菜单 菜单如下图 里面有很多选项,例如重新加载程序、Debug模式开启、实时更新、快速热修复，类似于instant run、开发者调试设置等等。 但是开发者菜单只可在debug版本中调出,假如...
关于React引入组件报错
m0_46088410的博客
10-14 3095
错误信息 Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might hav
React常见问题
njjackzhong的专栏
08-12 1258
React常见问题React问题Something went wrong.react引用可视化组件recharts/ResponsiveContainer，报错Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to exp
ReactNative新手入门,常见BUG
ye1061625903的博客
08-08 1588
cannot add a child that doesn’t have a YogaNode … 布局文件编写错误,可能是布局文件中注视导致的.
react（81）--没有正确引入导出错误
歌谣的博客
07-28 714
Uncaught (in promise) Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might hav.
React Native 之 - chrome调试
White feathe 的博客
02-28 1万+
React Native 之 - chrome调试首先，摇晃手机打开menu菜单然后，此时会在chrome 打开 http://localhost:8081/debugger-ui如果你的端口是8081（8081是ReactNative内置端口），在浏览器输入http://localhost:8081 且没出现403，那么，一路畅通的运行吧！使用 快捷键【 Ctrl + Shift + j(Win
react-native使用谷歌浏览器调试
热门推荐
番薯大佬的专栏
06-21 1万+
通过 谷歌浏览器Chrome调试React Native程序步骤一：先在模拟器上运行项目步骤二：选中模拟器，同时使用键盘上的组合键"Command + D"打开Developer Menu菜单，并单击选择”Debug JS Remotely"步骤三：在打开的谷歌浏览器里选择开发者工具：菜单——视图——开发者——开发者工具步骤四：在模拟器里刷新项目"Command + R"则会看到调试效果注意：要停...
React Native调试插件
chichengjunma的专栏
09-01 3109
基于Chrome浏览器的React Native插件的安装与调试 1.在github上下载插件，链接如下： https://github.com/facebook/react-devtools/releases   2.将后缀名为.crx的文件拖入Chrome浏览器 react-devtools-0.14.6.crx  拖入Chrome浏览器 3.手机选择Debug JS R
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值