react-devtools
2170 ワード
react-devtoolsとは
- facebookで開発
- chromeのdeveloper toolsをreactまで拡張した感じ
- コンポーネントの階層構造、propsやstateの確認ができる。
設置
- chrome extension
- firefox extension
- safariやreact nativeなどはstandalone appを使う。
standalone app
chromeやfirefoxはextensionを提供しているので、説明は割愛する。
次はstandaloneタイプのreact-devtoolsの設置手順だ。
React DOMだけではなくReact Nativeにも対応されているので、こっちも悪くないかも。
react-devtoolsをグローバルで設置する。
% yarn global add react-devtools
react-devtoolsを実行する。
% react-devtools
react-devtoolsが実行されてreactとのコネクションを待っているとメッセージが表示される。
React Nativeの場合は自動でconnectされるが、React DOMの場合はtopページに次を追加しなければならない。
<script src="http://localhost:8097"></script>
次からはreactアプリケーションが起動されている場合はReact DOMも自動でconnectしてくれる。
Author And Source
この問題について(react-devtools), 我々は、より多くの情報をここで見つけました https://qiita.com/park-jh/items/325aeec51add1f75e16c著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .