React-Native基于Chrome调试方法

使用npxreact-nativerun-android进行Android应用调试

最新推荐文章于 2023-11-03 14:41:50 发布

原创最新推荐文章于 2023-11-03 14:41:50 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#chrome #react native #react.js

本文介绍了如何通过运行npxreact-nativerun-android命令启动Android应用，然后在Chrome浏览器中利用http://localhost:8081/debugger-ui/进行应用的开发者调试，包括查看网络请求和使用debugger工具进行问题排查。

1、运行命令：npx react-native run-android

2、打开Chrome浏览器，输入地址：http://localhost:8081/debugger-ui/

3、打开开发人员调试工具，可以查看网络请求和debugger，见下图：

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

whenwhenGo

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

react-native入门之调试

蛐蛐的博客

04-04

1819

如果想用其他的 JavaScript 调试器来代替 Chrome可以设置一个名为REACT_DEBUGGER的环境变量，其值为启动自定义调试器的命令。调试的流程依然是从开发者菜单中的 Debug 选项开始。被指定的调试器需要知道项目所在的目录（可以一次传递多个目录参数，以空格隔开）。

react-native chrome调试如何在控制面板network看到网络请求日志

闫瑞锋的博客

05-28

1331

参与评论您还未登录，请先登录后发表或查看评论

react-native-debugger

09-11

windows 0.12.1版本，兼容比较老的reactnative版本

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开发者菜单&Chrome调试

小小T的专栏

09-27

4563

React Native项目的开发者菜单打开如下： Reload Reload即将项目中js代码部分重新生成bundle，然后传输给模拟器或手机； Reload在只是修改了js代码的情况下，如果要预览修改结果，你不需要重新编译你的应用。在这种情况下，你只需要告诉React Native重新加载js即可。注意：如果你修改了native 代码或修改了Images.xcassets、res/d...

react-native调试

weixin_40466351的博客

10-27

2756

一些老的教程和文章会提到 React 的 Chrome 插件，这一插件目前并不支持 React Native，而且调试本身并不需要这个插件。注意：使用 Chrome 调试目前无法观测到 React Native 中的网络请求，你可以使用功能更强大的第三方的react-native-debugger或是官方的flipper（注意仅能在 0.62 以上版本可用）来观测。如果页面中有debug，会进入debug模式，会方便我们的调试。我用的真机调试，手机摇晃会出现出现的页面，点击debug。

react-native使用谷歌浏览器调试

热门推荐

番薯大佬的专栏

06-21

1万+

通过谷歌浏览器Chrome调试React Native程序步骤一：先在模拟器上运行项目步骤二：选中模拟器，同时使用键盘上的组合键"Command + D"打开Developer Menu菜单，并单击选择”Debug JS Remotely"步骤三：在打开的谷歌浏览器里选择开发者工具：菜单——视图——开发者——开发者工具步骤四：在模拟器里刷新项目"Command + R"则会看到调试效果注意：要停...

react-native-calendar-strip：易于使用且外观精美的React Native日历组件

02-05

React本机日历条易于使用且外观精美的React Native日历组件。由和使用:red_heart:︎ 目录安装 $ npm install react-... 由于，Chrome调试器可能导致此更新出现问题。为防止滚动条末端出现日期偏移，请将minDate和

react-native-intro-demo:来自我对 React-Native 的简短介绍的现场演示代码

06-13

10. **调试和测试**：React-Native 提供了开发者工具，如 Chrome 开发者工具或 Expo DevTools，用于实时调试和性能分析。此外，单元测试和集成测试也是保证代码质量的重要手段。通过研究"react-native-intro-demo...

react-native项目调试

泊一的博客

07-25

1012

文章目录一、通过谷歌浏览器调试二、用`react-native-debugger` 来调试三、总结一、通过谷歌浏览器调试按ctrl+m 模拟器上就会出现下面的弹窗，然后选择Debug 然后就会在谷歌浏览器中打开按F12就能打开控制台查看，但是无法审查元素，这些元素还是当前页面的，不是我们编写的页面还有一个问题就是不能查看发出的请求，这个可以通过配置来解决，在根目录下的index.js中添加如下配置即可 GLOBAL.XMLHttpRequest = GLOBAL.origina

React Native调试插件

chichengjunma的专栏

09-01

3102

基于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

如何通过 Chrome调试React Native程序-ios

weixin_30550271的博客

08-18

256

1.下载 New React Developer Tools ，向Chrome添加此扩展程序（浏览器右上角—》设置），启用开发者模式 2.在模拟器下单击”Debug JS Remotely” 启动JS远程调试功能。此时Chrome会被打开，同时会创建一个“http://localhost:8081/debugger-ui.” Tab页。 3.视图—》开发者—》开发者工具—》sources分页即...

react native基本调试技巧

weixin_33775572的博客

05-25

172

刚入坑RN，很多小坑都要摸索很久才明白。今天咱们就来填console.log()的坑。废话不多说，开始讲步骤！！ 1、在模拟器中打开开发者菜单，选择 Debug JS Remotely，会自动在浏览器中打开一个地址为 http://192.168.10.98:8081/debugger-ui/ 的调试页面。　　 2、打开如下页面，接下来就跟咱们前端调试步骤一模一样了。按F12或...

ReactNative调试方法

YANGDAHUAN的专栏

02-25

2020

我们开发任何软件都逃不过调试，ReactNative也不例外，那么如何调试呢？ 1、打开谷歌浏览器设置 2、打开扩展程序商店 3、搜索扩展程序react developer tools 4、安装 5、运行程序在运行带RN的工程后，当前页面下ios模拟器通过cmd+D(真机可以通过摇一摇),android通过Menu按键，...

3分钟带你玩转React Native研发所有调试技巧

柏灿的博客

02-07

6344

原文地址 http://www.52learn.wang/archives/1071 1、React Native Dev tool的安装在利用Chrome调试之前，首先需要在Chrome中安装React Native Dev tool工具。安装步骤如下：（1）点击Chrome右上角的按钮（2）点击设置按钮（3）点击扩展程序（4

用android studio调试react native中的原生代码(windows+android)

qq_32294071的博客

11-03

1204

要用Android Studio调试React Native原生代码， 1. 需要先在终端中运行react-native start命令启动React Native服务器。 2. 然后，在Android Studio中打开你的React Native项目（\android\build.gradle），连接你的设备或者启动模拟器。 3. 接下来，点击Android Studio的“Attach Debugger to Android Process”按钮，选择你的设备或模拟器，然后选择你的React Nat

react native调试在谷歌浏览器中查看network信息

徐同保的专栏

04-07

5956

使用React Native Debugger 调试过程中Network无法抓取网络请求。 /** * Set up XMLHttpRequest. The native XMLHttpRequest in Chrome dev tools is CORS * aware and won't let you fetch anything from the internet. * * You can use this module directly, or just require Initi

react-native调试攻略 -- Android Studio

宏斌的博客

05-12

2351

这里使用的是Android Studio的模拟器，一下是模拟器和真机的调试总结从网页转到app不适应的一点就是网页经常控制台调试，而用了几天react-native感觉哪总说不上来的不舒服，后来对比发现我常用的调试用不了了，这就很难受，后来在网上看了很多的相关文章，在总结自己的使用经验有了以下的调试经验开发者菜单方法1 在模拟器上按CTRL + M就可以打开开发者菜单方法2 在命令行启动react-native项目时下面会有这么两句，意思在图上有标注在命令行输入d也可以打开模拟器的开发者菜单 3

React和Redux应用开发必备——chrome页面调试扩展包

我是Amo

12-22

310

React和Redux应用开发必备——chrome页面调试扩展包 React Devtools，可以检视React组件的树形结构，下载地址如下：chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi Redux Devtools，可以检视Redux数据流，可以将Store状态跳跃到任何一个历史状态，也就是所谓的“时间旅行”功能，下载地址如下：chrome.google.com/webs

react-native的断点调试插件