訪(fǎng)問(wèn)App內(nèi)的開(kāi)發(fā)菜單
你可以通過(guò)搖晃你的設(shè)備或者選擇iOS模擬器的Hardware菜單中的“Shake Gesture”來(lái)打開(kāi)開(kāi)發(fā)者菜單送粱。你還可以在app運(yùn)行于iPhone模擬器時(shí)使用Command+D快捷鍵，或者在運(yùn)行Android模擬器時(shí)使用Command+M快捷鍵。
注意：在成品（release/producation builds）中開(kāi)發(fā)者菜單會(huì)被關(guān)閉动雹。
刷新JavaScript
不用每次你有改變時(shí)都重新編譯你的app胰蝠，你可以直接重載你app的JavaScript代碼震蒋。要這樣做查剖，就選擇開(kāi)發(fā)者菜單中的”Reload“。你也可以在iOS模擬器中按Command+R或者在Android模擬器中按兩次R效扫。
如果Command+R快捷鍵沒(méi)能重載iOS模擬器直砂，去往Hardware菜單静暂，選擇Keyboard，然后確鼻⒅“Connect Hardware Keyboard”是勾選的。
自動(dòng)重載
你可以通過(guò)讓你的app在你改變代碼時(shí)自動(dòng)重載來(lái)加快你的開(kāi)發(fā)速度泪掀。自動(dòng)重載可以在開(kāi)發(fā)者菜單中選擇“Enable Live Reload”來(lái)打開(kāi)。
更進(jìn)一步你可能想在添加新文件到JavaScript包中時(shí)保持app運(yùn)行新的版本椅挣，可以通過(guò)選擇開(kāi)發(fā)者菜單中的“Enable Hot Reloading”來(lái)打開(kāi)鼠证。這可以讓你在重載中保持app的狀態(tài)靠抑。
有一些熱重載無(wú)法完美實(shí)現(xiàn)的情況。如果運(yùn)行到了任何問(wèn)題荠列，使用全重載來(lái)重置你的app肌似。
對(duì)于下面這些情況你可能需要重構(gòu)你的app來(lái)讓改變生效：
- 你添加了新的資源到你原生app的包中诉瓦，比如iOS的Images.xcassets中的圖片或者Android的res/drawable文件夾睬澡。
- 你修改了原生代碼（iOS上的Objective-C/Swift或者Android中的Java/C++）.
應(yīng)用內(nèi)的錯(cuò)誤與警告提示（紅屏和黃屏）
錯(cuò)誤和警告會(huì)在開(kāi)發(fā)構(gòu)建時(shí)顯示在你的app中。
錯(cuò)誤（Errors）
app中的錯(cuò)誤會(huì)在你的app中用紅色背景的全屏顯示斗躏。這個(gè)屏幕也叫RedBox瑟捣。你可以使用 console.error() 來(lái)手動(dòng)觸發(fā)一個(gè)。
警告（Warnings）
警告會(huì)在屏幕上用黃色背景顯示栅干。這些警告條也叫YellowBox迈套。點(diǎn)擊警告條來(lái)顯示更多信息或者讓它們不顯示。
和RedBox一樣碱鳞，你可以使用 console.warn() 來(lái)觸發(fā)一個(gè)YellowBox桑李。
YellowBox可以通過(guò)使用 console.disableYellowBox = true; 來(lái)在開(kāi)發(fā)過(guò)程中關(guān)閉。特定的警告可以通過(guò)設(shè)置要忽略的前綴數(shù)組來(lái)說(shuō)的手動(dòng)忽略：console.ignoredYellowBox = ['Warning:...']
RedBox和YellowBox在發(fā)布構(gòu)建中都是自動(dòng)關(guān)閉的
訪(fǎng)問(wèn)控制臺(tái)日志
app運(yùn)行時(shí)你可以通過(guò)在終端使用下面的命令為iOS和Android app顯示控制臺(tái)日志：
$ react-native log-ios
$ react-native log-android
你也可以通過(guò)在iOS模擬器中訪(fǎng)問(wèn) Debug -> Open System Log... 或者在Android app在設(shè)備或者模擬器上運(yùn)行時(shí)在終端中運(yùn)行 adb logcat *:S ReactNative:V ReactNativeJS:V 。
Chrome 開(kāi)發(fā)者工具
在開(kāi)發(fā)者菜單選擇“Debug JS Remotely”來(lái)在Chrome中調(diào)試JS代碼贵白。這會(huì)打開(kāi)一個(gè)新的tab為http://localhost:8081/debugger-ui率拒。
在Chrome的菜單中選擇 Tools -> Developer Tools 來(lái)打開(kāi)開(kāi)發(fā)者工具。你也可以使用快捷鍵（Mac上為Command+Option+I禁荒，Windows上為Ctrl+Shift+I）來(lái)訪(fǎng)問(wèn)開(kāi)發(fā)者工具猬膨。你可能還會(huì)打開(kāi) Pause On Caught Exceptions 來(lái)獲取更好的調(diào)試體驗(yàn)。
現(xiàn)在還不可能在Chrome開(kāi)發(fā)者工具中使用“React”tab來(lái)檢查app小部件勃痴。你可以使用Nuclide的“React Native Inspector”作為工作區(qū)。
使用Chrome開(kāi)發(fā)者工具在設(shè)備上調(diào)試
在iOS設(shè)備上铁材，打開(kāi) RCTWebSocketExecutor.m 文件并將“l(fā)ocalhost”改為你電腦的IP著觉，然后在開(kāi)發(fā)者菜單中選擇“Debug JS Remotely”.
在通過(guò)USB連接的Android 5.0+設(shè)備上固惯，你可以使用 adb command line tool 來(lái)設(shè)置端口從設(shè)備轉(zhuǎn)發(fā)到你的電腦：
adb reverse tcp:8081 tcp:8081
或者镇辉，在開(kāi)發(fā)者菜單選擇“Dev Settings”村砂，然后更新“Debug server host for device”的設(shè)置來(lái)匹配你電腦的IP地址础废。
如果運(yùn)行到任何問(wèn)題，可能是你的某個(gè)Chrome擴(kuò)展程序不小心干擾了調(diào)試器蒿讥。嘗試禁用所有的擴(kuò)展器然后重新一個(gè)個(gè)地打開(kāi)它們直到你找到有問(wèn)題的擴(kuò)展程序。
使用自定義的JS調(diào)試器
設(shè)置 REACT_DEBUGGER 環(huán)境變量為啟動(dòng)你的自定義調(diào)試器的命令來(lái)使用自定義的JS調(diào)試器來(lái)代替Chrome開(kāi)發(fā)者工具廷蓉。然后你就可以在開(kāi)發(fā)者菜單中選擇“Debug JS Remotely”來(lái)開(kāi)始調(diào)試。
調(diào)試器會(huì)接收一系列所有的項(xiàng)目根疫萤，通過(guò)空間分隔開(kāi)扯饶。比如說(shuō)，如果你設(shè)置 REACT_DEBUGGER="node/path/to/launchDebugger.js --port 2345 --type ReactNative"，然后 node/path/to/launchDebugger.js --port 2345 --type ReactNative /path/to/reactNative/app 命令會(huì)被用來(lái)啟動(dòng)你的調(diào)試器兰怠。
通過(guò)這種方式執(zhí)行的自定義調(diào)試器命令應(yīng)該是短周期的進(jìn)程，并且它們不應(yīng)該產(chǎn)生超過(guò)200千字節(jié)的輸出秸侣。
在Android上用Stetho調(diào)試
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 中集币，添加下面的導(dǎo)入：
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 中当娱，添加函數(shù)：
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河质、運(yùn)行 react-native run-android
5乐尊、在新的chrome標(biāo)簽中限府，打開(kāi)：chrome://inspect，點(diǎn)擊 'Inspect device' （“Powered by Stetho”后面的那個(gè)）
調(diào)試原生代碼
當(dāng)使用原生代碼時(shí)（比如編寫(xiě)原生組件時(shí)）你可以和構(gòu)建標(biāo)準(zhǔn)的原生app一樣在Android Studio或者Xcode啟動(dòng)app并獲取其調(diào)試功能（設(shè)置斷點(diǎn)等等）。
性能監(jiān)控
你可以通過(guò)在開(kāi)發(fā)者菜單中選擇“Perf Monitor”打開(kāi)一個(gè)性能覆蓋來(lái)幫助你調(diào)試性能問(wèn)題。
翻譯自React Native官方文檔
