React Native - 調試技巧及調試菜單說明（模擬器調試、真機調試）

一、模擬器調試

我們在ios模擬器上按快捷鍵 command + D，安卓模擬器上按快捷⌘ + m，即可彈出如下調試菜單。下面分別介紹菜單中的各個調試功能。

1，Reload

刷新頁面，其快捷鍵是（iOS） command + R/（安卓）兩按R鍵。

注意：只有修改 JavaScript 文件時，刷新功能才起作用。如果新增了文件或者修改了 Native 代碼，就需要使用 Xcode 重新編譯應用了。

 

2，Debug JS Remotely

（1）該功能允許開發人員在 Chrome 中調試應用，其調試方式和調試 Web 應用一樣。

（2）當改功能被點擊時，React Native 會啟動 Chrome 瀏覽器，並且打開一個 http://localhost:8081/debugger-ui 的新標簽。

（3）在這個標簽頁中，我們打開開發者工具，選擇 Console，就可以看到輸出的日志信息了。

（4）在 Sources Tab 頁中還可以顯示當前調試項目的所有 js 文件。並在上面進行斷點調試。

3，Enable Live Reload

該功能主要用來實現自動刷新。當我們將實時加載啟用后，如果應用中的 JavaScript 代碼有任何修改，它都會自動幫我們更新，不需要人為去操作刷新功能。

 

4，Start Systrace

該功能主要用來監控應用在一段時間內的指標信息。

（1）我們點擊“Start Systrace”開始監控。

（2）然后在操作后選擇“Stop Systrace”結束監控。這時會彈出一個提示框，告訴我們數據已經生成。打開生成的 JSON 文件，就可以看到應用在這段時間內的詳細指標信息了。

（3）如果我們裝了 google 的 trace-viewer 插件，包服務器會幫我們自動調用 trace2html 命令打開這個 JSON 文件。

 

5，Enable Hot Reloading

啟用熱加載，同樣是實現頁面的自動刷新。

熱加載的思想是運行時動態注入修改后的文件內容，同時不中斷 APP 的正常運行。這樣，我們就不會丟失 APP 的任何狀態信息，尤其是 UI 頁面棧相關的。

熱加載（Hot Reloading）與上面提到的實時加載（Live Reload）最關鍵的區別：
（1）實時加載應用更新時需要刷新當前頁面，可以看到明顯的全局刷新效果。
（2）而熱加載基本上看不出刷新的效果，類似於局部刷新。

 

6，Show Inspector

（1）我們可以很方便的查看到當前選中元素的位置、樣式、層級關系、盒子模型信息等等。方便我們快速定位問題。

（2）同時還提供了監控應用性能的功能。

 

7，Show Perf Monitor

該功能啟用后會顯示一個監控窗口，顯示出實時的內存占用、UI 和 JavaScript 的 FPS 等信息。幫助我們調試性能問題。

 

二、真機調試

（1）將手機連接電腦。並在 Xcode 中，選擇你的手機作為目標設備。

（2）選擇好項目使用的開發者賬號。

（3）同時相關的 Tests target 里同樣也要選擇使用的開發者賬號。

如果這里沒設置的話會出現如下錯誤，無法啟動程序。

Signing for "HelloWorldTests" requires a development team. Select a development team in the project editor.
Code signing is required for product type 'Unit Test Bundle' in SDK 'iOS 10.0'

 

（3）確保手機和 Mac 電腦在同一個網絡環境下。然后編譯運行程序。

React Native iOS 在新版中 BundleURL 加載方法做了重大改變，新增了 RCTBundleURLProvider 單例類專門處理 BundleURL，使用 NSUserDefaults 保存配置信息。
在 Debug 模式下，執行 react-native-xcode.sh 編譯腳本會自動獲取當前網卡 en0 的 IP 地址，並打入 App 包中一個配置文件 ip.txt，App 運行時會讀取 ip 文件，自動生成 Developer Server URL。
這種加載方式的好處是：我們不再需要手動去把"localhost"改成 Mac 的 IP 了，每次編譯都會讀取當前最新的 IP。

 

（4）應用啟動后，只需要搖一搖手機可以調出調試菜單，里面具體功能同模擬器一樣，這里就不再說明了。

（5）由於 React 的特性，手機運行應用后，就可以斷開數據線了。后面電腦上只要修改了 js 文件，手機上就能自動加載或實時熱更新。