ローカルコピーを使用して Web ページリソースをオーバーライドする ([オーバーライド] タブ)

2025-07-01

場合によっては、Web ページに対して考えられるいくつかの修正を試す必要がありますが、ソースファイルにアクセスできない場合や、ページを変更するには、遅くて複雑なビルドプロセスが必要です。 DevTools では、あらゆる種類の問題をデバッグして修正できます。ただし、変更は保持されません。ローカルファイルを更新すると、すべての作業が失われます。ソースツールのオーバーライド機能は、この問題を解決するのに役立ちます。

現在の Web ページのリソースを取得し、ローカルに保存できます。 Web ページを更新すると、ブラウザーはサーバーからリソースを読み込まれません。代わりに、ブラウザーはサーバーリソースをリソースのローカルコピーに置き換えます。作成したオーバーライドは、リロード間で保存されます。

オーバーライド機能は、ソースファイルへのマッピングを目的としたものではありません。

ローカルオーバーライド用のフォルダーを初めて設定する場合、そのフォルダーは空である必要があります。 DevTools では、オーバーライドを格納するために必要なすべてのフォルダーとサブフォルダーが作成されます。

オーバーライドを格納するローカルフォルダーを設定する

https://microsoftedge.github.io/Demos/demo-to-do/などの Web ページを右クリックし、[検査] を選択します。 DevTools が開きます。
[ ソース ] () ツールを選択します。
左側の [ ナビゲーター ] ウィンドウで、[ オーバーライド ] タブ ([ ページ ] タブでグループ化) をクリックします。必要に応じて、[ その他のタブ (v)] ボタンをクリックします。
[オーバーライド] タブを選択し、もう一度 [ その他のタブ ] ボタンをクリックしてタブを折りたたみます。
[+ フォルダーの選択] をクリックしてオーバーライドします。
ファイルナビゲーションダイアログで、置き換えるリソースファイルを格納するローカルコンピューター上のフォルダー ( C:\Users\myusername\overridesなど) を選択し、[ フォルダーの選択 ] ボタンをクリックします。

DevTools は、フォルダーへのフルアクセス権が必要であり、機密情報を表示してはならないことを警告します。
[ 許可 ] ボタンをクリックします。

[オーバーライド] タブの [ ローカルオーバーライドを有効にする] の横にチェックボックスが表示されます。 [ローカルオーバーライドを有効にする] の右側には、ローカルオーバーライド設定を削除できる [構成のクリア] アイコンがあります。これで、フォルダーの設定が完了し、ライブリソースをローカルリソースに置き換える準備が整いました。

Overrides フォルダーへのファイルの追加

次に、次のように、Overrides フォルダーにファイルを追加します。この例では、CSS ファイルを追加します。

[要素] ツールを選択し、[スタイル] タブで CSS ファイルの名前 (to-do-styles.cssなど) をクリックします。

[ソース] ツールが開き、選択したファイルがエディターウィンドウのタブで開きます。
エディターウィンドウで、ファイルのタブ ( to-do-styles.cssなど) を右クリックし、[ コンテンツのオーバーライド] を選択します。

ファイルのタブに紫色のドットが付いたページアイコンが追加され、[ オーバーライド ] タブにファイルが追加されます。

この例では、ファイルは次のように表示されます。 microsoftedge.github.io/Demos/demo-to-do/styles > to-do-styles.css

ファイルは、オーバーライドフォルダー ( C:\Users\myusername\overrides など) にある新しいディレクトリに格納されます。
エクスプローラーまたは Finder で、DevTools がファイルの URL (microsoftedge.github.io など) を使用して名前が付けられ、C:\Users\myusername\overrides\microsoftedge.github.io\Demos\demo-to-do\stylesなどの正しいディレクトリ構造を含むサブフォルダーを作成したことを確認します。オーバーライドするファイルは、このディレクトリに格納されます。

[ソース] ツールのエディターウィンドウで、紫色のドットが付いたページアイコンがファイルのタブに追加されます。紫色のドットは、ファイルが Web サーバーから返されるファイルをオーバーライドするローカルファイルであることを示します。

オーバーライドファイルを使用してスタイルを変更する

上記の手順に進み、ローカルオーバーライド CSS ファイル (この例では to-do-styles.css) を使用して、Web ページのスタイルを変更できるようになりました。次のように、レンダリングされた Web ページ本文の周囲に太い赤い罫線を追加します。

DevTools で、要素 () ツールを選択し、[ スタイル ] タブが選択されていることを確認します。
次の CSS スタイルプロパティをコピーし、CSS オーバーライドファイル内の既存の body 要素 CSS ルール ( to-do-styles.css など) に貼り付けます。
```
border: 10px solid firebrick
```
レンダリングされた Web ページの本文の周囲に太い赤い ("firebrick") 罫線が追加され、変更された CSS ファイルが自動的にコンピューターの Overrides ディレクトリに保存されます。
Web ページを更新します。

ローカルオーバーライドファイルを使用する代わりに Web サーバーから返される CSS ファイルをレンダリングする場合と同様に、太い赤い罫線は表示されたままで、作業は失われません。

他のタブまたはツール内からオーバーライドにファイルを追加する

上から進み、[ ソース ] () ツールを選択し、左側の [ ページ ] タブ ([ 上書き ] タブでグループ化) を選択します。
ページのリソースファイルのツリーで、 styles フォルダーを展開します。オーバーライドフォルダーに既に配置されているファイル ([ オーバーライド ] タブを使用) ( to-do-styles.cssなど) には、アイコンに紫色のドットが表示されます。
(index) (index.html) などの別のファイルを右クリックし、[コンテンツのオーバーライド] を選択します。

[ソース] ツールの [ページ] タブと [オーバーライド] タブで、ファイルのアイコンが紫色のドット (index.html など) のページアイコンに変わり、ファイルがローカルドライブの Overrides ディレクトリに追加されます。
ネットワーク () ツールを選択し、Web ページのリソースファイル (to-do.jsなど) を右クリックし、[コンテンツのオーバーライド] を選択します。

DevTools UI 全体で、ファイルのアイコンが紫色のドット ( to-do.js など) のページアイコンに変わり、ファイルがローカルドライブの Overrides ディレクトリに追加されます。

オーバーライドが有効な場合、Web サーバーから返されるリソースファイルではなく、Overrides フォルダー内のコンピューターにあるリソースファイルが使用されます。