本篇主要專案開發中如何除錯及除錯配置；

RN除錯感覺比較痛苦，沒有Android開發或者IOS開發那麼靈活，說說如何配置；

1.在你執行起來的Android專案介面按住⌘-M會彈出如下列表

2.選擇Debug JS Remotely選項會自動開啟瀏覽器http://10.0.2.2:8081/debugger-ui，我們將IP地址改為127.0.0.1，然後開發控制檯視窗

接下來就是配置Chrome外掛，安裝Allow-Control-Allow-Origin: *外掛，外掛下載地址是：

為Chrome新增外掛擴充套件，新增外掛擴充套件應該都會加，實在不會的留言吧；

3.測試除錯環境是否配置成功

開啟HelloWorld/App.js新增如下程式碼

    componentWillMount() {
        console.log("componentWillMount");
    }

重新執行專案檢視Chrome控制檯是否有日誌輸入

Running application "HelloWorld" with appParams: {"rootTag":131}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
App.js:32 componentWillMount
YellowBox.js:67 Debugger and device times have drifted by more than 60s. Please correct this by running adb shell "date `date +%m%d%H%M%Y.%S`" on your debugger machine.
 

當看到有componentWillMount字串輸出時恭喜你除錯工具配置成功了；

4.Chrome 開發工具說明

谷歌 Chrome 開發工具，是基於谷歌瀏覽器內含的一套網頁製作和除錯工具。開發者工具允許網頁開發者深入瀏覽器和網頁應用程式的內部。該工具可以有效地追蹤佈局問題，設定 JavaScript 斷點並可深入理解程式碼的最優化策略。 Chrome 開發工具一共提供了8大組工具：

Element 面板： 用於檢視和編輯當前頁面中的 HTML 和 CSS 元素。 Network 面板：用於檢視 HTTP 請求的詳細資訊，如請求頭、響應頭及返回內容等。 Source 面板：用於檢視和除錯當前頁面所載入的指令碼的原始檔。 TimeLine 面板： 用於檢視指令碼的執行時間、頁面元素渲染時間等資訊。 Profiles 面板：用於檢視 CPU 執行時間與記憶體佔用等資訊。 Resource 面板：用於檢視當前頁面所請求的資原始檔，如 HTML，CSS 樣式檔案等。 Audits 面板：用於優化前端頁面，加速網頁載入速度等。 Console 面板：用於顯示指令碼中所輸出的除錯資訊，或執行測試指令碼等。

提示：對於除錯React Native應用來說，Sources和Console是使用頻率很高的兩個工具。

後面會不斷更新，實際開發中的用途；