1,開(kāi)發(fā)中的紅屏和黃屏的問(wèn)題
紅屏或黃屏提示都只會(huì)在開(kāi)發(fā)版本中顯示栋盹,正式的離線包中是不會(huì)顯示的施逾。
A 紅屏錯(cuò)誤
應(yīng)用內(nèi)的報(bào)錯(cuò)會(huì)以全屏紅色顯示在應(yīng)用中(調(diào)試模式下),我們稱(chēng)為紅屏(red box)報(bào)錯(cuò)例获。你可以使用console.error()來(lái)手動(dòng)觸發(fā)紅屏錯(cuò)誤汉额。
B 黃屏警告
應(yīng)用內(nèi)的警告會(huì)以全屏黃色顯示在應(yīng)用中(調(diào)試模式下),我們稱(chēng)為黃屏(yellow box)報(bào)錯(cuò)榨汤。點(diǎn)擊警告可以查看詳情或是忽略掉蠕搜。 和紅屏報(bào)警類(lèi)似,你可以使用console.warn()來(lái)手動(dòng)觸發(fā)黃屏警告收壕。 在默認(rèn)情況下讥脐,開(kāi)發(fā)模式中啟用了黃屏警告√淦鳎可以通過(guò)以下代碼關(guān)閉:
console.disableYellowBox = true;
console.warn('YellowBox is disabled.');
你也可以通過(guò)代碼屏蔽指定的警告旬渠,像下面這樣設(shè)置一個(gè)數(shù)組:
console.ignoredYellowBox = ['Warning: ...'];
數(shù)組中的字符串就是要屏蔽的警告的開(kāi)頭的內(nèi)容。(例如上面的代碼會(huì)屏蔽掉所有以Warning開(kāi)頭的警告內(nèi)容)
紅屏和黃屏在發(fā)布版(release/production)中都是自動(dòng)禁用的端壳。
2告丢,訪問(wèn)控制臺(tái)日志
A 在運(yùn)行RN應(yīng)用時(shí),可以在終端中運(yùn)行如下命令來(lái)查看控制臺(tái)的日志:
$ react-native log-ios
$ react-native log-android
此外损谦,你也可以在iOS模擬器的菜單中選擇Debug → Open System Log...
來(lái)查看岖免。如果是Android應(yīng)用,無(wú)論是運(yùn)行在模擬器或是真機(jī)上照捡,都可以通過(guò)在終端命令行里運(yùn)行
adb logcat *:S ReactNative:V ReactNativeJS:V
命令來(lái)查看颅湘。
B Chrome開(kāi)發(fā)者工具
在開(kāi)發(fā)者菜單中選擇"Debug JS Remotely"選項(xiàng),即可以開(kāi)始在Chrome中調(diào)試JavaScript代碼栗精。點(diǎn)擊這個(gè)選項(xiàng)的同時(shí)會(huì)自動(dòng)打開(kāi)調(diào)試頁(yè)面 http://localhost:8081/debugger-ui
在Chrome的菜單中選擇Tools → Developer Tools
可以打開(kāi)開(kāi)發(fā)者工具闯参,也可以通過(guò)鍵盤(pán)快捷鍵來(lái)打開(kāi)(Mac上是Command?+ Option?+ IWindows上是Ctrl + Shift + I或是F12)。
打開(kāi)有異常時(shí)暫停(Pause On Caught Exceptions)選項(xiàng)悲立,能夠獲得更好的開(kāi)發(fā)體驗(yàn)鹿寨。
譯注:Chrome中并不能直接看到App的用戶(hù)界面,而只能提供console的輸出薪夕,以及在sources項(xiàng)中斷點(diǎn)調(diào)試js腳本脚草。
目前無(wú)法正常使用React開(kāi)發(fā)插件(就是某些教程或截圖上提到的Chrome開(kāi)發(fā)工具上多出來(lái)的React選項(xiàng)),但這并不影響代碼的調(diào)試原献。如果你需要像調(diào)試web頁(yè)面那樣查看RN應(yīng)用的jsx結(jié)構(gòu)馏慨,暫時(shí)只能使用Nuclide的"React Native Inspector"這一功能來(lái)代替埂淮。
使用Chrome開(kāi)發(fā)者工具來(lái)在設(shè)備上調(diào)試
對(duì)于iOS真機(jī)來(lái)說(shuō),需要打開(kāi) RCTWebSocketExecutor.m
文件写隶,然后將其中的"localhost"改為你的電腦的IP地址倔撞,最后啟用開(kāi)發(fā)者菜單中的"Debug JS Remotely"選項(xiàng)。
對(duì)于Android 5.0+設(shè)備(包括模擬器)來(lái)說(shuō)樟澜,將設(shè)備通過(guò)USB連接到電腦上后,可以使用adb
命令行工具來(lái)設(shè)定從設(shè)備到電腦的端口轉(zhuǎn)發(fā):
adb reverse tcp:8081 tcp:8081
如果設(shè)備Android版本在5.0以下叮盘,則可以在開(kāi)發(fā)者菜單中選擇"Dev Settings - Debug server host for device"秩贰,然后在其中填入電腦的”IP地址:端口“。
如果在Chrome調(diào)試時(shí)遇到一些問(wèn)題柔吼,那有可能是某些Chrome的插件引起的毒费。試著禁用所有的插件,然后逐個(gè)啟用愈魏,以確定是否某個(gè)插件影響到了調(diào)試觅玻。