WebStorm+Chrom 調試React Native 項目圖文詳解

在看這篇文章之前，給大家參考一下本人的準備如下：

1、裝好React Developer Tools 外掛程式的Chrom;

2、整合完React Native 後的WebStorm，整合參考webstorm整合react-native外掛程式及基礎設定；

3、一部Android系統5.0.0+的真機（參考），大家可以下載genymotion模擬器；

準備工作後，開始進入正題：

1、USB連結手機後，開啟chrome 瀏覽器查看連結裝置，地址欄直接輸入：chrome://inspect/#devices，如下表示chrome連結裝置成功：

2、chrom開啟新的標籤頁，並在狀態列中輸入：http://localhost:8081/debugger-ui,並開啟開發人員模式（F12）：

3、WebStorm運行react native項目，點擊菜單鍵（真機的話，可以晃一晃），如下圖所示，點擊Debug JS Remotely選項：

4、上一步完成後，回到chrom瀏覽器，可以看到如下圖：

1、說明已經adb已經反向連結上了裝置；

2、這邊主要要用到的是Console（輸出控制台）及Source（源檔案）這兩個工具列

3、這邊就是我們代碼的地區，左側行數就是打斷點的地方；

4、調試控制地區；