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.jsonのscriptsのとこに書く
• npm run react-devtoolsとterminalで打てば走る（プロジェクトフォルダにて）

使い方

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

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

参考

github.com blog.expo.io