10纵顾,React Native之調(diào)試

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)試觅玻。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市培漏,隨后出現(xiàn)的幾起案子溪厘,更是在濱河造成了極大的恐慌,老刑警劉巖牌柄,帶你破解...
    沈念sama閱讀 221,820評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件畸悬,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡珊佣,警方通過(guò)查閱死者的電腦和手機(jī)蹋宦,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,648評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)咒锻,“玉大人冷冗,你說(shuō)我怎么就攤上這事』笸В” “怎么了蒿辙?”我有些...
    開(kāi)封第一講書(shū)人閱讀 168,324評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)滨巴。 經(jīng)常有香客問(wèn)我须板,道長(zhǎng),這世上最難降的妖魔是什么兢卵? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,714評(píng)論 1 297
  • 正文 為了忘掉前任习瑰,我火速辦了婚禮,結(jié)果婚禮上秽荤,老公的妹妹穿的比我還像新娘甜奄。我一直安慰自己柠横,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,724評(píng)論 6 397
  • 文/花漫 我一把揭開(kāi)白布课兄。 她就那樣靜靜地躺著牍氛,像睡著了一般。 火紅的嫁衣襯著肌膚如雪烟阐。 梳的紋絲不亂的頭發(fā)上搬俊,一...
    開(kāi)封第一講書(shū)人閱讀 52,328評(píng)論 1 310
  • 那天,我揣著相機(jī)與錄音蜒茄,去河邊找鬼唉擂。 笑死,一個(gè)胖子當(dāng)著我的面吹牛檀葛,可吹牛的內(nèi)容都是我干的玩祟。 我是一名探鬼主播,決...
    沈念sama閱讀 40,897評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼屿聋,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼空扎!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起润讥,我...
    開(kāi)封第一講書(shū)人閱讀 39,804評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤转锈,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后楚殿,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體黑忱,經(jīng)...
    沈念sama閱讀 46,345評(píng)論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,431評(píng)論 3 340
  • 正文 我和宋清朗相戀三年勒魔,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了甫煞。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,561評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡冠绢,死狀恐怖抚吠,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情弟胀,我是刑警寧澤楷力,帶...
    沈念sama閱讀 36,238評(píng)論 5 350
  • 正文 年R本政府宣布,位于F島的核電站孵户,受9級(jí)特大地震影響萧朝,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜夏哭,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,928評(píng)論 3 334
  • 文/蒙蒙 一检柬、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧竖配,春花似錦何址、人聲如沸里逆。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,417評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)原押。三九已至,卻和暖如春偎血,著一層夾襖步出監(jiān)牢的瞬間诸衔,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,528評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工颇玷, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留笨农,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,983評(píng)論 3 376
  • 正文 我出身青樓亚隙,卻偏偏與公主長(zhǎng)得像磁餐,于是被迫代替她去往敵國(guó)和親违崇。 傳聞我的和親對(duì)象是個(gè)殘疾皇子阿弃,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,573評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容