原文鏈接:http://wiki.jikexueyuan.com/project/react-native/debugging.html(本文有些改動和補充)
1.IDE 推薦WebStorm或者Visual Studio Code
2.訪問應用程序內(nèi)開發(fā)者菜單:
在 iOS 中搖動設(shè)備或在虛擬機里按組合鍵control + ? + z.
在 Android 中搖動設(shè)備或按硬件菜單按鈕 (舊的設(shè)備中以及大多數(shù)虛擬機中都有效,例如, 在genymotion中阳柔,你可以按組合鍵? + m來模擬點擊硬件菜單按鈕)
提示
要禁用產(chǎn)品構(gòu)建的開發(fā)人員菜單:
在 iOS 中,打開 Xcode 中的項目王财,選擇Product→Scheme→Edit Scheme...(或按組合鍵? + <).下一步, 在左邊的菜單中選擇Run然后將 Build Configuration 改為Release。
在 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 中調(diào)試 JavaScript 代碼,在開發(fā)者菜單選擇Debug in Chrome视事。 將打開一個新的標簽http://localhost:8081/debugger-ui胆萧。
在 Chrome 中,按下組合鍵? + option + i或選擇View→Developer→Developer Tools切換開發(fā)工具控制臺俐东。 啟用捕獲異常時暫停以獲得更佳的調(diào)試體驗跌穗。
!B脖琛蚌吸!斷點調(diào)試
1.在 iOS 中搖動設(shè)備或在虛擬機里按組合鍵control + ? + z.-->選擇Debug狀態(tài)
2.在Chrome上按下組合鍵? + option + i或選擇View→Developer→Developer Tools切換開發(fā)工具控制臺或者? + option + J,進入調(diào)試模式砌庄。
3.Sources->Sources->指定需要調(diào)試的文件羹唠,加入斷點進行調(diào)試
在實際設(shè)備上進行調(diào)試:
在 iOS 中奕枢,- 打開文件RCTWebSocketExecutor.m并更改localhost為你的電腦IP地址。搖動設(shè)備打開開發(fā)菜單肉迫,選擇啟動調(diào)試验辞。
在 Android 中稿黄, 如果你正在運行通過 USB 連接的 Android 5.0+ 設(shè)備喊衫,您可以使用adb命令行工具來從設(shè)備到您的計算機設(shè)置端口轉(zhuǎn)發(fā)。 運行:adb reverse 8081 8081(參閱此鏈接以獲得adb命令詳情)杆怕。 或者族购,你可以打開設(shè)備上開發(fā)菜單并選擇開發(fā)設(shè)置,然后為設(shè)備設(shè)置更新調(diào)試服務器主機到您的計算機的 IP 地址陵珍。
React 開發(fā)工具 (可選)
安裝React Developer Tools作為谷歌瀏覽器的擴展寝杖。這將允許您通過React在開發(fā)工具中導航組件層次結(jié)構(gòu) ( 更多詳情參閱facebook/react-devtools)。
Live Reload
這個選項可觸發(fā) JS 在連接設(shè)備/模擬器上自動刷新互纯。啟用此選項:
在 iOS 中瑟幕,通過開發(fā)者菜單選擇Enable Live Reload,當 JavaScript 有任何改動時留潦,應用程序會自動重新加載只盹。
在 Android 中,啟動開發(fā)菜單兔院,進入Dev Settings并選擇Auto reload on JS change選項殖卑。
FPS (每秒幀數(shù)) 顯示器
在0.5.0-rc以及更高的版本,為了幫助調(diào)試性能問題坊萝,你可以在開發(fā)者菜單啟用 FPS 圖形疊置孵稽。