Day 31 DEV TOOL

在开发时，总缺少不了 bug 的存在，

那如何 debugger 就是所有开发者都很在意的问题了，

以往开发 web 每个浏览器都会有相应的 devtool，

像我们的 chrome 、 safari ...等，

• chrome
  

• safari
  

以原生的介面来说， android & xcode 也是有相应的 devtool，来协助开发者

那...react native 呢？

毕竟它是用 javascript 做开发的，

像很常使用的 console.log 最後会跑到哪边去呢？

以我们启动 react-native run-ios 为例，

会开启一个 terminal 的视窗，

这个就是连接我们专案跟模拟器之间的桥梁，

那我们下 的 console.log 指令，也会显示在这上面，

以程序码为例，在 render 这里下一个 console.log 指令，

其结果如下，

看上去好像不错，

但是，只要资讯量一多....

想找资料就会变得非常....开心，

有别的办法嘛？

有～

ios 用 Command + D & android 则是 Command + M 可以开启开发者选单，

我们选择 Debug with Chrome ，

它会跳出一个网页，

我们开启这个网页的 devtool，

就会发现，

react-native 的资讯转移到这里了！！

那关於画面的部份呢？

像是 web 那样可以看画面的长宽高之类的，

刚刚的 devtool 有办法侦测到嘛？

很可惜... 没办法...

那有办法嘛？

有～~

一样在模拟器开启开发者选单，

选择 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，

打开後画面：

如何连上呢？

就打开 Debug with Chrome

左上是 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 了，