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

最新推荐文章于 2023-05-02 20:51:08 发布
最新推荐文章于 2023-05-02 20:51:08 发布
阅读量194 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/myswift-lhq/p/5783369.html
版权

1.下载 New React Developer Tools ，向Chrome添加此扩展程序（浏览器右上角—》设置），启用开发者模式

2.在模拟器下单击”Debug JS Remotely” 启动JS远程调试功能。此时Chrome会被打开，同时会创建一个“http://localhost:8081/debugger-ui.” Tab页。

3.视图—》开发者—》开发者工具—》sources分页即可打开React文件进断点设置

转载于:https://www.cnblogs.com/myswift-lhq/p/5783369.html

weixin_30550271
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React Native开发者菜单&Chrome调试
小小T的专栏
09-27 4408
React Native项目的开发者菜单打开如下： Reload Reload即将项目中js代码部分重新生成bundle，然后传输给模拟器或手机； Reload在只是修改了js代码的情况下，如果要预览修改结果，你不需要重新编译你的应用。在这种情况下，你只需要告诉React Native重新加载js即可。 注意：如果你修改了native 代码或修改了Images.xcassets、res/d...
react-native使用谷歌浏览器调试
热门推荐
番薯大佬的专栏
06-21 1万+
通过 谷歌浏览器Chrome调试React Native程序步骤一：先在模拟器上运行项目步骤二：选中模拟器，同时使用键盘上的组合键"Command + D"打开Developer Menu菜单，并单击选择”Debug JS Remotely"步骤三：在打开的谷歌浏览器里选择开发者工具：菜单——视图——开发者——开发者工具步骤四：在模拟器里刷新项目"Command + R"则会看到调试效果注意：要停...
React-Native基于Chrome调试方法
jackywcw的博客
05-02 1034
1、运行命令：npx react-native run-android。
React native 浏览器调试
王铁涛技术博客
05-22 2706
1.在 chrome 中打开: http://10.10.10.137:8081/debugger-ui./2. 确保 开发服务器开启  2.1 开启服务器: node_modules/react-native/  中执行  npm run start
VSCode中React项目配置Debugger for Chrome插件
Gamin
02-02 1123
1、默认配置 默认的配置如下。但不知道出于什么原因，之前在另一个项目能使用这个配置运行成功，但现在这个项目使用这边配置运行不了。 { // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { ...
react-native-custom-tabs：适用于React Native的Chrome自定义标签
02-05
React本机自定义选项卡 适用于React Native的。 “自定义标签”仅适用于Android，因此在每个平台上的行为如下。 安卓如果已安装Chrome，请在Chrome中打开您已自定义外观的URL。 如果尚未安装，请在其他浏览器中打开...
react-native-grocery:React使用React Native进行杂货店应用程序原型设计
05-25
8. **测试与调试**：React Native提供了一套工具链，包括模拟器、真实设备测试、Chrome开发者工具等，便于测试和调试应用。`react-native run-android` 和 `react-native run-ios` 命令分别用于启动Android和iOS...
react-native-google-cast：用于Google Cast SDK的React Native包装器
02-05
该库包装了适用于Android和iOS（甚至将来可能是Web / Chrome）的本地Google Cast SDK，提供了统一JavaScript界面​​。 它使用TypeScript编写，因此类型将始终是最新的。 版本概述 RNGC React本机 目的 1.x :...
react-native-master.zip
10-03
- **调试工具**：包括Chrome开发者工具和专用的React Native调试器，可以帮助开发者检查组件树、调试JavaScript代码、追踪性能问题等。 在实际项目中，你可能还需要结合其他工具和技术，如Redux或MobX进行状态管理...
react-native-course:with使用React Native构建本机Android和iOS应用
05-28
React Native 是一个由Facebook开发的开源框架，它允许开发者使用JavaScript和React的组件化思想来构建原生的Android和iOS应用程序。这个“react-native-course”很可能是为了教授如何利用React Native进行跨平台...
React-Native iOS真机调试(新版)
weixin_34281537的博客
03-17 379
2019独角兽企业重金招聘Python工程师标准>>> ...
react native调试在谷歌浏览器中查看network信息
徐同保的专栏
04-07 5638
使用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调试插件
chichengjunma的专栏
09-01 3032
基于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
react-native项目调试
泊一的博客
07-25 811
文章目录一、通过谷歌浏览器调试二、用`react-native-debugger` 来调试三、总结 一、通过谷歌浏览器调试 按ctrl+m 模拟器上就会出现下面的弹窗，然后选择Debug 然后就会在谷歌浏览器中打开 按F12就能打开控制台查看，但是无法审查元素，这些元素还是当前页面的，不是我们编写的页面 还有一个问题就是不能查看发出的请求，这个可以通过配置来解决，在根目录下的index.js中添加如下配置即可 GLOBAL.XMLHttpRequest = GLOBAL.origina
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 Debugger在Chrome中查看network信息
weixin_33955681的博客
12-06 2833
最近在开发一个React Native的项目，用了React Native Debugger之后发现在浏览器中看不到network的信息，十分不方便。然后查了一下资料，找了一个最简单的解决方案，顺便就分享和记录一下~ 第一步 在入口文件（App.js）中加入这一行 GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XML...
React在chrome浏览器下调试工具
weixin_33979203的博客
05-23 2771
2019独角兽企业重金招聘Python工程师标准>>> ...
如何使用React Native Debugger来调试 而不使用RN默认的debugger-ui
hzxOnlineOk的博客
10-31 3870
操作步骤: 1.关闭Chrome浏览器中所有的http://localhost:/debugger-ui 页面（RN默认的debugger工具）； 2.打开下载好的react-native-debugger应用； 3.在模拟器或者真机（摇一摇，点击Debug JS Remotely）上打开开发者菜单, 启用 Debug JS Remotely。 4.右键黑框区域，选择Enable...
RN 0.52.0以后版本不能使用chrome调试android的问题解决方法
少林扫地人的博客
09-03 1650
RN0.52版本后，开启remote debug后， chrome会显示报错，类似 Failed to load http://192.168.0.105:8081/index.delta?platform=ios&dev=true&minify=false: No ‘Access-Control-Allow-Origin’ header is present on the re...
解决React-Native-Webview ios加载时候白屏问题
最新发布
06-11
React-Native-Webview是一个React Native中的WebView组件，同样会出现白屏问题。以下是一些可能的原因和解决方案： 1. iOS版本问题：如果使用的是较老的iOS版本，可能会出现WebView组件的兼容性问题，导致白屏。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值