調(diào)試 React Native 應(yīng)用

訪問應(yīng)用程序內(nèi)開發(fā)者菜單：

1. 在 iOS 中搖動(dòng)設(shè)備或在虛擬機(jī)里按組合鍵 control + ? + z .

2. 在 Android 中搖動(dòng)設(shè)備或按硬件菜單按鈕 （舊的設(shè)備中以及大多數(shù)虛擬機(jī)中都有效，例如， 在 genymotion中，你可以按組合鍵 ? + m 來模擬點(diǎn)擊硬件菜單按鈕）

提示

要禁用產(chǎn)品構(gòu)建的開發(fā)人員菜單:

1. 在 iOS 中，打開 Xcode 中的項(xiàng)目，選擇 Product → Scheme → Edit Scheme... (或按組合鍵 ? + <).下一步, 在左邊的菜單中選擇 Run 然后將 Build Configuration 改為 Release。

2. 在 Android 中， 默認(rèn)情況下, 由 Gradle 建立發(fā)布的開發(fā)者菜單將被禁用(例如， Gralde 的assembleRelease 任務(wù))。 雖然這種行為可以通過傳遞給ReactInstanceManager#setUseDeveloperSupport 正確的值來自定義。

重加載

選擇 Reload (或者在 iOS 虛擬機(jī)中按組合鍵 ? + r) 將會(huì)重新加載作用于你的應(yīng)用程序中的 JavaScript 。 如果你增加了新的資源 (例如，將一幅圖添加到 iOS 中的 Images.xcassets ，或 Android 中的 res/drawable 文件夾) 或者對(duì)任何本地代碼進(jìn)行修改 ( iOS 中的 Objective-C/Swift 代碼或 Android 中的 Java/C++ 代碼),你將需要重新生成該應(yīng)用程序以使更改生效。

Chrome 開發(fā)工具

在 Chrome 中調(diào)試 JavaScript 代碼，在開發(fā)者菜單選擇 Debug in Chrome 。 將打開一個(gè)新的標(biāo)簽http://localhost:8081/debugger-ui。

在 Chrome 中，按下組合鍵 ? + option + i 或選擇 View → Developer → Developer Tools 切換開發(fā)工具控制臺(tái)。 啟用 捕獲異常時(shí)暫停 以獲得更佳的調(diào)試體驗(yàn)。

在實(shí)際設(shè)備上進(jìn)行調(diào)試：

1. 在 iOS 中，- 打開文件 RCTWebSocketExecutor.m 并更改 localhost 為你的電腦IP地址。搖動(dòng)設(shè)備打開開發(fā)菜單，選擇啟動(dòng)調(diào)試。

2. 在 Android 中， 如果你正在運(yùn)行通過 USB 連接的 Android 5.0+ 設(shè)備，您可以使用 adb 命令行工具來從設(shè)備到您的計(jì)算機(jī)設(shè)置端口轉(zhuǎn)發(fā)。 運(yùn)行： adb reverse 8081 8081 (參閱 此鏈接 以獲得 adb 命令詳情)。 或者，你可以打開設(shè)備上開發(fā)菜單并選擇開發(fā)設(shè)置，然后為設(shè)備設(shè)置更新調(diào)試服務(wù)器主機(jī)到您的計(jì)算機(jī)的 IP 地址。

React 開發(fā)工具 (可選)

安裝 React Developer Tools 作為谷歌瀏覽器的擴(kuò)展。這將允許您通過 React 在開發(fā)工具中導(dǎo)航組件層次結(jié)構(gòu) ( 更多詳情參閱 facebook/react-devtools )。

Live Reload

這個(gè)選項(xiàng)可觸發(fā) JS 在連接設(shè)備/模擬器上自動(dòng)刷新。啟用此選項(xiàng)：

1. 在 iOS 中，通過開發(fā)者菜單選擇 Enable Live Reload ，當(dāng) JavaScript 有任何改動(dòng)時(shí)，應(yīng)用程序會(huì)自動(dòng)重新加載。

2. 在 Android 中，啟動(dòng)開發(fā)菜單，進(jìn)入 Dev Settings 并選擇 Auto reload on JS change 選項(xiàng)。

FPS (每秒幀數(shù)) 顯示器

在 0.5.0-rc 以及更高的版本，為了幫助調(diào)試性能問題，你可以在開發(fā)者菜單啟用 FPS 圖形疊置。