taiki-t's diary

きぎょうにっき, React Native, Rails そして雑多な記録: The world is waiting for you to give it the meaning.

react-devtoolsをReact Nativeで使う

React Nativeで開発でのデバッグにはNuclideを使っていたけど、react-devtoolsも使える。

インストール方

グローバルにインストールする場合

  • npm install -g react-devtools
  • これでreact-devtoolsとterminalでやれば走る。

プロジェクトにインストールする場合

yarn

  • yarn add --dev react-devtools
  • yarn react-devtoolsとterminalで打てば走る(プロジェクトフォルダにて)

npm

  • npm install --save-dev react-devtools
  • "react-devtools": "react-devtools"package.jsonscriptsのとこに書く
  • npm run react-devtoolsとterminalで打てば走る(プロジェクトフォルダにて)

使い方

  • SimulatorでCommand + Dして出てくるメニューから Show Inspectorを選択
  • 要素をクリックすると、devtoolsの方で連動して表示してくれる。

まあここら辺はNuclideとあまり変わらない。 ただNuclideというかAtomが重いのでdevtoolsの方が気軽に使えそうな気がしている。

参考

github.com blog.expo.io