在發布（生產）版本中禁用了“開發人員菜單”。

重新加載 JavaScript

自動重裝

在某些情況下，熱重新加載無法完美實現。如果您遇到任何問題，請使用完全重新加載來重置您的應用。

• 您已將新資源添加到本機應用程序包中，例如iOS上的Images.xcassets中的圖像或Android上的res / drawable文件夾。
• 您修改了本機代碼（iOS上的Objective-C / Swift或Android上的Java / C ++）。

應用內錯誤和警告

錯誤

警告

import {YellowBox} from 'react-native';
YellowBox.ignoreWarnings(['Warning: ...']);

在發布（生產）版本中自動禁用RedBoxes和YellowBoxes。

Chrome開發者工具

注意：React Developer Tools Chrome擴展程序不適用於React Native，但您可以使用其獨立版本。閱讀本節以了解具體方法。

使用自定義JavaScript調試器進行調試

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

React 開發者工具

npm install -g react-devtools

react-devtools

注意：如果您希望避免全局安裝，可以將react-devtools添加為項目依賴項。使用npm install --save-dev react-devtools將react-devtools包添加到項目中，然後將“react-devtools”：“react-devtools”添加到package.json中的scripts部分，然後運行npm run react -devtools從項目文件夾中打開DevTools。

與 React Native Inspector 集成

檢查組件實例

性能監視器

在彈出的應用程序中進行調試

訪問控制台日誌

$ react-native log-ios
$ react-native log-android

如果您正在使用Create React Native App，則控制台日誌已顯示在與打包程序相同的終端輸出中。

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

如果您使用的是Create React Native App，則已經為您配置了此功能。

如果您遇到任何問題，您的某個Chrome擴展程序可能會以意外的方式與調試程序進行交互。嘗試停用所有擴展程序並逐個重新啟用它們，直到找到有問題的擴展程序。

在Android上使用 Stetho 進行調試 

1. 在android / app / build.gradle中，在依賴項部分中添加以下行：

    debugCompile 'com.facebook.stetho:stetho:1.5.0'
    debugCompile 'com.facebook.stetho:stetho-okhttp3:1.5.0'
   

以上將配置Stetho v1.5.0。如果有更新的版本，您可以訪問 http://facebook.github.io/stetho/ 查看。

2. 創建以下Java類來包裝Stetho調用，一個用於發布，一個用於調試：

   // android/app/src/release/java/com/{yourAppName}/StethoWrapper.java
   
   public class StethoWrapper {
   
       public static void initialize(Context context) {
           // NO_OP
       }
   
       public static void addInterceptor() {
           // NO_OP
       }
   }
   

   // android/app/src/debug/java/com/{yourAppName}/StethoWrapper.java
   
   public class StethoWrapper {
       public static void initialize(Context context) {
         Stetho.initializeWithDefaults(context);
       }
   
       public static void addInterceptor() {
         OkHttpClient client = OkHttpClientProvider.getOkHttpClient()
                .newBuilder()
                .addNetworkInterceptor(new StethoInterceptor())
                .build();
   
         OkHttpClientProvider.replaceOkHttpClient(client);
       }
   }
   

3. 打開android / app / src / main / java / com / {yourAppName} /MainApplication.java並替換原來的 onCreate 函數：

  public void onCreate() {
      super.onCreate();

      if (BuildConfig.DEBUG) {
          StethoWrapper.initialize(this);
          StethoWrapper.addInterceptor();
      }

      SoLoader.init(this, /* native exopackage */ false);
    }

4. 在Android Studio中打開項目並解決任何依賴性問題。 將指針懸停在紅線上後，IDE應指導您完成此步驟。
5. 運行 react-native run-android.
6. 在新的Chrome標籤頁中，打開：chrome://inspect，然後點擊“Powered by Stetho”旁邊的“Inspect device”項。
   

   
   

調試本機代碼