React Native(以下簡稱RN)為傳統(tǒng)前端開發(fā)者打開了一扇新的大門。其中，使用瀏覽器的調(diào)試工具去Debug移動端的代碼，無疑是最吸引開發(fā)人員的特性之一。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、小程序設(shè)計(jì)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了洛陽免費(fèi)建站歡迎大家使用！

試想一下，當(dāng)你在手機(jī)屏幕按下一個(gè)按鈕，處理事件的代碼就可以立即在瀏覽器的調(diào)試工具里進(jìn)行斷點(diǎn)調(diào)試，而且每當(dāng)你對代碼進(jìn)行修改，界面便可以完成快速地重載，省去昂長的編譯時(shí)間，這會是多么提高工作效率。

傳統(tǒng)的Web前端開發(fā)人員自然很熟悉瀏覽器的調(diào)試工具，但是對于如何將其在RN中使用以便和移動端結(jié)合起來，也許會相當(dāng)陌生。這也成為了一些開發(fā)者跨入RN移動開發(fā)大門的第一道小門檻。

本文是筆者一邊參考官方文檔，一邊摸索RN調(diào)試過程的記錄。希望能夠幫助新手開發(fā)者走出一小步，更快地邁過這道門檻。

在開始之前，你需要搭建好本地開發(fā)環(huán)境，并有一部Android 5.0版本以上的手機(jī)可供連接至電腦。

首先，使用官方工具react-native-cli創(chuàng)建好一個(gè)初始化的工程，并安裝好依賴。

安裝的命令為“react-native init DebugTest”（DebugTest為我們這次的項(xiàng)目名稱）

安裝完成后，就會多出一個(gè)名為DebugTest項(xiàng)目文件夾，文件夾內(nèi)結(jié)構(gòu)如下：

讓我們把項(xiàng)目運(yùn)行起來。我這里是在Windows下開發(fā)Android平臺的應(yīng)用，并且在此之前，已經(jīng)用USB線連接好了一臺Android版本7.1.1的真機(jī)。

運(yùn)行項(xiàng)目的方法，就是進(jìn)入DebugTest項(xiàng)目目錄，此時(shí)執(zhí)行命令行react-native run-android。注意，這里啟動時(shí)會新彈出另一個(gè)窗口，用于在8081端口啟動一個(gè)叫做Metro Bundler的服務(wù)，這個(gè)窗口在開發(fā)時(shí)是需要保持運(yùn)行著的。

同時(shí)，可以看到原cmd命令行窗口，顯示在真機(jī)上安裝了apk，并自動對8081端口進(jìn)行了某種映射，使真機(jī)上的應(yīng)用和我們將要調(diào)試的代碼建立了動態(tài)的關(guān)聯(lián)。這個(gè)過程會比較消耗開發(fā)者電腦的系統(tǒng)資源，耐心等待一會兒就好。

當(dāng)Metro Bundler窗口顯示index.js的映射進(jìn)度達(dá)到100%時(shí)，手機(jī)上就可以看到默認(rèn)的應(yīng)用界面了。

同時(shí)，我們也可以退出應(yīng)用，在手機(jī)的桌面上找到這個(gè)安裝好的應(yīng)用。這里，它的名字就是DebugTest，圖標(biāo)是一個(gè)默認(rèn)的安卓樣子。

我們進(jìn)入這個(gè)應(yīng)用，這時(shí)如果搖一搖手機(jī)，會彈出調(diào)試相關(guān)的設(shè)置：

Reload就是重刷整個(gè)應(yīng)用，類似于在瀏覽器的F5刷新。

Debug JS Remotely這個(gè)我們先留一個(gè)懸念，待會再來看。

先看看Enable Live Reload和Enable Hot Reloading。這兩個(gè)都可以實(shí)現(xiàn)在代碼保存時(shí)自動更新界面，它們區(qū)別是：Live Reload會重刷整個(gè)界面，相當(dāng)于手動執(zhí)行一次Reload。而Hot Reloading控制得更精準(zhǔn)，它不會重刷整個(gè)界面，只會更新修改代碼時(shí)影響的那個(gè)范圍。官方文檔里描述的是：This will allow you to persist the app's state through reloads. 也就是說，Hot Reloading時(shí)整個(gè)應(yīng)用的狀態(tài)是不會改變的，頁面也是不會整個(gè)重刷的。有趣的是，與Live Reload對比，Hot Reloading的Reloading這個(gè)正在進(jìn)行時(shí)的語法，也似乎意味著Hot Reloading是當(dāng)程序正在運(yùn)行時(shí)去熱乎乎地替換。

也許是因?yàn)楦鞣N Reloading過于強(qiáng)大，它有時(shí)會出一點(diǎn)問題，比如在開啟Live Reload或者Hot Reloading后，偶爾代碼錯(cuò)誤時(shí)手機(jī)上彈出的紅屏界面在代碼修改好后仍然不能恢復(fù)，這種時(shí)候，就需要手動Reload界面才能解決。

讓我們只是Enable Live Reload，然后從react-native引入Button，在View里加上一個(gè)按鈕。

這個(gè)時(shí)候，保存代碼。手機(jī)界面確實(shí)立即就變化了！說明Live Reload確實(shí)生效了。

不過，不是我們想要的界面，而是出現(xiàn)紅屏錯(cuò)誤提示。

不用怕，遇到問題很正常。這時(shí)，可以從頭細(xì)心閱讀錯(cuò)誤提示，發(fā)現(xiàn)它指出The title prop of a Button must be a string，并且這個(gè)error is located at: in Button (at App.js:37)。根據(jù)這個(gè)線索，我們看到App.js的第37行，正是剛才添加的Button代碼。

查閱文檔發(fā)現(xiàn)，在RN里，Button組件有許多屬性，其中onPress和title這兩個(gè)屬性是required的，也就是必須要有。

所以我們修改代碼，

保存，手機(jī)界面就刷新了，并顯示出剛才添加的Button。

這里還有一小點(diǎn)值得注意，如果只給Button里的title設(shè)了值，而沒有給onPress設(shè)置，界面不會出紅色錯(cuò)誤，而是在最下面出現(xiàn)一條黃色警告。仔細(xì)看，會發(fā)現(xiàn)其實(shí)這兩個(gè)屬性的Type不一樣。由此可知，當(dāng)需要的類型是string而實(shí)際是undefined時(shí)，會報(bào)error，而需要的類型是function而實(shí)際是undefined時(shí)，只會報(bào)warnning。

同時(shí)可以看到，在上面的代碼中，當(dāng)按鈕按下時(shí)，會調(diào)用一個(gè)打log的事件。但是打出的log在哪兒可以看到呢？

有兩種方法。 第一種是在命令行顯示，在項(xiàng)目當(dāng)前目錄（注意，一定要在項(xiàng)目當(dāng)前目錄）再啟動一個(gè)新命令行窗口，輸入

就可以在最下面看到輸出的內(nèi)容了，它不僅可以實(shí)時(shí)反饋現(xiàn)有的輸入，還保存了之前的輸入。比如，下面三次輸入，前兩次輸入是在之前還沒有開啟這個(gè)命令行窗口時(shí)按下的。

也許你會想：我不是想在命令窗口看到輸出，而是想能夠在瀏覽器里那樣看到輸出，甚至斷點(diǎn)調(diào)試。這就是查看log的第二種方法。

回到本文的初衷。讓我們回頭再看看調(diào)試設(shè)置界面中的Debug JS Remotely選項(xiàng)，現(xiàn)在點(diǎn)擊它。這時(shí)會彈出Chrome的一個(gè)標(biāo)簽（當(dāng)然，本地需要預(yù)先安裝有Chrome）。

注意：這里的Status：Debugger session #0 active就表示程序與該頁面成功建立連接了。

這個(gè)時(shí)候在瀏覽器開發(fā)者工具的調(diào)試窗口，也能看到打出的log。而且它還可以更進(jìn)一步地進(jìn)行斷點(diǎn)調(diào)試。

為更好地嘗試調(diào)試功能，我們修改一下代碼，添加一個(gè)sayHello方法輸出log。

保存，和預(yù)想的一樣，頁面刷新了，因?yàn)長ive Reload。

如同調(diào)試Web前端代碼一樣，我們打開瀏覽器的開發(fā)者工具，找到代碼文件，并在sayHello函數(shù)里打一個(gè)斷點(diǎn)。這個(gè)時(shí)候，按下手機(jī)上的Test按鈕，可以看到程序執(zhí)行到斷點(diǎn)停下了，這與調(diào)試網(wǎng)頁代碼是多么相似：

不過，與調(diào)試純網(wǎng)頁代碼有兩點(diǎn)不同。

第一，瀏覽器的頁面上看不到應(yīng)用界面，只能在手機(jī)上看到界面。

第二，手機(jī)上的界面在程序被斷住的情況下，仍然可以接收事件。舉個(gè)例子，就在此時(shí)，手機(jī)上該應(yīng)用的界面表面上沒什么反應(yīng)，但是，如果你再多次按下Test按鈕，事件都會被記住，到時(shí)候會挨個(gè)響應(yīng)。只是現(xiàn)在程序斷在了第一次按下按鈕的時(shí)候。

我們讓程序繼續(xù)（如果在斷點(diǎn)期間多次按下按鈕，會有多次被斷住）。

我們按下了6次，調(diào)試工具下也顯示出6次輸出。這是與調(diào)試網(wǎng)頁時(shí)的不同：當(dāng)調(diào)試網(wǎng)頁時(shí)，一旦執(zhí)行到斷點(diǎn)，瀏覽器的頁面其實(shí)就不可點(diǎn)擊了。

到這一步，是不是覺得使用RN開發(fā)也沒有那么難呢？

至于Toggle Inspector, Show Perf Monitor, Start/Stop Sampling Profiler和Dev Settings，我們暫時(shí)可以不用管它們。

目前已經(jīng)知道了調(diào)試設(shè)置中Remote JS Debugging, Live Reload和 Hot Reloading。相信我們已經(jīng)可以比較從容地Debug簡單的 RN應(yīng)用了。這里以Windows下的Android為例，其實(shí)在Mac下開發(fā)iOS也是相似的。

總結(jié)

希望本文的分享對嘗試RN的新手朋友有所幫助。如果大家對下篇想講的內(nèi)容有自己的想法，請留言告訴我，我們一定會認(rèn)真考慮。

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家也可以留言交流，謝謝大家對創(chuàng)新互聯(lián)的支持。

分享文章：ReactNative基礎(chǔ)入門之調(diào)試ReactNative應(yīng)用的一小步-創(chuàng)新互聯(lián)
標(biāo)題網(wǎng)址：http://vcdvsql.cn/article34/didose.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、微信小程序、網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、品牌網(wǎng)站建設(shè)、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)