工欲善其事,必先利其器之—react-native-debugger调试react native应用

调试react应用通常利用chrome的inspector的功能和两个最常用的扩展
1、React Developer Tools (主要用于debug组件结构)
2、Redux DevTools (主要用于debug redux store的数据)
在这里插入图片描述
在这里插入图片描述
对于react native应用,我们一般就使用react-native-debugger了,它是一个独立的应用,需要单独安装,在mac下可以用如下命令安装或到官网下载安装包

# mac 终端下使用如下命令安装, cask参数是针对安装有GUI界面的APP
brew install --cask react-native-debugger

RN工程添加依赖

RN工程中需要安装如下两个包

yarn add redux-devtools-extension remote-redux-devtools

RN工程创建store的配置

# 引入 composeWithDevTools方法,利用方法生成composeEnhancers并创建store实例
import {composeWithDevTools} from 'redux-devtools-extension';

通常的常规用法

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';const store = createStore(reducer, composeWithDevTools(applyMiddleware(...middleware),// other store enhancers if any
));

使用 Enhancers的情况

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';const composeEnhancers = composeWithDevTools({// Specify name here, actionsBlacklist, actionsCreators and other options if needed
});
const store = createStore(reducer, /* preloadedState, */ composeEnhancers(applyMiddleware(...middleware),// other store enhancers if any
));

具体的场景参考官方文档的指引 https://github.com/zalmoxisus/redux-devtools-extension#1-with-redux

RN调试

1、先启动react-native-debugger应用
2、然后按正常步骤开启RN应用的debug模式
3、最后没有任何异常的话,就在react-native-debugger界面查看组件结构,以及调试JS代码,收集与分析store的数据变化了

查看network

默认的react-native-debugger的network监视,是看不到react native 应用的网络请求的,需要更改下react-native-debugger的配置
在这里插入图片描述
打开文件后,修改defaultNetworkInspect的值为true,然后重启后生效!enjoy!

参考文档

  • https://github.com/zalmoxisus/redux-devtools-extension#1-with-redux
  • https://github.com/jhen0409/react-native-debugger
  • How to use Redux devtools with React Native

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/2309.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue动态多级表头+行列合计+可编辑表格

新建组件&#xff1a;Table.vue <template><el-table-column :label"coloumnHeader.label" :prop"coloumnHeader.label"><template v-for"item in coloumnHeader.children"><tableColumnv-if"item.children &&am…

Java项目查询统计表中各状态数量

框架&#xff1a;SpringBoot&#xff0c;Mybatis&#xff1b;数据库&#xff1a;MySQL 表中设计2个状态字段&#xff0c;每个字段有3种状态&#xff0c;统计这6个状态各自的数量 sql查询语句及结果如图 SQL&#xff1a; SELECT SUM(CASE WHEN A0 THEN 1 ELSE 0 END) AS A0…

数据分析的iloc和loc功能

大家好&#xff0c;在处理大型数据集时&#xff0c;使用有效的数据操作和提取技术是必要的。Pandas数据分析库提供了强大的工具&#xff0c;用于处理结构化数据&#xff0c;包括使用iloc和loc函数访问和修改DataFrame元素的能力。在本文中&#xff0c;我们将探讨iloc和loc之间的…

Java 【dubbo rpc改feign调用】解决调用服务提供方无法传递完整参数问题

dubbo rpc改feign调用&#xff0c;feign调用接口异常统一处理 服务调用方服务提供方 【框架改造问题点记录&#xff0c;dubbo改为spring cloud alibaba】 【第二篇】feign接口异常解决 【描述】多参数情况下&#xff0c;调用服务提供方无法传递完整参数、改SpringQueryMap原因是…

论文笔记--OpenPrompt: An Open-source Framework for Prompt-learning

论文笔记--OpenPrompt: An Open-source Framework for Prompt-learning 1. 文章简介2. 文章概括3 文章重点技术4. 文章亮点5. 原文传送门 1. 文章简介 标题&#xff1a;OpenPrompt: An Open-source Framework for Prompt-learning作者&#xff1a;Ning Ding, Shengding Hu, We…

短视频seo矩阵系统源码开发部署

目录 短视频矩阵源码部署步骤简单易懂&#xff0c;开发者只需按照以下几个步骤进行操作&#xff1a; 代码展示---seo关键词分析 开发要点&#xff1a; 代码展示如下&#xff1a; 开发部署注意事项&#xff1a; 说明&#xff1a;本开发文档适用于短视频seo矩阵系统源码开发…

django中批量添加对象SupplierNature.objects.bulk_create(SupplierNature对象)

insert_list [] for i in range(10000):namef"{i} "insert_list.append(MyModel(namename)) MyModel.objects.bulk_create(insert_list)注明&#xff1a;创建的是对象

PostgreSQL考试难不难 ?

当涉及到PostgreSQL考试的详细难度&#xff0c;以下是一些可能涉及的主题和考点&#xff0c;这些主题在不同的考试中可能有所不同&#xff1a; 1.数据库基础知识&#xff1a;数据库的基本概念、关系型数据库模型、表、字段、主键、外键等。 2.SQL语言&#xff1a;对SQL语言的掌…

ACME申请SSL证书

1.开放443端口 firewall-cmd --permanent --add-port443/tcp # 开放443端口 firewall-cmd --reload # 重启防火墙(修改配置后要重启防火墙)2.安装ACME # 安装acme curl https://get.acme.sh | sh -s email你的邮箱地址 # 别名 alias acme.sh~/.acme.sh/acme.sh3.使用ACME申请…

攻防世界-web-easytornado

题目描述&#xff1a;Tornado 框架。打开链接是一个简单的界面 1. 思路分析 看到有个/flag.txt&#xff0c;我们点击进去看下 发现传入了两个参数&#xff0c;一个是filename&#xff0c;还有一个是filehash 看到里面的内容&#xff0c;提示我们真正的flag在 /flllllllllllla…

Django auto_now=True 不更新

create_time models.DateTimeField(db_column"CreateTime", auto_now_addTrue) update_time models.DateTimeField(db_column"UpdateTime", auto_nowTrue) 现象&#xff1a; update_time 的auto_now设置为True&#xff0c;更新了表格里的某个属性的值&…

【LeetCode 算法】Walking Robot Simulation 模拟行走机器人 - 二分

文章目录 Walking Robot Simulation 模拟行走机器人问题描述&#xff1a;分析代码二分 Tag Walking Robot Simulation 模拟行走机器人 问题描述&#xff1a; 机器人在一个无限大小的 XY 网格平面上行走&#xff0c;从点 (0, 0) 处开始出发&#xff0c;面向北方。该机器人可以…

【自监督预训练 2023】MCL

【自监督预训练 2023】MCL 论文题目&#xff1a;Multi-Level Contrastive Learning for Dense Prediction Task 中文题目&#xff1a;稠密预测任务的多级对比学习 论文链接&#xff1a;https://arxiv.org/abs/2304.02010 论文代码&#xff1a;https://github.com/GuoQiushan/MC…

Unity视角拉近时物体缺失的问题处理

在Unity的开发过程中&#xff0c;我们可能会遇到以下情况&#xff1a; 就是在场景的不断编辑中&#xff0c;突然又一次打开场景&#xff0c;再拉近或拉远场景视角时&#xff0c;会出现场景中的对象会显示不全的问题。 出现了这样的情况会让场景的预览很不友好。 出现这个问题的…

rust

文章目录 rustCargoCreating a rust project How to Debug Rust Programs using VSCodebasic debuggingHow to pass arguments in Rust debugging with VS Code. References rust Cargo Cargo is a package management tool used for downloading, compiling, updating, and …

行为型模式 - 命令模式

概述 日常生活中&#xff0c;我们出去吃饭都会遇到下面的场景。 定义&#xff1a; 将一个请求封装为一个对象&#xff0c;使发出请求的责任和执行请求的责任分割开。这样两者之间通过命令对象进行沟通&#xff0c;这样方便将命令对象进行存储、传递、调用、增加与管理。 结构 …

Hugging News #0717: 开源大模型榜单更新、音频 Transformers 课程完成发布!

每一周&#xff0c;我们的同事都会向社区的成员们发布一些关于 Hugging Face 相关的更新&#xff0c;包括我们的产品和平台更新、社区活动、学习资源和内容更新、开源库和模型更新等&#xff0c;我们将其称之为「Hugging News」。本期 Hugging News 有哪些有趣的消息&#xff0…

nacos注册中心+Ribbon负载均衡+完成openfeign的调用(超详细步骤)

目录 1.注册中心 1.1.nacos注册中心 1.2. 微服务注册和拉取注册中心的内容 2.3.修改订单微服务的代码 3.负载均衡组件 3.1.什么是负载均衡 3.2.什么是Ribbon 3.3.Ribbon 的主要作用 3.4.Ribbon提供的负载均衡策略 4.openfeign完成服务调用 4.1.什么是OpenFeign 4.2…

vscode remote-ssh配置

使用vscode的插件remote-ssh进行linux的远程控制。 在vscode上安装完remote-ssh插件后&#xff0c;还需要安装openssh-client。 openssh-client安装 先win R打开cmd&#xff0c;输入ssh&#xff0c;查看是否已经安装了。 如果没有安装&#xff0c;用管理员权限打开powershe…

Hive(25):Select高级查询之Subqueries子查询

1 from子句中子查询 在Hive0.12版本&#xff0c;仅在FROM子句中支持子查询。而且必须要给子查询一个名称&#xff0c;因为FROM子句中的每个表都必须有一个名称。 子查询返回结果中的列必须具有唯一的名称。子查询返回结果中的列在外部查询中可用&#xff0c;就像真实表的列一…