WIP

【画像付き解説】ReactNativeデバッグの方法、設定

RNで開発して行く際にあれ、webの方はできるけどRNの方はどうやってやるのと思って解決したので
その様子を記しておく

2つ方法があって
stateを見たい場合、
・コマンドで「react-devtools」と打つと開発ツールが立ち上がるのでそれでデバッグする方法
or
debuggerを仕込んでconsoleで調べたい場合
・Chromeの開発ツールでデバッグする方法

---

stateを見たい場合、コマンドで「react-devtools」と打つと開発ツールが立ち上がるのでそれでデバッグする方法

ここをみて
https://github.com/jhen0409/react-native-debugger
brewでreact-native-debuggerを入れました

$ brew update && brew cask install react-native-debugger

をインストールしてコマンドで叩く

yarn iosして、

シュミレータが立ち上がった状態で

$ react-devtools
を叩く

stateやコンポーネントの状態がわかるようになる

Chromeの開発ツールでデバッグする方法

このシュミレータが立ち上がった状態で
cmd + このような画面になるので該当箇所をクリック

Chromeを見るとこのような状態になっているので開発ツールを立ち上げる

該当のソースコードをみに行ってデバッガーを仕込む