WebStorm 2024.3 ヘルプ

ウェブブラウザーとプレビュー

このページでは、次を構成できます。

  • Web ブラウザーのインストールを WebStorm と統合し、WebStorm からの Web ブラウザーの起動をアクティブ化または非アクティブ化します。

  • 実行可能ファイルを実行するか、デフォルトのシステムコマンドを使用してブラウザーを起動するかどうかを指定します。

  • デフォルトで WebStorm が要求に応じて HTML ファイルを開く デフォルトの WebStorm ブラウザーを指定します。つまり、ブラウザーが明示的に指定されていない場合

  • ブラウザーで HTML または XML ファイルを開くためのブラウザーポップ上へを有効にします。

  • ブラウザーまたは組み込みプレビューでページを自動的に再ロードするタイミングを構成します。

ブラウザーの構成の詳細情報

ブラウザー

このセクションでは、HTML 出力のプレビューに使用できるブラウザーを指定します。このセクションでは、定義済みリストのブラウザーと、以前に設定されたカスタムブラウザーのインストール(存在する場合)を示します。

WebStorm には、HTML ファイルの出力の実行、デバッグ、プレビュー中に IDE から自動的にインストールおよび起動できる、最も一般的なブラウザーの定義済みリストが付属しています。WebStorm は、標準の手順に従ってブラウザーをインストールすることを前提としており、各インストールに、ブラウザーの実行可能ファイルまたは macOS アプリケーションへのデフォルトパスを表すエイリアスを割り当てます。

実際のブラウザーのインストールで実行可能ファイルへのパスが異なる場合は、パスフィールドで明示的に指定する必要があります。

あらかじめ定義されたブラウザーに加えて、ツールバーのコントロールを使用して必要な数だけカスタムブラウザーをインストールすることができます。

項目

説明

アクティブ

このチェックボックスを選択すると、WebStorm からそれぞれのブラウザーを使用できるようになります。ブラウザーがブラウザーで開くメニュー項目のコンテキストメニューに追加され、そのアイコンがブラウザーアイコンポップ上へに表示されます。エディターでポップ上へを表示および非表示にする方法については、ブラウザーアイコンポップ上へを設定するを参照してください。

このチェックボックスがオフの場合、対応するブラウザーアイコンはアイコンツールバーまたはポップ上へに表示されません。

名前

この列には、ブラウザー名を指定します。

ファミリ

この列には、ブラウザーが属するファミリを指定します。

パス

この列で、実行可能ファイルへのパスを指定します。ブラウザーが標準のインストール手順に従ってインストールされた場合、おそらくパスフィールドのエイリアスは正しい場所を指しています。そうでない場合は、the Browse button をクリックして、開いたダイアログで実際のパスを選択します。開いたダイアログで、対応するブラウザーの実行可能ファイルへのパスを選択します。

ツールバー

項目

説明

the Add button

カスタムブラウザーをリストに追加するには、このボタンをクリックします。

the Remove button

選択した顧客のブラウザーをリストから削除するには、このボタンをクリックします。あらかじめ定義されたリストからブラウザーを削除することはできません。

the Edit button

このボタンをクリックすると、Firefox のカスタムプロファイルまたは Chrome ファミリのブラウザーを指定できます。このボタンは、FirefoxChrome が選択されている場合にのみ使用できます。

Firefox 設定ダイアログで、出力のプレビューに使用する Firefox のブラウザープロファイル(英語)を指定します。

  • "profiles.ini" へのパス : このフィールドで、使用する Firefox プロファイルを決定する profiles.ini ファイルの場所を指定します。

  • プロファイル : このリストから、使用する定義済みプロファイルを選択します。詳細については、Firefox のブラウザープロファイル(英語)を参照してください。

Chrome 設定ダイアログで:

  • コマンドラインオプション : このフィールドにコマンドラインオプションを入力して、Chrome のインスタンスを起動します。さらにスペースが必要な場合は、the Expand icon をクリックするか、Shift+Enter を押してエディターボックスを開きます。Chromechrome://flags を開いて、Chrome コマンドラインオプションの詳細を参照してください。

  • カスタムユーザーデータディレクトリを使用する : このチェックボックスを選択して、使用するユーザー固有の Chrome プロファイル設定を定義し、WebStorm 設定でユーザーデータディレクトリ(英語)の場所を指定します。

The Previous Occurrence button The Next Occurrence button

これらのボタンを使用して、選択したブラウザーをリスト内で上下に移動します。ブラウザーの順序は、外部リソースをレンダリングし、Web コンテンツでファイルをプレビューするために重要です。

The Copy button

選択したブラウザーのコピーを作成するには、このボタンをクリックします。

デフォルトブラウザー

このセクションでは、外部リソースのレンダリングと Web コンテンツを含むファイルのプレビューにデフォルトで使用されるデフォルトの WebStorm ブラウザーを指定します。メインメニューから表示 | ブラウザーで開くを選択するか、ファイルのコンテキストメニューからブラウザーで開くを選択すると、コンテキストメニューではこのブラウザーはデフォルトと呼ばれます。

項目

説明

デフォルトブラウザー

リストからデフォルトのブラウザーを選択します。可能なオプションは次のとおりです。

  • システムデフォルト : オペレーティングシステムのデフォルト Web ブラウザーを WebStorm のデフォルトとして受け入れるには、このオプションを選択します。

  • リストの先頭 : このオプションを選択すると、WebStorm はリストの最初のブラウザーを起動します。ツールバーの The Previous Occurrence button アイコンと The Next Occurrence button アイコンを使用して順序またはブラウザーを変更します。

  • カスタムパス : 別の Web ブラウザーを WebStorm のデフォルトとして指定するには、このオプションを選択します。ブラウザーの実行可能ファイルへのパスを入力するか、the Browse button をクリックして、開いたダイアログでパスを選択します。

エディターでブラウザーアイコンポップ上へを構成する

この領域で、WebStorm に HTML ファイルまたは XML ファイルで有効なブラウザーを含むポップ上へを表示するかどうかを構成します。このポップ上へは、現在のファイルの出力をプレビューするために使用されます。

デフォルトでは、ブラウザーアイコンポップ上へは HTML ファイルでのみ表示されます。XML ファイルでは、デフォルトではポップ上へは表示されないため、注意をそらさずにコードを読んだり編集したりできます。HTML ファイル用および XML ファイル用チェックボックスを使用して、現在のファイルタイプに応じてポップ上へを表示または非表示にします。

再ロード動作

この領域で、ブラウザーまたは組み込みプレビューで HTML ページの再読み込みを自動的にトリガーするアクションを指定します。ブラウザーで HTML ファイルをプレビューするから詳細を参照してください。

ブラウザーでページを再ロードおよび組み込みプレビューでページを再ロードリストから、Web ブラウザーおよび組み込みプレビューでページの自動再ロードをトリガーするアクションを選択します。

  • デフォルトでは、保存時が選択されているため、ブラウザーまたは組み込みプレビューで HTML ファイルを開いた後、この HTML ファイル (またはリンクされた JavaScript ファイルまたはスタイルシートファイル) が手動または自動で保存されるたびに、WebStorm はページを自動的に再読み込みします。変更を保存して元に戻すを参照してください。

    Reloading a HTML page on save

    ページの再ロードをトリガーするファイルを保存すると、WebStorm は了解ツールチップを表示します。

    Reload on save: Got it tooltip
  • 変更時を選択すると、入力時にページが再読み込みされます。

    Built-in preview: reload preview on change
  • ページの自動再読み込みを抑制するには、無効を選択します。

関連ページ:

HTML

WebStorm は、構文やエラーのハイライト、コードスタイルに応じたフォーマット、構造検証、コード補完、デバッグセッション中のオンザフライプレビュー(ライブ編集)やコードエディターの専用プレビュータブなど、HTML を強力にサポートします。HTML ツールプラグインを有効にするこの機能は、デフォルトで WebStorm にバンドルされて有効になっている HTML ツールプラグインに依存しています。関連する機能が利用できない場合は、プラグインを無効にしていないことを確認してください。を押して設定を...

ブラウザーの構成

WebStorm には、HTML ファイルの出力の実行、デバッグ、プレビュー中に IDE から自動的にインストールおよび起動できる最も一般的なブラウザーの事前定義リストが付属しています。WebStorm は、標準の手順に従ってブラウザーをインストールすることを前提としており、各インストールに、ブラウザーの実行可能ファイルまたは macOS アプリケーションへのデフォルトパスを表すエイリアスを割り当てます。デフォルトリストのブラウザーに加えて、カスタムブラウザーのインストールを設定できます。Web...

変更の保存と復元

WebStorm は、ファイルに加えた変更を自動的に保存します。保存は、実行、デバッグ、バージョン管理操作の実行、ファイルまたはプロジェクトのクローズ、IDE の終了などのさまざまなイベントによってトリガーされます。ファイルの保存は、サードパーティのプラグインによってトリガーすることもできます。自動保存をトリガーするイベントのほとんどは事前定義されており、構成することはできませんが、変更が失われることはなく、ローカル履歴ですべてを見つけることができます。自動保存動作を設定する設定ダイアログで、を...

ツール

左側のペインでツールカテゴリを選択すると、メインサブカテゴリがダイアログの右側に表示されます。テンプレートデータ言語ウェブブラウザーとプレビュー