4.React Native專案開發如何配置除錯
本篇主要專案開發中如何除錯及除錯配置;
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是使用頻率很高的兩個工具。
後面會不斷更新,實際開發中的用途;