iT邦幫忙

2021 iThome 鐵人賽

0
Modern Web

React Native & Redux 初步探討系列 第 31

Day 31 DEV TOOL

在開發時,總缺少不了 bug 的存在,

那如何 debugger 就是所有開發者都很在意的問題了,

以往開發 web 每個瀏覽器都會有相應的 devtool,

像我們的 chromesafari ...等,

  • chrome
    https://ithelp.ithome.com.tw/upload/images/20211016/20112878N2lR5Eeaqv.png

  • safari
    https://ithelp.ithome.com.tw/upload/images/20211016/20112878yNSJzHjdjE.png

以原生的介面來說, android & xcode 也是有相應的 devtool,來協助開發者

那...react native 呢?

畢竟它是用 javascript 做開發的,

像很常使用的 console.log 最後會跑到哪邊去呢?

以我們啟動 react-native run-ios 為例,

會開啟一個 terminal 的視窗,

這個就是連接我們專案跟模擬器之間的橋樑

那我們下 的 console.log 指令,也會顯示在這上面,

以程式碼為例,在 render 這裡下一個 console.log 指令,

https://ithelp.ithome.com.tw/upload/images/20211016/20112878lmfnVHdth3.png

其結果如下,

https://ithelp.ithome.com.tw/upload/images/20211016/20112878Stu9ym3iM3.png

看上去好像不錯,

但是,只要資訊量一多....

https://ithelp.ithome.com.tw/upload/images/20211016/20112878sVOWrUwmpk.png

想找資料就會變得非常....開心,

有別的辦法嘛?

有~

iosCommand + D & android 則是 Command + M 可以開啟開發者選單

https://ithelp.ithome.com.tw/upload/images/20211016/201128783zGGuMVmHk.png

我們選擇 Debug with Chrome

它會跳出一個網頁,

https://ithelp.ithome.com.tw/upload/images/20211016/20112878hCGVBMieNG.png

我們開啟這個網頁的 devtool,

就會發現,

react-native 的資訊轉移到這裡了!!

https://ithelp.ithome.com.tw/upload/images/20211016/201128786oq2b5LYwC.png

那關於畫面的部份呢?

像是 web 那樣可以看畫面的長寬高之類的,

剛剛的 devtool 有辦法偵測到嘛?

很可惜... 沒辦法...

那有辦法嘛?

有~~

一樣在模擬器開啟開發者選單

選擇 Show Inspector

https://ithelp.ithome.com.tw/upload/images/20211016/20112878WI6j0VEeRc.png

可以看到最下方出現一個區塊,

當我們點擊其中一個元件,

Show Inspector

下方區塊馬上顯示其中的 component 的資訊,

這些就是在 react native 裡最基本的 debugger,

那我想看 redux 的資訊呢??

有~~~

還是有辦法的,

接下來介紹的是集 UI + console 訊息 + redux 為一體的,

react-native-debugger !!

官方 Github

安裝:

brew install --cask react-native-debugger

mac 可以用 Spoilt 搜尋 react-native-debugger,

https://ithelp.ithome.com.tw/upload/images/20211016/20112878uLzF9s835d.png

打開後畫面:

https://ithelp.ithome.com.tw/upload/images/20211016/20112878sM8MLiRcAr.png

如何連上呢?

就打開 Debug with Chrome

https://ithelp.ithome.com.tw/upload/images/20211016/20112878AOJMg4moZe.png

左上是 redux 管理 、 左下是整個 react component 結構、 右邊就是 console 訊息

整整齊齊都在上面了,

不過會發現, redux 好像沒反應阿...

我們要在 configureStore 上加上 composeEnhancers

import { applyMiddleware, compose, createStore } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducer';

export default function configureStore() {
  const composeEnhancers =
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
  return createStore(rootReducer, composeEnhancers(applyMiddleware(thunk)));
}

這樣 devtool 就能連接到 redux 了,

RESULT


上一篇
Day 30 完賽了...然後呢?
下一篇
Day 32 打包- android
系列文
React Native & Redux 初步探討33

尚未有邦友留言

立即登入留言