VSCodeでファイルをブラウザで開く方法について

VSCodeでHTMLファイルを作成していると、「作成したページをブラウザで確認したい」という場面がよくあります。
VSCodeでは、HTMLファイルをVSCode内のブラウザで表示したり、ChromeやEdgeなどの外部ブラウザで開いたりできます。

また、Live Serverなどの拡張機能を利用して、ローカルWebサーバー経由でページを表示する方法もあります。

どの方法が適しているかは、単純なHTMLファイルを確認するのか、JavaScriptを利用するのか、ReactやVueなどのWebアプリを開発するのかによって変わります。

VSCodeでブラウザを開く主な方法

VSCodeからWebページを確認する代表的な方法には、次のようなものがあります。

Integrated Browserを利用する

現在のVSCodeには「Integrated Browser」というブラウザ機能があります。

HTMLファイルやWebページをVSCodeの画面内で表示できるため、コードエディターとブラウザを何度も切り替えずに作業できます。

単純なHTMLページを確認するのであれば、非常に手軽な方法です。

ChromeやEdgeなどの外部ブラウザで開く

HTMLファイルをChrome、Edge、Firefoxなどで直接開くこともできます。

実際のユーザーが利用するブラウザに近い環境で表示を確認したい場合に適しています。

Live Serverを利用する

HTML・CSS・JavaScriptによるWebサイト制作では、「Live Server」というVSCode拡張機能もよく利用されています。

Live Serverを利用するとローカルWebサーバーが起動し、ファイルを保存したタイミングでブラウザを自動更新できます。

プロジェクトの開発サーバーを利用する

React、Vue、Next.jsなどを利用している場合は、HTMLファイルを直接開くのではなく、プロジェクト側の開発サーバーを利用するのが基本です。

たとえばViteを利用しているプロジェクトなら、一般的に次のコマンドを実行します。

npm run dev

その後、ターミナルに表示されたlocalhostのURLをブラウザで開きます。

Integrated BrowserでHTMLファイルを開く方法

最新のVSCodeでは、ローカルのHTMLファイルをIntegrated Browserで直接プレビューできます。

拡張機能を追加しなくても利用できるため、HTMLを簡単に確認したいときに便利です。

HTMLファイルを右クリックして開く

たとえば、次のようなWebサイトを作成しているとします。

sample-site/
├─ index.html
├─ style.css
└─ script.js

VSCodeのエクスプローラーからindex.htmlを右クリックします。

表示されるメニューから、

Open in Integrated Browser

を選択すると、VSCode内のブラウザでHTMLページを確認できます。

HTMLファイルをエディターで開いている場合は、エディター上部に表示されるプレビュー関連の操作から開ける場合もあります。

HTMLの編集内容を確認する

Integrated BrowserでHTMLをプレビューすると、編集内容を確認しながらコーディングできます。

そのため、

HTMLを編集する
↓
プレビューを確認する
↓
さらに修正する

という作業をVSCode内で完結させやすくなります。

ただし、実際のWebサイト公開前にはChromeやEdge、Firefoxなどの実ブラウザでも表示を確認することをおすすめします。

コマンドパレットからIntegrated Browserを開く方法

Integrated Browserは、コマンドパレットから開くこともできます。

コマンドパレットを表示する

Windows・Linuxでは次のショートカットを使用します。

Ctrl + Shift + P

macOSの場合は次のとおりです。

Command + Shift + P

コマンドパレットが表示されたら、

Browser: Open Integrated Browser

などのIntegrated Browser関連コマンドを検索して実行します。

これにより、VSCode内でWebページを開けます。

ChromeやEdgeなどでHTMLを直接開く方法

HTMLファイルは、Webサーバーを使用せずにブラウザから直接開くこともできます。

HTMLファイルを直接開いた場合のURL

たとえばWindowsでindex.htmlをChromeなどから直接開くと、アドレスバーには次のようなURLが表示されることがあります。

file:///C:/Users/user/Documents/sample-site/index.html

これはWebサーバー経由ではありません。

PCに保存されているHTMLファイルをブラウザが直接読み込んでいる状態です。

単純なHTMLやCSSを確認するだけなら、この方法でも問題ない場合があります。

WindowsからHTMLファイルをブラウザで開く方法

Windowsでは、VSCodeのターミナルからHTMLファイルを開くこともできます。

既定ブラウザで開く

PowerShellやコマンドプロンプトで、HTMLファイルのあるフォルダーへ移動します。

その後、次のように実行します。

start index.html

WindowsでHTMLファイルに関連付けられている既定のブラウザが起動します。

Chromeを直接指定する場合

環境によっては次のようなコマンドも利用できます。

start chrome index.html

ただし、Chromeのインストール状況やPATH設定によっては動作しません。

特定のブラウザに依存せず開きたい場合は、

start index.html

の方が利用しやすいでしょう。

macOSからHTMLファイルをブラウザで開く方法

macOSでは、ターミナルからopenコマンドを利用できます。

既定のアプリケーションで開く

open index.html

HTMLファイルに関連付けられたブラウザなどでファイルが開きます。

Google Chromeを指定する

Chromeを明示的に指定する場合は、次のように実行できます。

open -a "Google Chrome" index.html

LinuxからHTMLファイルをブラウザで開く方法

Linuxでは、デスクトップ環境によって異なりますが、一般的にはxdg-openを利用できます。

xdg-open index.html

設定されている既定ブラウザなどでHTMLファイルが開きます。

HTMLファイルを直接開く場合の注意点

file://形式でHTMLファイルを直接開く方法は簡単ですが、Web開発では問題が発生する場合があります。

fetchが正常に動作しない場合がある

たとえばJavaScriptで次のような処理を記述しているとします。

fetch("./data.json")
  .then(response => response.json())
  .then(data => console.log(data));

HTMLをfile://で直接開いている場合、ブラウザのセキュリティ制約によってファイルの読み込みが失敗することがあります。

ブラウザや処理内容によって動作は異なるため、必ず失敗するわけではありません。

ただし、JavaScriptを使用したWebサイトでは、ローカルWebサーバー経由で確認した方がトラブルを避けやすくなります。

ES Modulesを利用する場合にも注意する

たとえば次のようにJavaScriptを読み込んでいる場合です。

<script type="module" src="./main.js"></script>

ES Modulesはブラウザのセキュリティポリシーの影響を受けることがあります。

そのため、

file:///...

ではなく、

http://localhost:...

から確認する方法がおすすめです。

Live Serverを使ってHTMLをブラウザで開く方法

HTML・CSS・JavaScriptによるWebサイト制作では、VSCodeの「Live Server」を利用する方法もあります。

Live ServerはローカルWebサーバーを起動して、Webページをブラウザから確認できる拡張機能です。

Live Serverをインストールする

VSCode左側にあるExtensionsを開きます。

Windows・Linuxでは、次のショートカットでも開けます。

Ctrl + Shift + X

検索ボックスに、

Live Server

と入力します。

代表的な拡張機能として、Ritwick Dey氏が提供している「Live Server」があります。

インストールが完了したら、HTMLファイルを開きます。

Open with Live Serverを利用する

VSCodeのエクスプローラーでindex.htmlを右クリックします。

次に、

Open with Live Server

を選択します。

ブラウザが起動し、たとえば次のようなURLでページが表示されます。

http://127.0.0.1:5500/index.html

ポート番号などは環境や設定によって異なります。

Go Liveから起動する

Live Serverをインストールすると、VSCodeのステータスバーに、

Go Live

が表示される場合があります。

「Go Live」をクリックしてローカルサーバーを起動することもできます。

Live Serverを利用するメリット

Live Serverの大きなメリットは、HTMLやCSSを変更したときにブラウザを自動更新できることです。

CSSの変更をすぐ確認できる

たとえばCSSを次のように変更したとします。

変更前は次のとおりです。

h1 {
    font-size: 40px;
}

変更後を次のようにします。

h1 {
    font-size: 60px;
}

ファイルを保存すると、Live Serverによってブラウザが自動的に再読み込みされます。

通常なら、

コードを変更
↓
保存
↓
ブラウザへ移動
↓
再読み込み

という操作が必要です。

Live Serverなら、

コードを変更
↓
保存
↓
ブラウザが自動更新

という流れにできるため、HTMLやCSSのコーディングを効率化できます。

Integrated BrowserとLive Serverの違い

Integrated BrowserとLive Serverは似ているように見えますが、役割が異なります。

Integrated Browserはページを表示する機能

Integrated Browserは、VSCode内にWebページを表示するための機能です。

HTMLの簡単なプレビューやlocalhostで動作しているWebアプリの確認などに利用できます。

Live ServerはWebサーバーを起動する機能

Live Serverは、ローカルに簡易Webサーバーを起動する拡張機能です。

つまり、

Integrated Browser
→ Webページを見る機能

Live Server
→ Webページを配信するサーバーを起動する機能

と考えると分かりやすいでしょう。

両者は競合する機能ではありません。

Live ServerでWebサーバーを起動し、そのURLをIntegrated Browserで開くという使い方もできます。

Live Serverは必ず必要なのか

現在のVSCodeではIntegrated BrowserでローカルHTMLをプレビューできるため、単純にHTMLの表示を確認するだけならLive Serverは必須ではありません。

単純なHTMLを確認する場合

HTMLのレイアウトを簡単に確認したいだけなら、

index.html
↓
Open in Integrated Browser

という方法で十分です。

Webサーバーが必要な場合

JavaScriptによるファイル読み込みなど、HTTP環境で確認したい場合にはLive Serverなどが便利です。

Live Server
↓
ローカルWebサーバーを起動
↓
http://localhost相当のURLで確認

という形になります。

Pythonを使ってローカルWebサーバーを起動する方法

Live Serverをインストールしたくない場合は、Pythonを利用して簡易Webサーバーを起動する方法もあります。

PythonでWebサーバーを起動する

HTMLファイルのあるフォルダーをVSCodeで開きます。

VSCodeのターミナルから次のように実行します。

python -m http.server 8000

環境によっては、

python3 -m http.server 8000

を使用します。

その後、ブラウザから、

http://localhost:8000/

へアクセスします。

index.htmlが存在すれば、そのページを表示できます。

Pythonを利用するメリット

Pythonがすでにインストールされていれば、VSCode拡張機能を追加せずに簡易HTTPサーバーを用意できます。

構成としては、

VSCode
↓
Python HTTP Server
↓
http://localhost:8000
↓
Chrome・Edge・Firefoxなど

という形になります。

ReactやVueでは開発サーバーを利用する

React、Vue、Next.jsなどを利用している場合は、Live Serverを利用するよりも、プロジェクトに用意されている開発サーバーを使用するのが基本です。

Viteの場合

Viteを使用したプロジェクトでは、一般的に次のコマンドを実行します。

npm run dev

すると、ターミナルに次のようなURLが表示されます。

http://localhost:5173/

このURLをブラウザで開きます。

ReactやVueの場合

現在はReactやVueの開発環境でViteが利用されるケースも多いため、同じように、

npm run dev

から開発サーバーを起動する構成があります。

実際に使用するコマンドは、プロジェクトのpackage.jsonに定義されているscriptによって異なります。

Next.jsの場合

Next.jsでも通常は、

npm run dev

などから開発用サーバーを起動します。

そのため、ReactやVue、Next.jsなどのWebアプリでは、HTMLファイルを単独でブラウザへドラッグして開く方法は基本的に使用しません。

localhostのURLをIntegrated Browserで開く方法

現在のVSCodeでは、ターミナルなどに表示されたローカルURLをIntegrated Browserで開くことができます。

たとえば、

http://localhost:5173/

というURLがターミナルに表示された場合です。

リンクをクリックすると、設定によってIntegrated Browserでページを表示できます。

対象には、

localhost
127.0.0.1
[::1]

などのローカルアドレスがあります。

localhostをChromeなどの外部ブラウザで開く方法

Integrated BrowserではなくChromeやEdgeで確認したい場合は、VSCodeの設定を変更できます。

openLocalhostLinksを変更する

VSCodeには、

workbench.browser.openLocalhostLinks

という設定があります。

localhostのリンクを外部ブラウザで開きたい場合は、この設定を無効にできます。

settings.jsonを利用する場合は、次のような設定になります。

{
    "workbench.browser.openLocalhostLinks": false
}

設定画面から対象項目を検索して変更することもできます。

使用する外部ブラウザを指定する

VSCodeでは、

workbench.externalBrowser

という設定を利用して、外部ブラウザを指定できます。

Chrome、Edge、Firefoxなどを利用したり、環境によってはブラウザの実行ファイルを指定したりできます。

外部ブラウザを固定したい場合に便利です。

CSSがブラウザに反映されない場合の対処法

ブラウザでHTMLは表示されるのにCSSが適用されない場合は、CSSファイルのパスを確認しましょう。

フォルダー構成を確認する

たとえば次のような構成になっているとします。

sample-site/
├─ index.html
└─ css/
   └─ style.css

この場合、HTMLでは次のように指定します。

<link rel="stylesheet" href="./css/style.css">

次のように記述すると、

<link rel="stylesheet" href="./style.css">

index.htmlと同じフォルダーにstyle.cssが存在するものとして探すため、CSSが読み込まれません。

JavaScriptが動かない場合の対処法

JavaScriptが動作しない場合も、まずファイルパスを確認します。

JavaScriptのパスを確認する

次のような構成だとします。

sample-site/
├─ index.html
└─ js/
   └─ script.js

この場合は、

<script src="./js/script.js"></script>

のように記述します。

ES Modulesを利用している場合

ES Modulesを利用するなら、たとえば次のように記述します。

<script type="module" src="./js/main.js"></script>

この場合は、file://から直接HTMLを開くよりも、Live ServerやPythonのHTTPサーバーなどを利用してlocalhost経由で確認する方が安全です。

コードを変更してもブラウザに反映されない場合

コードを修正したのにブラウザの表示が変わらない場合は、いくつか確認するポイントがあります。

ファイルが保存されているか確認する

まず、変更したファイルが保存されているか確認します。

Windows・Linuxでは、

Ctrl + S

macOSでは、

Command + S

で保存できます。

ブラウザを強制再読み込みする

ブラウザのキャッシュによって古いCSSやJavaScriptが表示される場合があります。

Windows版のChromeやEdgeなどでは、

Ctrl + Shift + R

などで強制再読み込みできます。

macOSでは、

Command + Shift + R

などが利用できます。

ブラウザによって操作方法が異なる場合があるため、必要に応じて利用しているブラウザの仕様を確認しましょう。

Open in Integrated Browserが表示されない場合

使用しているVSCodeが古い場合、HTMLファイルを右クリックしても「Open in Integrated Browser」が表示されないことがあります。

VSCodeをアップデートする

Integrated BrowserやローカルHTMLプレビューは比較的新しいVSCodeで強化された機能です。

メニューからVSCodeの更新状況を確認し、必要に応じて最新版へアップデートしてください。

企業や学校などの管理されたPCでは、アップデートできるバージョンが制限されている場合もあります。

リモート開発環境では注意する

Integrated BrowserからローカルHTMLファイルを直接開く機能は、通常のローカル環境で利用することを想定した機能です。

Remote SSHなどでは動作が異なる場合がある

たとえば、

Remote SSH
Dev Containers
仮想ワークスペース

などでは、ローカル環境と同じ方法でHTMLを直接開けないことがあります。

このような場合は、

開発サーバーを起動
↓
localhostなどのURLを取得
↓
ブラウザでアクセス

という方法を利用するとよいでしょう。

VSCodeでファイルをブラウザで開く方法の使い分け

どの方法を使用すればよいのか迷った場合は、開発内容に応じて判断できます。

HTMLを簡単に確認したい場合

単純なHTMLページであれば、

Open in Integrated Browser

を利用する方法が手軽です。

VSCodeから離れずにページを確認できます。

HTML・CSSを頻繁に編集する場合

HTMLやCSSを編集しながら外部ブラウザで頻繁に確認するなら、

Live Server

が便利です。

保存時にブラウザを自動更新できるため、コーディング作業を効率化できます。

JavaScriptでファイルを読み込む場合

fetch()やES Modulesなどを利用する場合は、

http://localhost:...

のようなローカルWebサーバー経由で確認するのがおすすめです。

Live ServerやPythonのhttp.serverなどを利用できます。

React・Vue・Next.jsを利用する場合

React、Vue、Next.jsなどでは、

npm run dev

などを利用してプロジェクト側の開発サーバーを起動します。

Live ServerでHTMLファイルだけを開くのではなく、フレームワークやビルドツールが提供する開発環境を使用します。

VSCodeでファイルをブラウザで開く方法のまとめ

VSCodeでHTMLファイルを確認する方法はいくつかあります。

現在のVSCodeではIntegrated Browserが用意されているため、単純なHTMLページであればVSCode内でそのままプレビューできます。

一方、HTML・CSS・JavaScriptによるWebサイト制作では、Live Serverを利用すると保存時の自動更新が使えるため便利です。

また、fetch()やES Modulesなどを利用する場合は、file://で直接HTMLを開くより、Live ServerやPythonのHTTPサーバーを利用してhttp://localhost経由で確認する方がトラブルを避けやすくなります。

React、Vue、Next.jsなどのWebアプリでは、npm run devなどでプロジェクト専用の開発サーバーを起動するのが基本です。

用途ごとに整理すると、次のようになります。

HTMLを簡単に確認
→ Integrated Browser

HTML・CSSを編集しながら確認
→ Live Server

簡易HTTPサーバーが必要
→ Live Server / Python http.server

React・Vue・Next.jsなど
→ プロジェクトの開発サーバー

公開前の最終確認
→ Chrome・Edge・Firefoxなどの実ブラウザ

単純にブラウザへ表示したいのか、Webサーバー上で動作確認したいのかを意識して方法を使い分けると、VSCodeでのWeb制作をよりスムーズに進められます。

以上、VSCodeでファイルをブラウザで開く方法についてでした。

最後までお読みいただき、ありがとうございました。