ReactNativeでデバッグをする
with TypeScriptが前提
メモ: 以下はRNのiOSをシミュレータ上でやる時の話mrsekut.icon
ほかは試していない
debuggerを使う
https://www.youtube.com/watch?v=UE66n7HOIAg
いくつかの選択肢がある
どれも同名の関数を使うし、issueとか見た雰囲気どれでもRNで使えるっぽい(?)ので混乱した
導入
$ brew cask install react-native-debugger
code:tsx
// store.tsx このコードは雰囲気なので、このまま書いても動かないかもしれない.
// 新しく何かをimportする必要はない
const composeEnhancers =
typeof window === 'object' &&
(window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
? (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({})
: compose;
const store = createStore(
composeEnhancers(
applyMiddleware(...)
)
);
起動
$ open "rndebugger://set-debugger-loc?host=localhost&port=19001"
デスクトップアプリケーションとして「React Native Debugger」が立ち上がる
ここで開いた場合はwindowオブジェクトに__REDUX_DEVTOOLS_EXTENSION_COMPOSE__が存在するため、上のようなコードをstoreに書けばstateの内容を見ることができるようになる
$ npm startなどでシミュレータを起動し、「Remote Debugging」をスタートすると接続する
ブラウザのものが先に立ち上がっている場合は、予めそちらを切っておく必要がある
参考
実機でやる場合
実機で起動しているときにスマホをシェイクするとExpoのメニューが見れる
そこでStart Remote Debuggingを選択するとブラウザ上にいつものやつが表示されて、cmd-iでconsoleが見れるようになる
install
$ npm install -g react-devtools@^3
show inspectorにしてクリックするとブラウザのときのように場所がわかる
パフォーマンスの計測もできる！！！！！
ただしクソ重い
参考