React-Native三种断点调试方式的流程和优缺点比较

RN的调试和web端的调试虽然相似,但是也有一些不同,下面就来比较一下三种断点调试方法的差异

总结: 感觉还是第一种好一些

1.React-Native-Debugger工具调试法

1.1 首先我们得下载一个React Native Debugger的调试软件

1.2其次,我们找到我们要调试的那个文件,假设这个文件叫做account.js,那么我们打开上面下载的软件

并且同时按下ctrl + P,这时候会弹出一个输入框,输入文本就可以找到我们的account.js

1.3 打开之后,就可以愉快的断点调试啦,点击左边显示行数的数字的地方,就可以在那一行断点

1.4 但如果我们的代码很长,有上千行怎么办呢? 好像一时找不到那个文件啊

这时候ctrl + F, 弹出搜索框,按照代码里的关键位置的代码去搜索就好了,点击按钮就会跳到那一行

优缺点描述

  • 优点:调试过程不会对代码有影响
  • 缺点: 代码很长,而且涉及文件多时调试可能繁琐一些,不能直接在代码里进行操作

2.VScode插件:React Native tool 进行调试

2.1. 首先在VScode中进行搜索,并且install

2.2 调整配置文件

2.3 点击左上角的绿色三角形标志进行调试

优缺点描述

  • 优点:调试过程不会对代码有遗留影响,而且能够直接在项目代码中调试
  • 缺点: 在RN中调试过程将会非常缓慢,和web显著不同,几乎要比其他两种调试方式慢十倍

3.直接在代码中写入debugger语句

我们可以直接在项目中写入debugger语句进行调试

但是项目中的eslint不让我们debugger怎么办?

解决方法

  1. 通过注释 /*eslint-disabled*/ 禁掉当前文件的no-debugger
  2. 愉快的进行debugger
  3. 最后把 /*eslint-disabled*/ 和debugger删掉就可以了

备注:

  • 似乎RN打包时候会自动把debugger删掉????
  • 有个babel插件,可以用来去掉debugger语句 babel-plugin-transform-remove-debugger

优缺点描述

  • 优点:直接在项目中调试,方便
  • 缺点: 调试过程中可能会遗留多余的代码(debugger语句忘记删掉),造成影响

原文地址:https://www.cnblogs.com/penghuwan/p/11755266.html

时间: 2024-10-27 18:25:55

React-Native三种断点调试方式的流程和优缺点比较的相关文章

《React Native》之程序调试篇

??代码调试,在程序开发的过程中尤为重要,能协助开发者快速定位问题. ??此文重点介绍React Native开发的程序调试工具及过程. ??呼出Developer Menu对话框,如下图所示: Android物理设备或者IOS物理设备 : 摇晃手机呼出. Android模拟器:Command? + M IOS模拟器:Command? + D 开发者菜单在release(生成环境)不会被呼出. 程序调试我们分成三类: 内容预览,调试效果 Bug查找,断点调试 性能分析 内容预览,调试效果 ??当

总结PHP 三种注释的方式

任何一门编程语言都有编程注释,注释的作用可以调试,可以描述代码的作用等等,说说那么PHP三种注释的方式 1, // 这是单行注释 2,# 这也是单行注释 3,/* */多行注释块 /*这是多行注释块它横跨了多行*/ PHP 代码中的注释不会被作为程序来读取和执行.它唯一的作用是供代码编辑者阅读. 原文地址:https://www.cnblogs.com/huthon/p/9742150.html

LVS:三种负载均衡方式比较+另三种负载均衡方式

转:http://blog.csdn.net/u013256816/article/details/50705578 什么是LVS? ??首先简单介绍一下LVS (Linux Virtual Server)到底是什么东西,其实它是一种集群(Cluster)技术,采用IP负载均衡技术和基于内容请求分发技术.调度器具有很好的吞吐率,将请求均衡地转移到不同的服务器上执行,且调度器自动屏蔽掉服务器的故障,从而将一组服务器构成一个高性能的.高可用的虚拟服务器.整个服务器集群的结构对客户是透明的,而且无需修

三种加载方式

重点总结:    即:三种加载方式    1>传统加载方式------默认路径:tomcat/bin/目录    2>使用ServletContext对象-----默认路径:web应用(工程)目录    3>使用类加载器------默认路径:WEB-INF/classes/目录 一.利用ServletContext对象读取资源文件--默认目录为:工程(应用)路径                重点方法:                        InputStream getReso

.NET中的三种接口实现方式

摘自:http://www.cnblogs.com/zhangronghua/archive/2009/11/25/1610713.html 一般来说.NET提供了三种不同的接口实现方式,分别为隐式接口实现.显式接口实现.混合式接口实现.这三种方式各有各的特点. 首先来看隐式接口实现,这恐怕是我们使用最多的一种接口实现,因为隐匿接口实现是.NET的默认接口实现方式.下面让我们来看一个隐式接口实现的例子: using System; internal class MyClass { public

Apache Spark探秘:三种分布式部署方式比较

目前Apache Spark支持三种分布式部署方式,分别是standalone.spark on mesos和 spark on YARN,其中,第一种类似于MapReduce 1.0所采用的模式,内部实现了容错性和资源管理,后两种则是未来发展的趋势,部分容错性和资源管理交由统一的资源管理系统完成:让Spark运行在一个通用的资源管理系统之上,这样可以与其他计算框架,比如MapReduce,公用一个集群资源,最大的好处是降低运维成本和提高资源利用率(资源按需分配).本文将介绍这三种部署方式,并比

LVS:三种负载均衡方式比较

转载于http://soft.chinabyte.com/25/13169025.shtml 1.什么是LVS? 首先简单介绍一下LVS (Linux Virtual Server)到底是什么东西,其实它是一种集群(Cluster)技术,采用IP负载均衡技术和基于内容请求分发技术.调度器具有很好的吞吐率,将请求均衡地转移到不同的服务器上执行,且调度器自动屏蔽掉服务器的故障,从而将一组服务器构成一个高性能的.高可用的虚拟服务器.整个服务器集群的结构对客户是透明的,而且无需修改客户端和服务器端的程序

Binding 中 Elementname,Source,RelativeSource 三种绑定的方式

在WPF应用的开发过程中Binding是一个非常重要的部分. 在实际开发过程中Binding的不同种写法达到的效果相同但事实是存在很大区别的. 这里将实际中碰到过的问题做下汇总记录和理解. 1. source = {binding} 和source = {binding RelativeSource={RelativeSource self},Path=DataContext}效果相同 理解:{binding} 不设定明确的绑定的source,这样binding就去从本控件类为开始根据可视树的层

PDO的三种连接数据库的方式

PDO的三种连接数据库的方式 PDO的出现是为了解决PHP与各个数据库的连接处理都有各自的函数的问题,它的高度抽象,使得使用起来极其的方便.由于最常用的搭配就是PHP+Mysql,所以这里就以连接mysql为例. 一.参数形式 [php] view plaincopyprint? try{ $dsn      = 'mysql:host=localhost;dbname=myblog'; $username = 'root'; $passwd   = '123456'; $pdo      =