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怎么办?
解决方法
- 通过注释 /*eslint-disabled*/ 禁掉当前文件的no-debugger
- 愉快的进行debugger
- 最后把 /*eslint-disabled*/ 和debugger删掉就可以了
备注:
- 似乎RN打包时候会自动把debugger删掉????
- 有个babel插件,可以用来去掉debugger语句 babel-plugin-transform-remove-debugger
优缺点描述
- 优点:直接在项目中调试,方便
- 缺点: 调试过程中可能会遗留多余的代码(debugger语句忘记删掉),造成影响
React-Native三种断点调试方式的流程和优缺点比较的更多相关文章
- 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之十二 || 三种跨域方式比较,DTOs(数据传输对象)初探
更新反馈 1.博友@落幕残情童鞋说到了,Nginx反向代理实现跨域,因为我目前还没有使用到,给忽略了,这次记录下,为下次补充.此坑已填 2.提示:跨域的姊妹篇——<三十三║ ⅖ 种方法实现完美跨 ...
- Kubernetes的三种外部访问方式:NodePort、LoadBalancer和Ingress(转发)
原文 http://cloud.51cto.com/art/201804/570386.htm Kubernetes的三种外部访问方式:NodePort.LoadBalancer和Ingress 最近 ...
- 框架源码系列九:依赖注入DI、三种Bean配置方式的注册和实例化过程
一.依赖注入DI 学习目标1)搞清楚构造参数依赖注入的过程及类2)搞清楚注解方式的属性依赖注入在哪里完成的.学习思路1)思考我们手写时是如何做的2)读 spring 源码对比看它的实现3)Spring ...
- VMware的三种网络连接方式区别
关于VMware的三种网络连接方式,NAT,Bridged,Host-Only ,在刚接触的时候通常会遇到主机Ping不通虚拟机而虚拟机能Ping得通主机:主机与虚拟机互不相通等等网络问题.本文就这三 ...
- .NET中的三种接口实现方式
摘自:http://www.cnblogs.com/zhangronghua/archive/2009/11/25/1610713.html 一般来说.NET提供了三种不同的接口实现方式,分别为隐式接 ...
- Apache Spark探秘:三种分布式部署方式比较
转自:链接地址: http://dongxicheng.org/framework-on-yarn/apache-spark-comparing-three-deploying-ways/ 目 ...
- [转]详述DHCP服务器的三种IP分配方式
DHCP就是动态主机配置协议(Dynamic Host Configuration Protocol),它的目的就是为了减轻TCP/IP网络的规划.管理和维护的负担,解决IP地址空间缺乏问题.这种网络 ...
- Binding 中 Elementname,Source,RelativeSource 三种绑定的方式
在WPF应用的开发过程中Binding是一个非常重要的部分. 在实际开发过程中Binding的不同种写法达到的效果相同但事实是存在很大区别的. 这里将实际中碰到过的问题做下汇总记录和理解. 1. so ...
- windows phone 三种数据共享的方式(8)
原文:windows phone 三种数据共享的方式(8) 本节实现的内容是数据共享,实现的效果描述:首先是建立两个页面,当页面MainPage通过事件导航到页面SecondPage是,我们需要将Ma ...
随机推荐
- 程序员的算法课(19)-常用的图算法:最短路径(Shortest Path)
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/m0_37609579/article/de ...
- Netty学习——Thrift的入门使用
Netty学习——Thrift的入门使用 希望你能够,了解并使用它.因为它是一个效率很高的框架 官网地址:http://thrift.apache.org/ 1.Thrift数据类型 一门技术如果需要 ...
- 社交媒体登录Spring Social的源码解析
在上一篇文章中我们给大家介绍了OAuth2授权标准,并且着重介绍了OAuth2的授权码认证模式.目前绝大多数的社交媒体平台,都是通过OAuth2授权码认证模式对外开放接口(登录认证及用户信息接口等). ...
- Python一秒搭建ftp服务器,帮助你在局域网共享文件【华为云技术分享】
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...
- 转:SpringBoot系列: 使用 flyway 管理数据库版本
Flyway 和 Liquibase 都是 Java 项目中常用的 DB migration 工具, 从使用简便性看,Flyway 比 Liquibase 更简单, 从 github 的 star 数 ...
- iOS开发UI篇—Quartz2D使用(图形上下文栈
转自:http://www.cnblogs.com/wendingding/p/3782489.html 一.qurza2d是怎么将绘图信息和绘图的属性绘制到图形上下文中去的? 说明: 新建一个项目, ...
- uglify-js 和uglify-es
uglify-js 它不支持压缩 es6,参考github的issue It seems like uglify-js does not support es6? uglify-js在压缩代码时,遇到 ...
- Django开发登录功能实战
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:凡夫俗子66 Django 如果是定义函数写登录路由,需要判断请求方法 ...
- 60%的人不懂Python进程Process,你懂吗?
前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:蒋狗 新手注意:如果你Python基础学的不够扎实,遇问题没人解答 ...
- 基于iCamera测试模拟摄像头-TVP5150模块小结
基于iCamera测试模拟摄像头-TVP5150模块小结 首先先认识下模拟摄像头,相信大家都不陌生, CCD模拟摄像头 CMOS模拟摄像头 可以看到,ccd摄像头电路较复杂,接口少,而cmos摄像头, ...