IntelliJ IDEA 2020.3 ヘルプ

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. デフォルトでは、IntelliJ IDEA は 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 にコンパイルされたファイルの変更を追跡するチェックボックスを選択します。

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

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

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

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

    関連ページ:

    Chrome での JavaScript のデバッグ

    IntelliJ IDEA は、Chrome と連携する client-sideJavaScript コード用の組み込みデバッガーを提供します。以下のビデオと以下の説明は、このデバッガーを使い始めるための基本的なステップを示しています。始める前に:設定 / 環境設定 | プラグインページで JavaScript デバッガーバンドルプラグインが有効になっていることを確認してください。詳細については、プラグインの管理を参照してください。組み込みサーバーで実行されているアプリケーションのデバッグ:In...

    Node.js の実行とデバッグ

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

    Node.js アプリケーションでのライブ編集

    ライブ編集機能を使用すると、HTML、CSS、または JavaScript コードに加えた変更は、ページを再ロードすることなくブラウザーにすぐに表示されます。ライブ編集は、Node.js デバッグセッションの間のみ利用可能です。HTML、CSS、JavaScript でのライブ編集から詳細を参照してください。ライブ編集は、HTML、CSS、または JavaScript を含むまたは生成する他のファイルタイプで機能します。デフォルトでは、ライブ編集は HTML および CSS ファイルでのみ有効に...

    プラグインを管理する

    このサイトのメニューやアクション名表記は日本語です。IntelliJ IDEA を日本語化するには、日本語言語パックのインストールを参照してください。プラグインは以下に示すように IntelliJ IDEA のコア機能を拡張します。バージョン管理システム、アプリケーションサーバー、およびその他のツールとの統合を提供する、さまざまな言語とフレームワークのコーディング支援サポートを追加する、ショートカットヒント、ライブプレビュー、ファイルウォッチャーなどで生産性を向上、コーディング演習と検証で新しい...

    ソースコードの作成と編集

    コードを使用する場合、IntelliJ IDEA は作業にストレスがないことを保証します。追加、選択、コピー、移動、編集、折りたたみ、出現箇所の検索、コードの保存に役立つさまざまなショートカットと機能を提供します。エディター内のナビゲーションについては、エディターの基本を参照してください。アクションの検索使用したいアクションのショートカットを覚えていない場合は、を押して名前でアクションを見つけてください。同じダイアログを使用してクラス、ファイル、またはシンボルを見つけることができます。詳しくは...

    リモートサーバーにデプロイされた JavaScript のデバッグ

    始める前に:設定 / 環境設定 | プラグインページで JavaScript デバッガーバンドルプラグインが有効になっていることを確認してください。詳細については、プラグインの管理を参照してください。、リモート Web サーバーとは何ですか? :IntelliJ IDEA では、現在のプロジェクトの外側にドキュメントルートを持つサーバーはすべてリモートと呼ばれます。このサーバーは実際には物理的なリモートホストまたはあなたのマシン上で実行されているかもしれません。例: プロジェクトが C:/Inte...