1、React Native Dev tool的安裝

在利用Chrome除錯之前，首先需要在Chrome中安裝React Native Dev tool工具。

安裝步驟如下：

（1）點選Chrome右上角的按鈕

（2）點選設定按鈕

（3）點選擴充套件程式

（4）點選獲取更多應用程式

（5）在搜尋框中輸入React Native Dev tool並且將其新增至CHROME

（6）安裝完的效果如下

2、如何通過Chrome跟蹤除錯React Native程式

首先把程式安裝到iOS模擬器，接下來通過快捷鍵command＋d彈出選擇提示框(PS：除錯中如果你翻牆了，請務必關閉，否則Chrome沒法除錯),然後點選Debug JS Remotely。

Chrome瀏覽器將會被自動連結。

接下來通過快捷鍵option＋command＋j開啟除錯介面，再根據下圖中的步驟進行操作

（1）開啟除錯介面

（2）選擇檢視原始碼

（3）連線正在工作的程式碼（只有這一步這麼選擇才能檢視原始碼）

（4）檢視index.ios.js原始碼

（5）原始碼檢視區

（6）斷點除錯區

接下來的問題是如何通過斷點跟蹤除錯？

用Sublime開啟專案原始碼，在如下位置新增幾句程式碼，如下如所示：

儲存程式碼，通過command＋r重新重新整理模擬器，接下來在23行打個端點，在下圖第二步中點選下一步，你會發現控制檯依次輸出第三步的內容。

另外的一種方式，不需要在Chrome中新增端點，也可以在程式碼裡面新增debugger這麼一句程式碼，這句程式碼就代表添加了一個端點。

3、如何在模擬器上檢視檢視的盒子模型

（1）執行程式

（2）通過command＋d彈出除錯提示選擇框

（3）選擇show inspector

當你在模擬器上選擇不一樣的檢視時，模擬器就會展示出這個檢視的盒子模型資料

4、如何通過Atom＋Nuclide進行除錯

首先通過Atom 開啟專案檔案，接下來通過shift＋command＋p彈出搜尋框，在搜尋框中輸入inspector，如下圖所示選擇Nuclide React Native Inspector Show選項

接下來等待模擬器React Native連線。

接下來將程式安裝到模擬器，通過command＋d彈出提示選項，點選Debug JS Remotely選項。

連線上以後，當前專案的UI成次結構清晰的顯現出來，如下圖所示。