チュートリアル: Rails アプリケーションで JavaScript をデバッグする
RubyMine は、Rails アプリケーション内のクライアント側 JavaScript コードのデバッグ機能を提供します。 このチュートリアルでは、Chrome で JavaScript をデバッグする方法を説明します。 チュートリアルで作成した JavaScript アセットを含むサンプル Rails アプリケーションを使用します。 このアプリケーションは、Webpacker を使用して JavaScript モジュールを管理します。
サンプル Rails アプリのクローンを作成する
サンプル Rails アプリケーションを複製するには、以下の手順に従います。
リモートホストからプロジェクトをチェックアウトする (git クローン) で説明されているサンプルアプリケーションを確認してください。 URL フィールドに、アドレス https://github.com/rubyminedoc/rails_helloworld.git を挿入します。
javascript ブランチに 切り替えます。
Ruby インタープリターを指定し、依存関係をインストールします。
JavaScript デバッガーを有効にする
RubyMine は、 実行 / デバッグ構成を使用して、アプリケーションを実行およびデバッグする統合された方法を提供します。 Rails プロジェクトの場合、RubyMine は、対応する Rails 環境で 開発 と 本番 の実行 / デバッグ構成を自動的に作成します。 JavaScript をデバッグするには、 Rails 構成で JavaScript デバッガーの自動実行を有効にする必要があります。
に移動し、 Rails グループで自動的に作成された 開発: rails_helloworld 構成を選択します。
以下のオプションを指定してください。
ブラウザーの実行 オプションを有効にし、アドレス http://0.0.0.0:3000/welcome/index を指定します。 この URL は、デバッグされた JavaScript アセットを参照する app/views/welcome/index.html.erb ビューを開くために使用されます。
デバッグ時に自動的に JavaScript デバッガーを起動する を有効化します。
デバッグ開始
JavaScript コードをデバッグするには、以下の手順に従います。
app/javascript/packs/hello.js ファイルを開き、最初の
hello関数呼び出しにブレークポイントを設定します。
デバッグを開始するには、 Ctrl を 2 回押して、ポップアップに構成名 開発: rails_helloworld を入力します。 次に、この構成を選択し、 Shift キーを押し続け（ダイアログのタイトルが Debug に変わります）、 Enter を押します。
開いた http://0.0.0.0:3000/welcome/index ページで、 こんにちは ! ボタンをクリックします。 デバッガーはブレークポイントでセッションを一時停止し、アプリケーションの状態を確認できるようにします。 Chrome での JavaScript のデバッグ で JavaScript のデバッグについて詳しく見ることができます。
