Chromeデベロッパーツールの機能が、すごく簡単で便利！ローカルサーバーを1分もかからずにすぐ構築できる

Chromeデベロッパーツールはいろいろ便利ですが、お手軽にローカルサーバーも構築することもできるんですね。簡易的なサーバーですが、HTML, CSS, JavaScriptのWebページであれば充分な機能を備えています。

Chromeデベロッパーツールを使用して、ローカルのWebサーバーを構築する方法を紹介します。もちろん、WindowsでもmacOSでもどちらでも簡単にできます。
1分もかからずに用意することができ、切り替えは1クリックでOKです。

What's New In DevTools (Chrome 65)

• デベロッパーツールのバージョン
• Step 1: ファイルを用意
• Step 2: デベロッパーツールの設定
• Step 3: ローカルのWebサーバーにアクセス

デベロッパーツールのバージョン

ローカルのWebサーバーを構築するには、デベロッパーツールの「Local Overrides」を使用します。この機能はChrome 65からサポートされており、最新のChrome 67でも利用できます。もちろん、Windows, macOSの日本語環境で問題ありません。
参考: What's New In DevTools (Chrome 65)

Step 1: ファイルを用意

サーバーに設置するファイルを用意します。
とりあえずは、「index.html」を作成しました。

フォルダ「chromelocal」を作成し、index.htmlを置きます。
※フォルダの場所はどこでも構いません。

ここでは、「chromelocal」フォルダ内にアクセスする用のルートフォルダ「coliss.com」を作成して、その中に「index.html」を用意しました。

Step 2: デベロッパーツールの設定

デベロッパーツールで、ローカルのWebサーバーを設定します。

1. デベロッパーツールを起動し、Sourcesパネルを開きます。
2. Overridesタブを選択し、「Select folder for overrides」をクリックして、作成したフォルダ「chromelocal」を指定します。
3. 上部に確認パネルが表示され、「Allow」をクリックすると、デベロッパーツールにディレクトリへの読み書きアクセス権が与えられます。

これで、完了です。

SourcesパネルのOverridesタブを選択、「Select folder for overrides」をクリック

確認パネルの「Allow」をクリック

設定完了

Step 3: ローカルのWebサーバーにアクセス

設定したフォルダ「coliss.com」をブラウザのアドレス欄に入力すると、ローカルのWebサーバーにアクセスできます。
※デベロッパーツールを起動しているタブで有効な機能です。起動していないタブではローカルのデータにアクセスできません。

アドレス欄に「coliss.com」を入力

「coliss.com」を入力すると、通常は当ブログが表示されますが、設定通りにローカルのファイルが表示されました。

設定をオフにするのも簡単です。
「Enable Local Overrides」のチェックボックスをオフにします。

ローカルサーバーをオフ

オフにしたので、「coliss.com」で当ブログが表示されます。

通常通り、https://coliss.comが表示されます

制限事項

• ElementsパネルのDOMツリーに加えられた変更を保存しません。その代わりに、SourcesパネルでHTMLを編集します。
• StylesパネルでCSSを編集し、そのCSSのソースがHTMLファイルの場合、変更を保存しません。その代わりに、SourcesパネルでHTMLファイルを編集します。