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语句忘记删掉），形成影响