React Native / React除錯技巧

光強發表於2019-03-01
React Native除錯

做過原生APP開發的同學們都清楚，我們在Xcode和studio中就可以直接對編寫的程式碼進行斷點除錯，很方便，但是web開發斷點除錯就不能直接在開發工具中完成了，需要藉助瀏覽器來完成，React相關的開發斷點除錯和web開發基本上一樣，也是在瀏覽器上進行除錯，雖然沒有原生那麼方便，但是也還算簡單。React Native除錯需要藉助官方的Developer Menu，下面我們就來簡單聊聊這個Developer Menu 和 Chrome Developer Tools

Developer Menu

模擬器開啟Developer Menu

  • iOS模擬器
    • 可以通過Command⌘ + D快捷鍵來快速開啟Developer Menu
  • android模擬器
    • 可以通過Command⌘ + M快捷鍵來快速開啟Developer Menu。也可以通過模擬器上的選單鍵來開啟
http://ovyjkveav.bkt.clouddn.com/17-12-4/24659707.jpg

真機開啟Developer Menu

  • iOS和Android真機通過搖動手機來開啟Developer Menu

Reloading JavaScript

在只是修改了js程式碼的情況下，如果要預覽修改結果，你不需要重新編譯你的應用。在這種情況下，你只需要告訴React Native重新載入js即可。

注意： 如果你修改了native的程式碼或修改了Images.xcassets、res/drawable中的檔案，重新載入js是不行的，這時你需要重新編譯你的專案了

Reload js

Reload js將你專案中js程式碼部分重新生成bundle檔案，然後傳輸給模擬器或手機

在Developer Menu中單擊Reload讓React Native重新載入js。對於iOS模擬器你也可以通過Command⌘ + R快捷鍵來載入js，對於Android模擬器可以通過雙擊r鍵來載入js

*注意：*如果Command⌘ + R 無法使你的iOS模擬器載入js，可以通過選中Hardware menu中Keyboard選項下的 `Connect Hardware Keyboard` 試試

Enable Live Reload

在 Developer Menu中有 `Enable Live Reload` 選項，該選項提供了React Native動態載入的功能。當你的js程式碼發生變化後，React Native會自動生成bundle然後傳輸到模擬器或手機上

gif

Enable Hot Reloading

Developer Menu中還有一項需要特別介紹的，就是`Enable Hot Reloading`熱載入，如果說Enable Live Reload解放了你的雙手的話，那麼Hot Reloading不但解放了你的雙手而且還解放了你的時間。 當你每次儲存程式碼時Hot Reloading功能便會生成此次修改程式碼的增量包，然後傳輸到手機或模擬器上以實現熱載入。相比 Enable Live Reload需要每次都返回到啟動頁面，Enable Live Reload則會在保持你的程式狀態的情況下，就可以將最新的程式碼部署到裝置上，當你做佈局的時候啟動Enable Live Reload功能你就可以實時的預覽佈局效果了，方便省時

Warning

React Native程式執行時出現的Warnings也會被直接顯示在螢幕上，以黃色的背景顯示，並會列印出警告資訊，你也可以通過console.warn()來手動觸發Warnings，你也可以通過console.disableYellowBox = true來手動禁用Warnings的顯示，或者通過console.ignoredYellowBox = [`Warning: ...`]來忽略相應的Warning

img

Error

React Native程式執行時出現的Error會被直接顯示在螢幕上，以紅色的背景顯示，並會列印出錯誤資訊， 你也可以通過 console.error()來手動觸發Error

img

注意： 在生產環境release下Error和Warning功能不在生效

如何真機除錯

  • iOS上

配置好相應的除錯證照，直接連線線連線到真機執行即可

  • android

搖晃手機，調出Developer Menu皮膚，在`Developer Menu`下的`Dev Settings`中Debug server host & prot for device配置自己路由器ip地址。埠使用8081即可

image
image

Chrome Developer Tools

Chrome 開發工具

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

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

注意： 對於除錯React Native應用來說，Sources和Console是使用頻率最高的兩個工具

你可以像除錯JavaScript程式碼一樣來除錯你的React Native程式

如何通過Chrome除錯React Native程式

  • 啟動遠端除錯

在Developer Menu下單擊`Debug JS Remotely`啟動JS遠端除錯功能，此時Chrome會被開啟，同時會建立一個`http://localhost:8081/debugger-ui`網頁

image
  • 開啟Chrome開發者工具

在該`http://localhost:8081/debugger-ui`網頁下開啟開發者工具，開啟Chrome選單->選擇更多工具->選擇開發者工具。你也可以通過快捷鍵(Command⌘ + Option⌥ + I on Mac, Ctrl + Shift + I on Windows)開啟開發者工具

開啟Chrome開發著工具之後你會看到如下介面

image

Sources皮膚

Sources皮膚提供了除錯 JavaScript 程式碼的功能

image

Sources皮膚可以讓你看到你所要檢查的頁面的所有指令碼程式碼，並在皮膚選擇欄下方提供了一組標準控制元件，提供了暫停，恢復，步進等功能。在視窗的最下方的按鈕可以在遇到異常(exception)時強制暫停。原始碼顯示在單獨的標籤頁，通過點選 開啟檔案導航皮膚，導航欄中會顯示所有已開啟的指令碼檔案

Chrome開發著工具中的Sources皮膚幾乎是最常用的功能皮膚。通常只要是開發遇到了js報錯或者其他程式碼問題，在審視一遍自己的程式碼而一無所獲之後，首先就會開啟Sources進行js斷點除錯

執行控制工具

從上圖可以看到`執行控制工具`按鈕在側板頂部，讓你可以按步執行程式碼，當你進行除錯的時候這幾個按鈕非常有用：

  • 繼續(Continue): 繼續執行程式碼直到遇到下一個斷點
  • 單步執行(Step over): 步進程式碼以檢視每一行程式碼對變數作出的操作，當程式碼呼叫另一個函式時不會進入這個函式，使你可以專注於當前的函式
  • 跳入(Step into): 與 Step over 類似，但是當程式碼呼叫函式時，偵錯程式會進去這個函式並跳轉到函式的第一行
  • 跳出(Step out): 當你進入一個函式後，你可以點選 Step out 執行函式餘下的程式碼並跳出該函式
  • 斷點切換(Toggle breakpoints): 控制斷點的開啟和關閉，同時保持斷點完好

檢視js檔案

如果你想在開發者工具上預覽你的js檔案，可以在開啟Sources tab下的debuggerWorker.js選項卡，該選項卡下會顯示當前除錯專案的所有js檔案，或者是用快捷鍵 cmd + o 調出檔案搜尋直接進行搜尋，這個更加便捷高效

斷點

斷點(Breakpoint)是在指令碼中設定好的暫停處，在DevTools中使用斷點可以除錯JavaScript程式碼

  • 新增和移除斷點

在 Sources 皮膚的檔案導航皮膚中開啟一個JavaScript檔案來除錯，點選邊欄(line gutter) 為當前行設定一個斷點，已經設定的斷點處會有一個藍色的標籤，單擊藍色標籤，斷點即被移除

image

右鍵點選藍色標籤會開啟一個選單，選單包含以下選項：執行到此(Continue to Here)，黑盒指令碼(Blackbox scripts)，移除斷點(Remove Breakpoint)， 編輯斷點(Edit Breakpoint)，和 禁用斷點(Disable Breakpoint)。在這裡你可以對斷點進行更高階的操作

image

高階操作

  • Continue to Here

如果你想讓程式立即跳到某一行時，這個功能會幫到你。如果在該行之前還有別的斷點，程式會依次經過前面的斷點。另外需要提出的是這個功能在任意一行程式碼的邊欄(gutter line)前單擊右鍵都會看到

  • Blackbox scripts

黑盒指令碼會從你的呼叫堆疊中隱藏第三方程式碼

  • Edit Breakpoint

通過該功能你可以建立一個條件斷點，你也可以在邊欄(gutter line) 右鍵並選擇新增條件斷點(Add Conditional Breakpoint) 。在輸入框中，輸入一個可解析為真或假的表示式。僅當條件為真時，執行會在此暫停

image

如果你想讓程式在某處從來都不要暫停，可以編輯一個條件永遠為false的條件斷點。另外，你也可以在該行程式碼的邊欄(gutter line)前單擊右鍵選擇“Never pause here”即可，你會發現“Never pause here”其實就是在該行程式碼上設了一個永遠為false的條件斷點

image

管理斷點

你可以通過Chrome開發者工具的右邊皮膚來統一管理你的斷點

image

你可以通過斷點前的核取方塊來啟用和禁用斷點，也可以單擊右鍵來進行更多的操作(如：移除斷點，移除所有斷點，啟用禁用斷點等)

全域性斷點

全域性斷點的作用是，當程式出現異常時，會在異常的地方暫停，這對快速定位異的常位置很方便。
做iOS開發的同學都知道在Xcode中可以設定全域性斷點，其實在Chrome 開發者工具中也同樣有與之對應的功能，叫`Pause On Caught Exceptions`。如果勾選上此功能，則即使所發生執行時異常的程式碼在 try/catch 範圍內，Chrome 開發者工具也能夠在錯誤程式碼處停住

image

控制檯

DevTools控制檯(Console)可以讓你在目前已暫停的狀態下進行試驗。按 Esc 鍵開啟/關閉控制檯

你可以在控制檯(Console)上列印變數，執行指令碼等操作。在開發除錯中最常用

image

更多文章

  • 作者React Native開源專案OneM【500+ star】地址(按照企業開發標準搭建框架完成開發的)：github.com/guangqiang-…：歡迎小夥伴們 star
  • 作者簡書主頁：包含60多篇RN開發相關的技術文章www.jianshu.com/u/023338566… 歡迎小夥伴們：多多關注，多多點贊
  • 作者React Native QQ技術交流群：620792950 歡迎小夥伴進群交流學習
  • 友情提示：在開發中有遇到RN相關的技術問題，歡迎小夥伴加入交流群（620792950），在群裡提問、互相交流學習。交流群也定期更新最新的RN學習資料給大家，謝謝大家支援！

小夥伴們掃下方二維碼加入RN技術交流QQ群

QQ群二維碼，500+ RN工程師在等你加入哦

相關文章