nomolog

プロダクトマネジメント、技術、ビジネス、ときどきライフハック

April 19, 2021

WebStorm上でReactをデバッグする


公式に準拠すればできた話なんですが、ドキュメントを読み違えて遠回りしてしまったので備忘録として残しておきます。

TL;DR

公式ドキュメントに準拠してデバッグしましょう。

React | WebStorm
は、カプセル化されたコンポーネントから複雑なインタラクティブユーザーインターフェースを構築するための JavaScript ライブラリです。 React オフィシャル Web サイト(英語) からライブラリの詳細を参照してください。 WebStorm は、React と統合され、lint の設定、編集、実行、デバッグ、アプリケーションの保守を支援します。 始める前に、コンピューターに Node.js(英語) があることを確認してください。 新しい React シングルページアプリケーションの構築を開始するための推奨される方法は、 create-react-app(英語) パッケージです。これは、WebStorm が npx(英語) を使用してダウンロードして実行します。その結果、開発環境は webpack、Babel、ESLint、その他のツールを使用するように事前構成されています。 もちろん、Create React App を自分でダウンロードすることも、空の WebStorm プロジェクトを作成して React をインストールすることもできます。 React のインストールと React オフィシャル Web サイト(英語) からの React アプリケーションの作成の詳細を参照してください。 ウェルカム画面で新規プロジェクトの作成をクリックするか、メインメニューからを選択します。 新規プロジェクトの作成ダイアログ が開きます。 左側のペインで、React を選択します。 右側のペインで: プロジェクト関連ファイルが保存されるフォルダーへのパスを指定します。 Node インタープリターフィールドに、使用する

背景

  • WebStormでReactを使ったWebアプリケーションを開発している
  • WebStorm上でデバッグしたくなったので上記のドキュメントを見ながらデバッグの設定を行ったが、どうにもうまくいかなかった

間違えていたポイント

デフォルトで用意される、 npm構成の Run Configurationをデバッグ実行しようとしていた。

以下の様な感じ

An image from Notion

しかし正しくは、上記構成は 通常実行 した上で、起動した開発サーバのコンソールログ上の http://localhost:3000 を Command + Shitを押下しながらクリックすることでデバッグセッションを開始する。

An image from Notion

ドキュメントはちゃんと読みましょう 🙋‍♂️


気に入ったら、以下からシェアやフォローいただけると嬉しいです!