HTML、CSS、JavaScript でのライブ編集
ライブ編集機能を使用すると、HTML、CSS、JavaScript コードに加えた変更は、ページを再ロードせずにブラウザーにすぐに表示されます。
![Live Editing in HTML and CSS](https://resources.jetbrains.com/help/img/idea/2024.2/live_edit_example_html_css.png)
ライブ編集は、HTML、CSS、JavaScript を含む、または生成する他のファイルタイプに対して機能します。Node.js アプリケーションのデバッグのときにライブ編集を使用することもできます。詳細については、「Node.js アプリケーションでのライブ編集」を参照してください。
デフォルトでは、ライブ編集は HTML および CSS ファイルに対してのみ有効になっています。
始める前に
設定で JavaScript and TypeScript バンドルプラグインが有効になっていることを確認します。Ctrl+Alt+S を押して設定を開き、 を選択します。インストール済みタブをクリックします。検索フィールドに JavaScript and TypeScript と入力します。プラグインの詳細については、プラグインのマッピングを参照してください。
設定で JavaScript Debugger バンドルプラグインが有効になっていることを確認します。Ctrl+Alt+S を押して設定を開き、 を選択します。インストール済みタブをクリックします。検索フィールドに JavaScript Debugger と入力します。プラグインの詳細については、プラグインのマッピングを参照してください。
JetBrains マーケットプレイスからプラグインをインストールする説明に従って、設定 | プラグインページのマーケットプレースタブにライブ編集プラグインをインストールして有効にします。
JavaScript デバッガーの構成の説明に従って、組み込みデバッガーを構成します。
HTML、CSS、JavaScript コードに加えた変更を、ページを再ロードせずにブラウザーにすぐに表示するには、ライブ編集機能をアクティブにします。
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 コードを更新します。変更は、ページを再ロードせずにすぐにブラウザーに反映されます。
関連ページ:
![](https://resources.jetbrains.com/help/img/idea/2024.2/ws_quick_start_debug_built_in_server_1.png)
Chrome での JavaScript のデバッグ
PhpStorm は、client-sideJavaScript コード用の組み込みデバッガーを提供します。以下の手順では、このデバッガーの使用を開始するための基本的な手順を説明します。始める前に:設定で JavaScript and TypeScript バンドルプラグインが有効になっていることを確認します。を押して設定を開き、を選択します。インストール済みタブをクリックします。検索フィールドに JavaScript and TypeScript と入力します。プラグインの詳細については、プラグイ...
![](https://resources.jetbrains.com/help/img/idea/2024.2/ws_node_run_app_with_rc.png)
Node.js の実行とデバッグ
PhpStorm は、Node.js アプリケーションの実行とデバッグを支援します。PhpStorm から起動し、すでに実行中のアプリケーションにアタッチするアプリケーションをデバッグできます。始める前に:JavaScript and TypeScript、JavaScript Debugger、Node.js に必要なプラグインが設定 | プラグインページのインストール済みタブで有効になっていることを確認します。詳細については、プラグインのマッピングを参照してください。Node.js アプリケ...
![](https://pleiades.io/icons/phpstorm.png)
Node.js アプリケーションでのライブ編集
ライブ編集機能を使用すると、HTML、CSS、JavaScript コードに加えた変更は、ページを再ロードせずにブラウザーにすぐに表示されます。ライブ編集は、HTML、CSS、JavaScript を含むまたは生成する他のファイルタイプで機能します。デフォルトでは、ライブ編集は HTML および CSS ファイルでのみ有効になっています。始める前にお使いのコンピューターに Node.js がインストールされていることを確認してください。JavaScript and TypeScript、JavaSc...
![](https://resources.jetbrains.com/help/img/idea/2024.2/ps_plugins_settings.png)
プラグインのインストール
プラグインは PhpStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。プラグイン設定を開くを押して設定を開き、を選択します。マーケットプレースタブを使用して、JetBrains マーケッ...
![](https://resources.jetbrains.com/help/img/idea/2024.2/js_debugger_before_you_start_plugins.png)
JavaScript デバッガーの構成
PhpStorm は、client-sideJavaScript コード用の組み込みデバッガーを提供します。デバッグセッションを開始すると、ビルトインデバッガーが自動的に起動します。デバッグが正常に行われるようにするには、組み込みの Web サーバーポートを指定して、PhpStorm が他のデバッガーオプションに提案しているデフォルト設定を受け入れるだけで十分です。始める前に設定で JavaScript and TypeScript バンドルプラグインが有効になっていることを確認します。を押して設...