PhpStorm 2020.2ヘルプ

HTML、CSS、およびJavaScriptでのライブ編集

ライブ編集機能を使用すると、HTML、CSS、またはJavaScriptコードに加えた変更は、ページをリロードせずにブラウザーにすぐに表示されます。ライブ編集は、デバッグセッション中にのみ使用できます。詳細については、ChromeでのJavaScriptのデバッグを参照してください。

Live Editing in HTML and CSS

ライブ編集は、HTML、CSS、またはJavaScriptを含むまたは生成する他のファイルタイプで機能します。Node.jsアプリケーションのデバッグの場合、ライブ編集も使用できます。詳細については、Node.jsアプリケーションでのライブ編集を参照してください。

デフォルトでは、ライブ編集はHTMLおよびCSSファイルに対してのみ有効になっています。

始める前に

JetBrainsリポジトリからプラグインをインストールする説明に従って、設定/環境設定 | プラグインページでLiveEditプラグインをインストールして有効にします。

    JavaScriptでライブ編集をアクティブにして構成する

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

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

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

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

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

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

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

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

    7. 強調表示を設定するには、キャレットの変更時にブラウザーの現在の要素を強調表示するチェックボックスを選択します。それ以外の場合は、デバッグセッション中に、Shift を保持し、エディターで要素をクリックしてブラウザで強調表示する必要があります。

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

    9. デフォルトでは、ライブ編集はJetBrains Chrome拡張なしで機能します。引き続き使用する場合は、デバッグとライブ編集にJetBrains IDEサポート拡張機能を使用するチェックボックスを選択します。この場合、JetBrains Chrome ExtensionのインストールおよびJetBrains Chrome拡張のアクティブ化、非アクティブ化、およびアンインストールに従って、JetBrains Chrome拡張をインストールしてアクティブ化する必要があります。

    最終更新日: 2020年6月23日

    関連ページ:

    ChromeでのJavaScriptのデバッグ

    PhpStormは、Chromeと連携するclient-sideJavaScriptコード用の組み込みデバッガを提供します。以下のビデオと以下の説明は、このデバッガを使い始めるための基本的なステップを示しています。始める前に:設定/環境設定 | プラグインページでJavaScriptデバッガバンドル...

    Node.jsの実行とデバッグ

    PhpStormは、Node.jsアプリケーションの実行とデバッグを支援します。PhpStormから起動し、既に実行中のアプリケーションにアタッチするアプリケーションをデバッグできます。始める前に:設定/環境設定 | プラグインページでNode.jsバンドルプラグインが有効になっていることを確認して...

    Node.jsアプリケーションでのライブ編集-ヘルプ| PhpStorm

    ライブ編集機能を使用すると、HTML、CSS、またはJavaScriptコードに加えた変更は、ページをリロードすることなくブラウザーにすぐに表示されます。ライブ編集は、Node.jsデバッグセッションの間のみ利用可能です。HTML、CSS、およびJavaScriptでのライブ編集から詳細を参照してく...

    プラグインを管理する

    プラグインはPhpStormのコア機能を拡張します。彼ら:バージョン管理システム、アプリケーションサーバー、およびその他のツールとの統合を提供する、さまざまな言語とフレームワークのコーディング支援サポートを追加する、ショートカットヒント、ライブプレビュー、ファイルウォッチャーなどで生産性を向上、コー...

    ソースコードを書いて編集する

    コードを使用する場合、PhpStormは作業にストレスがないことを保証します。追加、選択、コピー、移動、編集、折りたたみ、出現箇所の検索、コードの保存に役立つさまざまなショートカットと機能を提供します。エディター内のナビゲーションについては、エディターの基本を参照してください。アクションの検索使用し...

    JetBrains Chrome拡張を使用したデバッグ

    PhpStormでアプリケーションをデバッグするために、ChromeのJetBrains IDEサポート拡張をインストールして使用する必要はありません。ただし、同じChromeインスタンスでデバッグセッションを開始する場合は、引き続き使用できます。デフォルトでは、PhpStormはカスタムChrom...