目的

之前一直用chrome調試，一個是不習慣前端調試方法，畢竟是android 出身嘛還是習慣IDE調試，還有就是源碼位置總要滑到底才能找到，很麻煩。突然發現ReactNative也能用IDE調試真是喜出望外啊，將配置和調試方法記錄一下。

IDE設置

首先配置項，點擊Edit Configurations

配置.png

然后配置react native啟動項

1.gif

其中有幾點說明一下

• name可以隨便填可以代表應用名
• React Native package這項需要選擇RN的命令行工具一般在~\AppData\Roaming\npm\node_modules\react-native-cli這個目錄
• 如果沒安裝命令行可以執行npm install -g yarn react-native-cli進行安裝
• Target platform選擇目標設備
• Browser選項按需選擇，一般開發只保留一個chrome就好了

運行效果是這樣的

2.gif

運行中彈出了指定的瀏覽器，如果想靜默運行在Browser選項中添加-headless --disable-gpu代碼就可以了

3.png

調試

配置完IDE啟動項后，就可以愉快的debug玩耍了，這里用法和studio一樣很方便android小伙伴快速上手，debugger面板左側顯示當前線程運行的方法，右側顯示的是當前變量，有本地變量和全局變量很方便啊。

4.png

菜單項

5.png

打開菜單項有三種方式

• 在控制臺輸入adb shell input keyevent 82
• 在模擬器上用快捷鍵ctrl+M，這個比第一種好用
• 在手機上搖一搖（需要用力。。）

幾項常用的說明一下

• Reload 重新加載 這個和在模擬器上雙擊R的效果是一樣的
• Remote JS Debugging 就是遠程調試了，用啟動項運行起來是默認開啟狀態
• Live Reload是全局刷新，寫完代碼保存一下就會自動更新
• Hot Reloading是局部刷新，寫完代碼保存一下就會自動更新
• Toggle Inspector 審查元素用的小工具
  • perf 暫時不清楚哈，有知道的請留言
  • Inspect 可以快速看到布局相關元素
    
    6.png

  • Network可以清晰地看到網絡請求相關所有信息，這個太實用了

    
    
    7.png

  • Touchables 可以看到可點擊區域

    
    
    8.png

參考資料

https://youtrack.jetbrains.com/issue/WEB-27303