調試 React Native 應用

訪問應用程序內開發(fā)者菜單：

1. 在 iOS 中搖動設備或在虛擬機里按組合鍵 control + ? + z .

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

提示

要禁用產品構建的開發(fā)人員菜單:

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

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

重加載

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

Chrome 開發(fā)工具

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

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

在實際設備上進行調試：

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

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

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

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

Live Reload

這個選項可觸發(fā) JS 在連接設備/模擬器上自動刷新。啟用此選項：

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

2. 在 Android 中，啟動開發(fā)菜單，進入 Dev Settings 并選擇 Auto reload on JS change 選項。

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

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