React-Native基于Chrome调试方法

最新推荐文章于 2023-11-03 14:41:50 发布
原创 最新推荐文章于 2023-11-03 14:41:50 发布 · 1.4k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 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，见下图：

 

whenwhenGo
关注
react-native chrome调试如何在控制面板network看到网络请求日志
闫瑞锋的博客
05-28 1331
相关解决方案 react-native-debugger 首先必须在 github 下载 react-native -debugger 压缩包 下载完直接安装 然后手机打开进入可视化界面 然后点击菜单弹出模拟器 选择第二项 Debug 这个时候会自动启动进入你安装好的可视化工具react-native-debugger界面 然后选择network 就会查看到网络请求 但是前提你得注释相关源码 0.61以上 找到项目的以下路径node_modules/react-native/Libraries\Core
react-native入门之调试
蛐蛐的博客
04-04 1819
如果想用其他的 JavaScript 调试器来代替 Chrome可以设置一个名为REACT_DEBUGGER的环境变量，其值为启动自定义调试器的命令。调试的流程依然是从开发者菜单中的 Debug 选项开始。被指定的调试器需要知道项目所在的目录（可以一次传递多个目录参数，以空格隔开）。
react-native-debugger
09-11
windows 0.12.1版本，兼容比较老的reactnative版本
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 之 - 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调试
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项目调试
泊一的博客
07-25 1012
文章目录一、通过谷歌浏览器调试二、用`react-native-debugger` 来调试三、总结 一、通过谷歌浏览器调试 按ctrl+m 模拟器上就会出现下面的弹窗，然后选择Debug 然后就会在谷歌浏览器中打开 按F12就能打开控制台查看，但是无法审查元素，这些元素还是当前页面的，不是我们编写的页面 还有一个问题就是不能查看发出的请求，这个可以通过配置来解决，在根目录下的index.js中添加如下配置即可 GLOBAL.XMLHttpRequest = GLOBAL.origina
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调试插件
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 2352
这里使用的是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的断点调试插件
最新发布
03-08
### 推荐的 React Native 断点调试插件 对于希望提高开发效率并有效排查错误的开发者来说，选择合适的断点调试工具至关重要。以下是几种适用于 React Native 的断点调试解决方案： #### 1. Chrome Debugger Chrome 浏览器内置的强大 JavaScript 调试功能同样可以应用于 React Native 开发中。通过简单的设置即可让应用程序中的 JS 部分在 Chrome 中被调试[^1]。 - **优点** - 支持源映射(Source Map)，使得可以直接查看和编辑原始 TypeScript 或 JSX 文件。 - 提供丰富的调试特性，如变量监视、调用栈跟踪以及性能分析等。 - **缺点** - 对于某些特定版本的 Android 设备可能存在兼容性问题。 ```javascript // 启动远程调试模式，在代码合适位置加入如下语句来暂停执行等待连接浏览器 if (__DEV__) { debugger; } ``` #### 2. Flipper Flipper 是 Facebook 官方推出的跨平台移动应用调试工具，不仅限于 React Native 使用者。它集成了多种实用的小部件(widgets), 可以帮助开发者更轻松地完成诸如网络请求监控、状态管理等功能模块的数据观察与交互操作[^2]。 - **特点** - 用户界面友好直观；支持多设备同步查看日志信息； - 内置 Inspector 查看组件树结构及其属性样式； - 插件化设计允许第三方扩展其能力范围。 ![flipper](https://camo.githubusercontent.com/7d8a9e0cdd5fcbfcdeefebccabdfafbadbdcbebcadbfdbdaaa6edbaecfafeacfdffcafbfadfacbd/68747470733a2f2f666c69707065722e666263646e2e636f6d2f696d672f6c6f676f2e706e67) #### 3. VSCode + React-Native-Tools 扩展包 Visual Studio Code (VSCode) 结合官方维护的 `React-Native-Tools` 插件能够提供完整的本地开发体验，包括但不限于语法高亮显示、智能感知提示(IntelliSense) 和集成终端(Terminal Integration)[^3]。 - **亮点** - 方便快捷键绑定实现快速跳转定义处(F12)/查找所有引用(Shift+F12); - 自动补全标签名、类名甚至整个表达式的输入过程； - 内嵌 Git 版本控制系统便于团队协作开发流程管理。 ```json { "version": "0.2.0", "configurations": [ { "name": "Debug iOS", "program": "${workspaceRoot}/index.js", "type": "reactnative", "request": "launch", "platform": "ios" } ] } ``` 综上所述，以上三种方式各有千秋，可以根据个人喜好和技术栈需求做出最佳选择。值得注意的是，无论采用哪种方法进行调试工作，都建议保持最新稳定版 SDK 环境以免遇到不必要的麻烦。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值