专栏首页彭湖湾的编程世界React-Native三种断点调试方式的流程和优缺点比较

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语句忘记删掉),造成影响

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • RN调试坑点总结(不定期更新)

    众所周知,RN经常遇到无可奈何的超级Bug, 那么对于这些问题的终极解决办法是什么呢?

    外婆的彭湖湾
  • 【npm】利用npm安装/删除/发布/更新/撤销发布包

    什么是npmnpm是javascript的包管理工具,是前端模块化下的一个标志性产物 简单地地说,就是通过npm下载模块,复用已有的代码,提高工作效率 1.从社...

    外婆的彭湖湾
  • 前端黑魔法:webworker动态化,无需JS文件创建worker

    前几天,我和一位知乎网友讨论这个问题的时候,觉得这非常有意思,所以写了这篇文章作为记录

    外婆的彭湖湾
  • 移动端真机调试

    很多时候,我们在进行移动端开发时,都是先在PC端使用手机模拟器进行调试,没有问题后,我们才会在手机端的浏览器进行测试,这个时候,如果没有出现问题,皆大欢喜。但是...

    grain先森
  • DBA遇到问题时的30 个反应,你是哪一种?

    开发应用程序是一个非常有压力的工作。没有人是完美的,因此在这个行业中,代码中出现 bug 是相当普遍的现象。面对 bug,一些程序员会生气,会沮丧,会心烦意乱,...

    数据和云
  • 初探Windows用户态调试机制

    最近写Named Pipe Server Using Completion Routines 发现在delphi调试器中会阻塞在:

    战神伽罗
  • dotnet 代码调试方法

    本文将会从简单到高级,告诉大家如何调试 dotnet 的代码,特别是桌面端。本文将会使用到 VisualStudio 大量的功能,通过各种好用的功能提高调试方法

    林德熙
  • 程序员遇到Bug时的30个反应

    开发应用程序是一个非常有压力的工作。没有人是完美的,因此在这个行业中,代码中出现bug是相当普遍的现象。面对bug,一些程序员会生气,会沮丧,会心烦意乱,甚至会...

    哲洛不闹
  • 程序员遇到Bug时的30个反应

    开发应用程序是一个非常有压力的工作。没有人是完美的,因此在这个行业中,代码中出现bug是相当普遍的现象。面对bug,一些程序员会生气,会沮丧,会心烦意乱,甚至会...

    哲洛不闹
  • .NET 反编译调试神器:dnSpy了解一下

    可前往dnSpy官网下载或直接从我的分享链接下载(内置包含.NET Framework 4.7.1,若运行提示需要安装,可解压找到.NET Framework ...

    圣杰

扫码关注云+社区

领取腾讯云代金券