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

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

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

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

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

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

設定 ダイアログ (Ctrl+Alt+S) で、 ビルド、実行、デプロイ｜デバッガー｜Live Edit に進みます。

開いた Live Edit ページで、 変更時に Chrome のアプリケーションを更新する チェックボックスを選択します。

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

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

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

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

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

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

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

ホットスワップが失敗した場合は再起動する チェックボックスを選択すると、JetBrains Rider が自動的にページを再読み込みできるようになります。

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

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