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

最新推荐文章于 2024-05-28 14:57:36 发布
最新推荐文章于 2024-05-28 14:57:36 发布
阅读量1.4w 收藏 4
点赞数 1
分类专栏： react-native学习 文章标签： react react-native 调试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/potato512/article/details/80757876
版权

学习交流：https://gitee.com/potato512/Learn_ReactNative

react-native学习交流QQ群：806870562


通过 谷歌浏览器Chrome调试React Native程序
步骤一：先在模拟器上运行项目
步骤二：选中模拟器，同时使用键盘上的组合键"Command + D"打开Developer Menu菜单，并单击选择”Debug JS Remotely"

步骤三：在打开的谷歌浏览器里选择开发者工具：菜单——视图——开发者——开发者工具

最低0.47元/天 解锁文章
番薯大佬
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
React-Native基于Chrome调试方法
jackywcw的博客
05-02 1025
1、运行命令：npx react-native run-android。
React Native Debugger reactnative可视化调试工具
03-16
mac端可视化调试react或者reactnative工具，可以调试redux应用状态
如何本地 Debug React 源码
最新发布
hawk2014bj的博客
05-28 737
对于React 代码 debug 的两种方式，个人更倾向于第二种方式，编译源代码的方式稍微麻烦一些，但是对原始代码没有任何侵入性。
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
dabusidede的博客
08-26 648
安装包 npm install react-native-web --save 配置webpack resolve: { alias: { // 这里会将 import … ‘react-native’ 替换为 ‘react-native-web’ ‘react-native’: ‘react-native-web’, } } 运行webpack打包即可 完美
ReactNative调试方法
YANGDAHUAN的专栏
02-25 1818
    我们开发任何软件都逃不过调试，ReactNative也不例外，那么如何调试呢？    1、打开谷歌浏览器设置            2、打开扩展程序商店            3、搜索扩展程序react developer tools        4、安装    5、运行程序在运行带RN的工程后，当前页面下ios模拟器通过cmd+D(真机可以通过摇一摇),android通过Menu按键，...
[转] 三步将你的 React Native 项目运行在 Web 浏览器上面
weixin_30386713的博客
09-01 430
转载自：https://www.cnblogs.com/qiangxia/p/5301712.html 转载于:https://www.cnblogs.com/zifeiy/p/11441933.html
react-native-qrcode-svg：基于react-native-svg和node-qrcode的React Native QR码生成器
02-05
讨论： ： 产品特点轻松渲染QR码图像（可选）嵌入徽标安卓的iOS安装安装依赖包yarn add react-native-svg react-native-qrcode-svg 要么npm i -S react-native-svg react-native-qrcode-svg 如果您使用的是React ...
react-native-rename：仅用一个命令即可重命名react-native应用
01-30
该软件包假定您使用react-native init创建了react-native项目。 注意：此软件包不会尝试正确重命名构建工件，例如ios/build或Cocoa Pod安装目标。 重命名项目后，您应该清理，构建并重新安装第三方依赖项，以使新...
react-native-iap：应用内购买的react-native本机模块
02-03
公告 最近， react-native-iap模块维护得不好。 我们正在考虑再次参与并使模块更健康。 请参考并与我们分享您或您的组织如何使用它。... 如果您正在寻找比react-native-iap更进一步的模块，我们建议您使用
react-native-image-to-pdf:react-native插件可将图像转换为PDF
05-26
入门$ npm install react-native-image-to-pdf --save 或者$ yarn add react-native-image-to-pdf 大多是自动安装$ react-native link react-native-image-to-pdf 手动安装的iOS 在XCode的项目导航器中，右键单击“ ...
react-native-udp：react-native的节点的dgram
02-05
yarn add react-native-udp 或npm： npm install --save react-native-udp 使用React Native> = 0.60 不再需要手动链接软件包。 iOS平台： $ cd ios && pod install && cd .. ＃iOS上的CocoaPods需要这个额外的...
React-Native 环境安装及调试（Mac版）
weixin_34129145的博客
11-12 220
原文地址：React-Native 环境安装及调试（Mac版） 准备工作 安装必要的软件，这里就不详细说了，具体可参考官方文档 安装React-Native Cli npm install -g create-react-native-app Xcode 安装升级到 8+ 初始化RN项目 react-native init rnHelloWord，可能会比较慢，要耐心等到 ...
WebStorm+Chrom 调试React Native 项目图文详解
kill_bugs的博客
02-25 9699
在看这篇文章之前，大家要准备好的
3分钟带你玩转React Native研发所有调试技巧
柏灿的博客
02-07 6190
原文地址 http://www.52learn.wang/archives/1071 1、React Native Dev tool的安装 在利用Chrome调试之前，首先需要在Chrome中安装React Native Dev tool工具。 安装步骤如下： （1）点击Chrome右上角的按钮 （2）点击设置按钮 （3）点击扩展程序 （4
解决Chrome 本地调试React，Sources下找不到源代码的问题
LYY1448019681的博客
09-12 5892
解决Chrome 本地调试React，Sources下找不到源代码的问题 先看一下，我在Sources下的代码情况，代码都是已经编译过的，导致我本地无法调试，之前一直都是可以调试的状态，忽然一下看不到源代码了，不能调试还是有点心慌。 解决方法： 后来仔细想了一下今天对代码做了哪些修改，想到更改了webpack的配置，将devtool做了修改。 于是找到问题原因。 当webpack的devtool 为 (none) 时，打包后 本地调试 就会没有源代码。 具体可参照 webpack 的
react native开发react-native-debugger调试工具使用教程
A15029296293的博客
03-29 3618
众所周知react-native环境搭建比较繁琐，会出现一大堆问题，环境安装好后，调试react-native项目也着实让人头疼，今天推荐一下react-native-debugger调试工具上面是react-native-debugger下载链接。
react-native debug工具
destiny_JL的博客
10-09 1852
模拟器内，windows使用快捷键win+M 键调出开发菜单，点击debug，自动打开浏览器调试页面http://localhost:8081/debugger-ui。https://juejin.cn/post/6844903732497399816补充：节点样式可以使用模拟器中的开发菜单show Element Inspector，查看样式信息。安装watchman 环境，之后实践发现可以不安装，安装后项目将不能运行，可能是与react内的watchman冲突。第一步：打开模拟器内的开发菜单。
React Native项目运行与调试--安卓
weixin_39285322的博客
07-07 668
2、安装成功后，打开调试工具。确保React Native的所有调试器客户端都已关闭，通常是http://localhost:/debugger-ui。4、点击DEBUG选项，调试工具就会捕获到对应应用了。8、在上面这个窗口中，输入r代表重新reload项目，输入d代表打开真机上开发者菜单。7、这样代表运行成功，如果中间失败了，重新执行命令再试一下。4、通过USB连接手机与电脑，并打开手机的USB调试开关。3、打开开发者菜单，在上面应用运行窗口按d。，第一次运行比较慢，等待一会。
react-native link react-native-pdf zsh: command not found: react-native
12-29
要解决"zsh: command not found: react-native"的问题，你需要确保已经正确安装了react-native-cli并且已经将其添加到了系统的环境变量中。 以下是在Windows和Mac上安装和配置react-native-cli的步骤： Windows： 1. 打开命令提示符或PowerShell。 2. 运行以下命令来安装react-native-cli： ``` npm install -g react-native-cli ``` 3. 等待安装完成后，你应该能够在命令提示符或PowerShell中使用react-native命令。 Mac： 1. 打开终端。 2. 运行以下命令来安装react-native-cli： ``` sudo npm install -g react-native-cli ``` 输入你的密码以确认安装。 3. 安装完成后，运行以下命令来查找react-native-cli的安装路径： ``` which react-native ``` 记下这个路径，我们称之为路径A。 4. 打开你的bash配置文件（例如：~/.bash_profile、~/.bashrc、~/.zshrc等）。 5. 在文件末尾添加以下行： ``` export PATH="$PATH:路径A" ``` 将路径A替换为你在步骤3中记录的路径。 6. 保存并关闭文件。 7. 在终端中运行以下命令来使配置生效： ``` source ~/.bash_profile ``` 如果你使用的是其他bash配置文件，请相应地修改命令。 完成上述步骤后，你应该能够在终端中使用react-native命令了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

番薯大佬

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值