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が起動するので、通常通りに開発 🎉
 
 
やってることは公式の二番煎じなので、詰まったら公式を確認しましょう 💁‍♂️
React Native - WebStorm
React Native を使用すると、JavaScript および React を使用して、iOS および Android 用のネイティブモバイルアプリケーションを開発できます。これは Facebook によって作成され、Instagram、Airbnb などの有名なアプリで使用され、現在は JetBrains 独自の YouTrack mobile(英語) アプリケーションで使用されています。 React Native オフィシャル Web サイト(英語) の詳細を参照してください。 WebStorm は、React Native アプリケーションの作成、編集、リント、実行、デバッグ、および保守を支援します。WebStorm は、React および Flow シンボルに対してコード補完も提供します。 始める前に、コンピューターに Node.js(英語) があることを確認してください。 WebStorm で React Native アプリケーションを作成する推奨方法は、専用のプロジェクトジェネレーター（たとえば React Native CLI(英語) ）を使用することです。 ようこそ画面で新規プロジェクトの作成をクリックするか、メインメニューからを選択します。 新規プロジェクトの作成ダイアログ が開きます。 左側のペインで、React Native を選択します。 右側のペインで：
React Native - WebStorm
https://pleiades.io/help/webstorm/react-native.html#ws_react_native_run_and_debug
React Native - WebStorm
 
badge