Ryusuke Nomoto

WebStormでexpoをデバッグする

開発備忘録です 🙋‍♂️
Chromeのdeveloperツールを使ってexpoのdebugしていましたが、ChromeとWebStormをいったり来たりするのが面倒になったので調べました。
 

前提

すでにWebStromでexpoの開発環境が整っていること

手順

1. React Native 実行 / デバッグ構成を作成する

  1. Run > Edit Configurations > +ボタン押下 > React Nativeを選択
  1. 以下の詳細を入力
      • 名前:任意
      • Build and Launch Applicationの チェックを外す
      • Bundler host: 127.0.0.1
      • Bundler port: 19001
  1. Start React Native Bundlerを選択、ペンマークを押下して以下のように編集
      • Command: npm script を選択
      • Script: start
      • 他はそのままでOK
  1. OKを押して作成完了
 

2. デバッグ実行

  1. Run > Debug xxx(先ほど作成した構成)
  1. expo developer toolsが起動するので、通常通りに開発 🎉
 
 

やってることは公式の二番煎じなので、詰まったら公式を確認しましょう 💁‍♂️
 
badge