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語句忘記刪掉），形成影響