HTML、CSS、JavaScript でのライブ編集

設定で JavaScript and TypeScript バンドルプラグインが有効になっていることを確認します。Ctrl+Alt+S を押して設定を開き、プラグインを選択します。インストール済みタブをクリックします。検索フィールドに JavaScript and TypeScript と入力します。プラグインの詳細については、プラグインのマッピングを参照してください。

設定で JavaScript Debugger バンドルプラグインが有効になっていることを確認します。Ctrl+Alt+S を押して設定を開き、プラグインを選択します。インストール済みタブをクリックします。検索フィールドに JavaScript Debugger と入力します。プラグインの詳細については、プラグインのマッピングを参照してください。

JetBrains マーケットプレイスからプラグインをインストールする説明に従って、設定 | プラグインページのマーケットプレースタブにライブ編集プラグインをインストールして有効にします。

JavaScript デバッガーの構成の説明に従って、組み込みデバッガーを構成します。

HTML、CSS、JavaScript コードに加えた変更を、ページを再ロードせずにブラウザーにすぐに表示するには、ライブ編集機能をアクティブにします。

設定ダイアログ（Ctrl+Alt+S）で、ビルド、実行、デプロイ | デバッガー | ライブ編集に移動します。

開いたライブ編集ページで、Chrome のアプリケーションを更新する変更間隔チェックボックスを選択します。

デフォルトでは、PhpStorm は HTML および CSS コードのオンザフライプレビューのみを表示します。JavaScript でライブ編集を有効にするには、JavaScript、HTML および CSS オプションを選択します。

エディターでコードを変更し、この変更をブラウザーに表示するまでの遅延時間を指定します。デフォルト値 300 ms を受け入れるか、対応するフィールドの横にあるスピンボックスを使用してカスタム値を指定します。

Node.js によって実行される JavaScript ファイルの再読み込みを有効にするには、変更時の Node.js アプリケーションの更新チェックボックスを選択します。スピンボックスを使用してアップロードの経過時間を指定します。デフォルト値は 300 です。

JavaScript、HTML、または CSS にコンパイルできるコード、たとえば TypeScript、Pug、SCSS でライブ編集を有効にするには、JavaScript、HTML、CSS にコンパイルされたファイルの変更を追跡するチェックボックスを選択します。

そのようなファイルで行われたすべての変更は、コンパイルをトリガーするために自動的に保存され、ブラウザーに表示されます。

変更されたファイルは、ファイル、プロジェクト、PhpStorm、その他のイベントを閉じることによってトリガーされる通常の自動保存とは異なり、更新直後に保存されることに注意してください。

ハイライトを構成するには、キャレットの変更時にブラウザーの現在の要素をハイライトするチェックボックスを選択します。それ以外の場合、デバッグセッション中に、Shift を押したまま、エディターで要素にカーソルを合わせて、ブラウザーで要素をハイライトする必要があります。

ホットスワップが失敗した場合に再起動するチェックボックスを選択すると、PhpStorm が自動的にページを再ロードすることができます。

デバッグセッションを開始します。

必要に応じて、HTML、CSS、JavaScript コードを更新します。変更は、ページを再ロードせずにすぐにブラウザーに反映されます。