ブラウザーの構成
WebStorm には、HTML ファイルの出力を実行、デバッグ、または プレビューする際に、IDE から自動的にインストールして起動できる、最もよく使われるブラウザーの事前定義リストが付属しています。 WebStorm は標準の手順に従ってブラウザーがインストールされることを前提としており、各インストールに、ブラウザーの実行可能ファイルまたは macOS アプリケーションへのデフォルトパスを表す エイリアスを割り当てます。 デフォルトリストのブラウザーに加えて、カスタムブラウザーのインストールを設定できます。
WebStorm には組み込みの Web サーバーがあり、Web ブラウザーでアプリケーションのデバッグや WebStorm の組み込みブラウザーでコードのプレビューができます。 このサーバーは常に実行されており、手動による構成は必要ありません。
デフォルトでは、組み込みサーバーポートは 63342 に設定されており、WebStorm はサービスからこのポート経由で接続を受け付けます。 このデフォルト値を変更するには、 設定 ダイアログ(Ctrl+Alt+S )を開き、 に移動し、 ビルトインサーバー セクションで 1024 から始まる任意の値を指定します。
Ctrl+Alt+S を押して設定を開き、 を選択します。
開いた ウェブブラウザーとプレビュー ページには、定義済みリストのブラウザーと以前に設定したカスタムブラウザーのインストールがあればそれが表示されます。 各ブラウザーごとに、WebStorm はその名前、所属ファミリ、ブラウザーの実行可能ファイル/macOS アプリケーションへのパス、またはこのパスを表す定義済みの エイリアスを表示します。
ブラウザーをアクティブにするには、その名前の横にあるチェックボックスを選択します。 ブラウザーが メニュー項目のコンテキストメニューに追加され、そのアイコンがブラウザーアイコンポップアップに表示されます。 エディターでポップアップを非表示および表示する方法については、 ブラウザーアイコンポップアップを設定する を参照してください。
ブラウザーが標準のインストール手順に従ってインストールされた場合は、 エイリアスが パス フィールドで正しい場所を指している可能性が高いです。 そうでない場合は、
をクリックして、表示されるダイアログで実際のパスを選択します。
を選択するか Alt+F2 を押すか、ブラウザーのアイコンバーを起動すると、使用可能なブラウザーが ウェブブラウザーとプレビュー ページにリストされている順に表示されます。 リスト内のブラウザーの順序を変更するには、 および
ボタンを使用します。
カスタムブラウザーを構成する
Ctrl+Alt+S を押して設定を開き、 を選択します。
ツールバーの
をクリックし、新しい行にブラウザー名、ファミリ、実行可能ファイルまたは macOS アプリケーションへのパスを指定します。
カスタムプロファイルを使用する
Firefox および Chrome ファミリのブラウザーでは、カスタムプロファイルを使用できます。
ウェブブラウザーとプレビュー ページで、ブラウザーを選択してツールバーの
をクリックします。 選択したブラウザーのファミリに応じて、 Firefox 設定 または Chrome 設定 ダイアログが開きます。
Firefox の場合は、必要な profiles.ini ファイルへのパスを指定し、リストから使用するプロファイルを選択します。 Firefox のブラウザープロファイル(英語)で詳細を参照してください。
Chrome の場合は、 カスタムユーザーデータディレクトリを使用する チェックボックスを選択し、WebStorm 設定で ユーザーデータディレクトリの場所を指定します。
追加オプションで Chrome ファミリのブラウザーを起動するには、ツールバーの
をクリックし、開いた Chrome 設定 ダイアログの コマンドラインオプション フィールドに必要なキーを入力します。 Chrome で
chrome://flagsを開いて、Chrome コマンドラインオプションの詳細をご覧ください。
リストからブラウザーを削除する
必要なブラウザーを選択し、ツールバーの をクリックします。 削除できるのはカスタムブラウザーのみです。
デフォルトの WebStorm ブラウザーを選択
メインメニューの またはファイルのコンテキストメニューの から、アプリケーション出力をブラウザーでプレビューしたい場合、どのブラウザーでプレビューを開くかを選択する必要があります。 コンテキストメニューから特定のブラウザーを選択するか、 デフォルトブラウザー を選択できます。
WebStorm は外部リソースをレンダリングするために WebStorm デフォルトブラウザーも開きます。
Ctrl+Alt+S を押して設定を開き、 を選択します。
デフォルトブラウザー リストから、ページのプレビューにデフォルトで使用するブラウザーを選択します。
デフォルトのオペレーティングシステムブラウザーを使用するには、 システムデフォルト を選択します。
リストの上にブラウザーを使用するには、 リストの先頭 を選択します。 ツールバーの
および
アイコンを使用して、1 つまたは複数のブラウザーを変更します。
別のブラウザーをデフォルトとして使用するには、 カスタムパス を選択し、必要なブラウザーの実行可能ファイルの場所を指定します。 パスを手動で入力するか、必要に応じて 閲覧する
を使用してください。
ブラウザーアイコンポップアップを設定する
デフォルトでは、ブラウザーアイコンのポップアップは HTML ファイルでのみ表示されます。 XML ファイルでは、デフォルトではポップアップが表示されず、注意をそらさずにコードの読み書きができます。
HTML または XML ファイルでポップアップを表示または非表示にするには、 ツール | ウェブブラウザーとプレビュー 設定ページ Ctrl+Alt+S に移動し、 エディターでブラウザーポップアップを表示する 領域の HTML ファイル用 および XML ファイル用 チェックボックスを使用します。
HTML または XML ファイルでポップアップを非表示に設定すると、メインメニューから コマンドを使用するか、ファイルのコンテキストメニューから コマンドを使用して、対応するタイプのファイルをプレビューできます。
HTML ページの自動再ロードを構成する
デフォルトでは、HTML ファイルをブラウザーまたは組み込みプレビューで開いた後、この HTML ファイル(またはリンクされた JavaScript やスタイルシートファイル)が手動または自動的に保存されるたびに WebStorm はページを自動的に再読み込みします。詳細は 変更の保存と復元 を参照してください。
入力中にページを再読み込みして、HTML や関連ファイルへの変更が瞬時にブラウザーや組み込みプレビューに反映されるように、デフォルトの動作を変更できます。
ツール | ウェブブラウザーとプレビュー 設定ページ Ctrl+Alt+S に移動します。 または、 了解 ツールチップで 構成 をクリックします。
再ロードの動作 領域で、 ブラウザーでページを再ロード および 組み込みプレビューでページを再ロード リストから、Web ブラウザーおよび組み込みプレビューでページの自動再ロードをトリガーするアクションを選択します。 デフォルトでは、 保存時 が選択されています。
対応する HTML ファイルまたはリンクされたファイルを更新するときにページを再ロードするには、 変更時 を選択します。
自動アップロードを抑制するには、 無効 を選択します。
詳細は、 自動再ロードを構成するを参照してください。