ReactNativeでデバッグをする
with TypeScriptが前提
メモ: 以下はRNのiOSをシミュレータ上でやる時の話
ほかは試していない
debuggerを使う
Reduxのデバッグをする
いくつかの選択肢がある
どれも同名の関数を使うし、issueとか見た雰囲気どれでもRNで使えるっぽい(?)ので混乱した
導入
$ brew cask install react-native-debuggertsx// 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@^3show inspectorにしてクリックするとブラウザのときのように場所がわかる
パフォーマンスの計測もできる！！！！！
ただしクソ重い
VSCodeを使ってデバッグする
with Expo
参考