React Nativeのコンポーネントは仮想DOMとして表現されていますが、これを見るためにReact Developer Toolsというツールが用意されています。
導入方法
npmを利用します。
npm install -g react-devtools
利用方法
どこのディレクトリからでも良いので、以下のように呼び出します。
react-devtools
起動すれば、勝手につながります。
機能
1. DOMを見れる
ChromeのDeveloper Toolsみたいなノリで、DOMツリーを見ることができます。
2. インスペクタと連携させる
以下の手順でReact Nativeのインスペクタ機能を起動することで、インスペクタの代わりに動作してくれます。
- iOSシミュレーターなら⌘+D、Androidシミュレーターなら⌘+Mでメニューを呼び出す。
- “Toggle Inspector”からInspectorを起動する。
- Devtoolsを起動する。
この状態で、状態を見たいDOMをタップすると、Devtoolsが自動的にそのDOMを開いてくれます。
ここまで来ると、ChromeのDeveloper Toolsを利用してDOMを見ているのと同じ気分です。
ちなみに
- JSのデバッグにはChromeを利用するのが有効です: React Nativeをchromeでデバッグする | hacknote
- また、ログを見るだけならReactotronが有効です: Reactotronに詳しめのログを投げる | hacknote
