reactnative

React Nativeのデバッグ方法

バージョン: 0.54.2

console.logの表示

react-native run-ios or run-androidでアプリ起動中に
react-native log-ios or log-androidを実行するとターミナル上でconsole.logで出力している内容などが確認できる。
例えば、

  renderContent() {
    console.log(`[INFO] this.state.activeTab: ${this.state.activeTab}`);
    switch (this.state.activeTab) {
      case "home":
        return <Home />;
        

chromeでのデバッグ

react-native run-ios or run-androidでアプリ起動後、ローカルのnodeサーバによってdebbuger-uiというページにアクセスできるようになっているので、chromeでhttp://localhost:8081/debbuger-ui にアクセスする。
そのあと、シュミレータでDeveloperメニューを表示(iOS: ⌘ + d, Android: ⌘ + m)して、Debug JS Remotelyを選択し、chromeでChrome DevToolsを開くと以下のようにブレークポイントを設定したり、変数の中を確認したりすることができる。

VSCodeでのデバッグ

VSCodeのメニュー > デバッグ > 構成の追加を選択して、./.vscode/launch.json にReact Native: Debug AndroidReact Native: Debug iOSを追加する。 デバッグビューを表示(⌘ + shift + d)し、Debug iOS or Debug Androidを選択して、デバッグの開始を実行するとchromeと同様のデバッグができる。

※ Debug JS RemotelyがOnになっているとアプリ起動後にエラーになるのでOffにしておく

その他

React Native Debugger、reactron などのStandaloneのツールもある