Ryusuke NomotoWebStormでexpoをデバッグする開発備忘録です 🙋♂️Chromeのdeveloperツールを使ってexpoのdebugしていましたが、ChromeとWebStormをいったり来たりするのが面倒になったので調べました。
1. React Native 実行 / デバッグ構成を作成するRun > Edit Configurations > +ボタン押下 > React Nativeを選択以下の詳細を入力名前:任意Build and Launch Applicationの チェックを外すBundler host: 127.0.0.1Bundler port: 19001Start React Native Bundlerを選択、ペンマークを押下して以下のように編集Command: npm script を選択Script: start 他はそのままでOKOKを押して作成完了
2. デバッグ実行Run > Debug xxx(先ほど作成した構成)expo developer toolsが起動するので、通常通りに開発 🎉 やってることは公式の二番煎じなので、詰まったら公式を確認しましょう 💁♂️React Native - WebStormReact 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 を選択します。 右側のペインで:https://pleiades.io/help/webstorm/react-native.html#ws_react_native_run_and_debug