React Native調試方法

訪問App內的開發菜單

你可以通過搖晃你的設備或者選擇iOS模擬器的Hardware菜單中的“Shake Gesture”來打開開發者菜單。你還可以在app運行於iPhone模擬器時使用Command+D快捷鍵，或者在運行Android模擬器時使用Command+M快捷鍵。

注意：在成品（release喎?/kf/ware/vc/" target="_blank" class="keylink">vcHJvZHVjYXRpb24gYnVpbGRzo6nW0L+qt6LV37LLtaW74bG7udix1aGjPC9wPg0KPC9ibG9ja3F1b3RlPg0KPGgyIGlkPQ=="刷新javascript">刷新JavaScript

不用每次你有改變時都重新編譯你的app，你可以直接重載你app的JavaScript代碼。要這樣做，就選擇開發者菜單中的”Reload“。你也可以在iOS模擬器中按Command+R或者在Android模擬器中按兩次R。

如果Command+R快捷鍵沒能重載iOS模擬器，去往Hardware菜單，選擇Keyboard，然後確保“Connect Hardware Keyboard”是勾選的。

自動重載

你可以通過讓你的app在你改變代碼時自動重載來加快你的開發速度。自動重載可以在開發者菜單中選擇“Enable Live Reload”來打開。

更進一步你可能想在添加新文件到JavaScript包中時保持app運行新的版本，可以通過選擇開發者菜單中的“Enable Hot Reloading”來打開。這可以讓你在重載中保持app的狀態。

有一些熱重載無法完美實現的情況。如果運行到了任何問題，使用全重載來重置你的app。

對於下面這些情況你可能需要重構你的app來讓改變生效：

你添加了新的資源到你原生app的包中，比如iOS的Images.xcassets中的圖片或者Android的res/drawable文件夾。 你修改了原生代碼（iOS上的Objective-C/Swift或者Android中的Java/C++）.

應用內的錯誤與警告提示（紅屏和黃屏）

錯誤和警告會在開發構建時顯示在你的app中。

錯誤（Errors）

app中的錯誤會在你的app中用紅色背景的全屏顯示。這個屏幕也叫RedBox。你可以使用 console.error() 來手動觸發一個。

警告（Warnings）

警告會在屏幕上用黃色背景顯示。這些警告條也叫YellowBox。點擊警告條來顯示更多信息或者讓它們不顯示。

和RedBox一樣，你可以使用 console.warn() 來觸發一個YellowBox。

YellowBox可以通過使用 console.disableYellowBox = true; 來在開發過程中關閉。特定的警告可以通過設置要忽略的前綴數組來說的手動忽略：console.ignoredYellowBox = [‘Warning:…’]

RedBox和YellowBox在發布構建中都是自動關閉的

訪問控制台日志

app運行時你可以通過在終端使用下面的命令為iOS和Android app顯示控制台日志：

react?nativelog?ios react-native log-android

你也可以通過在iOS模擬器中訪問 Debug -> Open System Log… 或者在Android app在設備或者模擬器上運行時在終端中運行 adb logcat *:S ReactNative:V ReactNativeJS:V 。

Chrome 開發者工具

在開發者菜單選擇“Debug JS Remotely”來在Chrome中調試JS代碼。這會打開一個新的tab為http://localhost:8081/debugger-ui。

在Chrome的菜單中選擇 Tools -> Developer Tools 來打開開發者工具。你也可以使用快捷鍵（Mac上為Command+Option+I，Windows上為Ctrl+Shift+I）來訪問開發者工具。你可能還會打開 Pause On Caught Exceptions 來獲取更好的調試體驗。

現在還不可能在Chrome開發者工具中使用“React”tab來檢查app小部件。你可以使用Nuclide的“React Native Inspector”作為工作區。

使用Chrome開發者工具在設備上調試

在iOS設備上，打開 RCTWebSocketExecutor.m 文件並將“localhost”改為你電腦的IP，然後在開發者菜單中選擇“Debug JS Remotely”.

在通過USB連接的Android 5.0+設備上，你可以使用 adb command line tool 來設置端口從設備轉發到你的電腦：

adb reverse tcp:8081 tcp:8081

或者，在開發者菜單選擇“Dev Settings”，然後更新“Debug server host for device”的設置來匹配你電腦的IP地址。

如果運行到任何問題，可能是你的某個Chrome擴展程序不小心干擾了調試器。嘗試禁用所有的擴展器然後重新一個個地打開它們直到你找到有問題的擴展程序。

使用自定義的JS調試器

設置 REACT_DEBUGGER 環境變量為啟動你的自定義調試器的命令來使用自定義的JS調試器來代替Chrome開發者工具。然後你就可以在開發者菜單中選擇“Debug JS Remotely”來開始調試。

調試器會接收一系列所有的項目根，通過空間分隔開。比如說，如果你設置 REACT_DEBUGGER=”node/path/to/launchDebugger.js –port 2345 –type ReactNative”，然後 node/path/to/launchDebugger.js –port 2345 –type ReactNative /path/to/reactNative/app 命令會被用來啟動你的調試器。

通過這種方式執行的自定義調試器命令應該是短周期的進程，並且它們不應該產生超過200千字節的輸出。

在Android上用Stetho調試

1、在 android/app/build.gradle中，添加

compile ‘com.facebook.stetho:stetho:1.3.1’
compile ‘com.facebook.stetho:stetho-okhttp3:1.3.1’

2、在 android/app/src/main/java/com/{yourAppName}/MainApplication.java 中，添加下面的導入：

import com.facebook.react.modules.network.ReactCookieJarContainer;
import com.facebook.stetho.Stetho;
import okhttp3.OkHttpClient;
import com.facebook.react.modules.network.OkHttpClientProvider;
import com.facebook.stetho.okhttp3.StethoInterceptor;
import java.util.concurrent.TimeUnit;

3、在 android/app/src/main/java/com/{yourAppName}/MainApplication.java 中，添加函數：

public void onCreate() {
super.onCreate();
Stetho.initializeWithDefaults(this);
OkHttpClient client = new OkHttpClient.Builder()
.connectTimeout(0, TimeUnit.MILLISECONDS)
.readTimeout(0, TimeUnit.MILLISECONDS)
.writeTimeout(0, TimeUnit.MILLISECONDS)
.cookieJar(new ReactCookieJarContainer())
.addNetworkInterceptor(new StethoInterceptor())
.build();
OkHttpClientProvider.replaceOkHttpClient(client);
}

4、運行 react-native run-android

5、在新的chrome標簽中，打開：chrome://inspect，點擊 ‘Inspect device’ （“Powered by Stetho”後面的那個）

調試原生代碼

當使用原生代碼時（比如編寫原生組件時）你可以和構建標准的原生app一樣在Android Studio或者Xcode啟動app並獲取其調試功能（設置斷點等等）。

性能監控

你可以通過在開發者菜單中選擇“Perf Monitor”打開一個性能覆蓋來幫助你調試性能問題。