iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 27
0

前言

前一篇寫單元測試的目的之一就是讓除錯變得容易一點,但實際在除錯的時候還是得掌握一些可以使用的工具,尤其是對寫 Web 習慣的開發者來說,一開始的時候看不到 console.log 可能就會有點亂了陣腳,這篇就會針對一些常用的部分做點介紹。

Log

除錯千百年不變的絕招,就是印出來看一下就對了。所以一開始就先學這招不會錯,依照平台需要下不同的指令:

$ react-native log-ios
$ react-native log-android

就可以把 log 的一些資訊印到 Terminal:

console.log('印一點東西出來')

雖然裡面夾雜一些其他訊息,不過還是看到的有印一點東西出來在裡面。

錯誤畫面

React Native 在顯示錯誤訊息上面下了不少功夫,只要有沒有處理到的錯誤,就會用滿版的 Redbox 的顯示錯誤訊息。

也可以用 console.error 觸發:

console.error('Error!!!');

而中間的 Error Stack 是可以點的,點擊後會用預設的編輯器打開對應的程式碼檔案與行數。

警告的部分則是用 YellowBox 來處理,可以用 console.warn 來顯示警告訊息:

console.warn('Warn~~~');

就會在下方出現黃色的小橫幅提示:

這些東西後來也影響了許多在瀏覽器運行的開發工具,這兩個 UI Component 也被社群抽出來寫成獨立的套件:

開發者選單

在 iOS 用 Command + D 或在 Android 則是 Command + M 可以叫出開發者選單 (在裝置上測試的話可以用搖一下來觸發):

Reload

這裡面除了最一般的 Reload (Command + R) 還有下面兩種自動 Reload 的模式:

  • Live Reload:檔案改變時就 Reload
  • Hot Reload:檔案改變時就藉由 HMR 做保留 State 的 Reload

在這兩種模式下可以改寫完就馬上就看到結果,對於增加開發速度非常有幫助,也是 JavaScript 勝過 Native 的一個重要開發體驗。

遠端除錯

在開發者選單內點擊 Debug JS Remotely 即可開啟遠端除錯功能。

開啟後在 http://localhost:8081/debugger-ui 就可以使用 Chrome 的開發工具。除了可以看到 console 相關的訊息外,也可以使用 Chrome 的 Debugger,可以使用 Pause On Caught Exceptions 或是 Break Point 等等的功能。

Inspector

內建 Inspector

在開發者選單內點擊 Show Inspector 就能開啟 React Native 內建的 Inspector:

也有 Network 的部分可以看:

React Native Inspector (Nuclide)

前面的 IDE (Integrated Development Environment) for React Native 這篇有提到使用 Nuclide 時,在 Command Palette 選擇:

Nuclide React Native Inspector: Show

就能看到 React Native Inspector:

如此以來就可以快速地找出 State、Props 或是 Render 寫錯的地方。

React Native Debugger

不過也不是每個人都會想用 Nuclide。另外一個很不錯的 Inspector 選擇是,Jhen-Jie Hong 開發的 React Native Debugger,除了可以獨立執行外,它還附帶了 Redux 的 Devtools。

結語

除錯的方式也不必學太多種,只要把常用到的兩三種交叉使用,通常 Bug 就會原形畢露。不過要特別注意的是,開太多的功能也可能會拖累模擬器的效能,尤其是遠端除錯類的功能,在使用的時候最好特別小心。


上一篇
Day 26:在 React Native 進行單元測試
下一篇
Day 28:最後一哩路 Part I - iOS 上架
系列文
使用 Modern Web 技術來打造 Native App30

尚未有邦友留言

立即登入留言