React Native(以下簡稱RN)為傳統前端開闢者翻開了一扇新的大門。个中，運用瀏覽器的調試東西去Debug挪動端的代碼，無疑是最吸收開闢人員的特徵之一。
試想一下，當你在手機屏幕按下一個按鈕，處置懲罰事宜的代碼就可以馬上在瀏覽器的調試東西里舉行斷點調試，而且每當你對代碼舉行修正，界面便可以完成疾速地重載，省去昂長的編譯時刻，這會是何等進步工作效率。
傳統的Web前端開闢人員天然很熟悉瀏覽器的調試東西，然則關於怎樣將其在RN中運用以便和挪動端結合起來，或許會相稱生疏。這也成為了一些開闢者跨入RN挪動開闢大門的第一道小門坎。
本文是筆者一邊參考官方文檔，一邊探索RN調試歷程的紀錄。願望可以協助新手開闢者走出一小步，更快地邁過這道門坎。
在最先之前，你須要搭建好當地開闢環境，並有一部Android 5.0版本以上的手機可供銜接至電腦。
起首，運用官方東西react-native-cli豎立好一個初始化的工程，並裝置好依靠。
裝置的敕令為“react-native init DebugTest”（DebugTest為我們此次的項目名稱）
裝置完成后，就會多出一個名為DebugTest項目文件夾，文件夾內構造以下：
讓我們把項目運轉起來。我這裡是在Windows下開闢Android平台的運用，而且在此之前，已用USB線銜接好了一台Android版本7.1.1的真機。
運轉項目的要領，就是進入DebugTest項目目次，此時實行敕令行react-native run-android。注重，這裏啟動時會新彈出另一個窗口，用於在8081端口啟動一個叫做Metro Bundler的效勞，這個窗口在開闢時是須要堅持運轉着的。
同時，可以看到原cmd敕令行窗口，顯如今真機上裝置了apk，並自動對8081端口舉行了某種映照，使真機上的運用和我們將要調試的代碼豎立了動態的關聯。這個歷程會比較斲喪開闢者電腦的系統資源，耐煩守候一會兒就好。
當Metro Bundler窗口顯現index.js的映照進度到達100%時，手機上就可以看到默許的運用界面了。
同時，我們也可以退出運用，在手機的桌面上找到這個裝置好的運用。這裏，它的名字就是DebugTest，圖標是一個默許的安卓模樣。
我們進入這個運用，這時刻假如搖一搖手機，會彈出調試相干的設置：
Reload就是重刷全部運用，類似於在瀏覽器的F5革新。
Debug JS Remotely這個我們先留一個牽挂，待會再來看。
先看看Enable Live Reload和Enable Hot Reloading。這兩個都可以實如今代碼保留時自動更新界面，它們區別是：Live Reload會重刷全部界面，相稱於手動實行一次Reload。而Hot Reloading掌握得更精準，它不會重刷全部界面，只會更新修正代碼時影響的誰人局限。官方文檔里形貌的是：This will allow you to persist the app’s state through reloads. 也就是說，Hot Reloading時全部運用的狀況是不會轉變的，頁面也是不會全部重刷的。風趣的是，與Live Reload對照，Hot Reloading的Reloading這個正在舉行時的語法，也好像意味着Hot Reloading是當順序正在運轉時去熱呼呼地替代。
或許是由於種種 Reloading過於壯大，它有時會出一點題目，比方在開啟Live Reload或許Hot Reloading后，偶然代碼毛病時手機上彈出的紅屏界面在代碼修正好后依然不能恢復，這類時刻，就須要手動Reload界面才處理。
讓我們只是Enable Live Reload，然後從react-native引入Button，在View里加上一個按鈕。
這個時刻，保留代碼。手機界面確切馬上就變化了！申明Live Reload確切見效了。
不過，不是我們想要的界面，而是湧現紅屏毛病提醒。
不必怕，遇到題目很正常。這時刻，可以重新仔細瀏覽毛病提醒，發明它指出The title prop of a Button must be a string，而且這個error is located at: in Button (at App.js:37)。依據這個線索，我們看到App.js的第37行，恰是適才增加的Button代碼。
查閱文檔發明，在RN里，Button組件有很多屬性，个中onPress和title這兩個屬性是required的，也就是必需要有。
所以我們修正代碼，
保留，手機界面就革新了，並顯現出適才增加的Button。
這裏另有一小點值得注重，假如只給Button里的title設了值，而沒有給onPress設置，界面不會出赤色毛病，而是在最下面湧現一條黃色正告。仔細看，會發明實在這兩個屬性的Type不一樣。由此可知，當須要的範例是string而現實是undefined時，會報error，而須要的範例是function而現實是undefined時，只會報warnning。
同時可以看到，在上面的代碼中，當按鈕按下時，會挪用一個打log的事宜。然則打出的log在哪兒可以看到呢？
有兩種要領。 第一種是在敕令行顯現，在項目當前目次（注重，肯定要在項目當前目次）再啟動一個新敕令行窗口，輸入
就可以在最下面看到輸出的內容了，它不僅可以及時迴響反映現有的輸入，還保留了之前的輸入。比方，下面三次輸入，前兩次輸入是在之前還沒有開啟這個敕令行窗口時按下的。
或許你會想：我不是想在敕令窗口看到輸出，而是想可以在瀏覽器里那樣看到輸出，以至斷點調試。這就是檢察log的第二種要領。
回到本文的初志。讓我們轉頭再看看調試設置界面中的Debug JS Remotely選項，如今點擊它。這時刻會彈出Chrome的一個標籤（固然，當地須要預先裝置有Chrome）。
注重這裏的Status：Debugger session #0 active就示意順序與該頁面勝利豎立銜接了。
這個時刻在瀏覽器開闢者東西的調試窗口，也能看到打出的log。而且它還可以更進一步地舉行斷點調試。
為更好地嘗試調試功用，我們修正一下代碼，增加一個sayHello要領輸出log。
保留，和料想的一樣，頁面革新了，由於Live Reload。
犹如調試Web前端代碼一樣，我們翻開瀏覽器的開闢者東西，找到代碼文件，並在sayHello函數里打一個斷點。這個時刻，按動手機上的Test按鈕，可以看到順序實行到斷點停下了，這與調試網頁代碼是何等類似：
不過，與調試純網頁代碼有兩點差別。
第一，瀏覽器的頁面上看不到運用界面，只能在手機上看到界面。
第二，手機上的界面在順序被斷住的情況下，依然可以吸收事宜。舉個例子，就在此時，手機上該運用的界面表面上沒什麼迴響反映，然則，假如你再屢次按下Test按鈕，事宜都會被記着，到時刻會挨個相應。只是如今順序斷在了第一次按下按鈕的時刻。
我們讓順序繼承（假如在斷點時期屢次按下按鈕，會有屢次被斷住）。
我們按下了6次，調試東西下也顯現出6次輸出。這是與調試網頁時的差別：當調試網頁時，一旦實行到斷點，瀏覽器的頁面實在就不可點擊了。
到這一步，是否是以為運用RN開闢也沒有那末難呢？
至於Toggle Inspector, Show Perf Monitor, Start/Stop Sampling Profiler和Dev Settings，我們臨時可以不必管它們。
現在已知道了調試設置中Remote JS Debugging, Live Reload和 Hot Reloading。置信我們已可以比較自在地Debug簡樸的 RN運用了。這裏以Windows下的Android為例，實在在Mac下開闢iOS也是類似的。
願望本文的分享對嘗試RN的新手朋儕有所協助。假如人人對下篇想講的內容有本身的主意，請留言告訴我，我們肯定會仔細斟酌。
挪動端運用開闢利器：
SpreadJS純前端表格控件、WijmoJS純前端控件集為您的挪動運用帶來越發天真的操縱體驗和更佳雅觀的表面作風，迎接下載。
擴大瀏覽：
