ワークスペースを使用してファイルを編集する ([ファイルシステム] タブ)

[アーティクル]
12/08/2023

ソース ツールの [ファイルシステム] タブを使用してワークスペースを定義し、DevTools の変更を Web サーバーから返されるファイルの一時的なコピーではなく、ソースコードファイルに保存します。

このチュートリアルでは、DevTools でワークスペースを設定して使用する方法を実践的に説明します。ワークスペースにファイルを追加すると、DevTools を使用してソースコードで行った変更がローカルコンピューターに保存されます。これらの変更は、ページ更新の間で保持されます。

使用されているテクノロジの知識を更新するには、次の記事を参照してください。

HTML、CSS、JavaScript を使用して Web ページを作成します。「Web の概要」を参照してください
DevTools を使用して CSS に基本的な変更を加えます。 CSS の表示と変更の概要に関するページを参照してください
ローカル HTTP Web サーバーを実行します。詳細:
- Node.js の使用 (このチュートリアルで使用): Visual Studio Code 用 DevTools 拡張機能のインストールに関するページで localhost サーバーを設定します。
- Python の使用: 「ローカルテストサーバーを設定する方法」の単純な ローカル HTTP サーバーを実行する方法

はじめに

DevTools ワークスペース を使用すると、ソースコードのローカルコピーに加えた変更をコンピューター上の同じファイルに保存して、ページの更新時に変更が保持されるようにすることができます。ワークスペースを使用する一般的なシナリオを次に示します。

デスクトップにデモ Web サイトのソースコードがあります。
サイトにアクセス localhost:8080できるように、ソースコードディレクトリからローカル Web サーバーを実行しています。注: Python サーバーオプションを使用する場合、既定のポート番号はです 8000。
Microsoft Edge で開 localhost:8080 き、DevTools を使用して、CSS、HTML、JavaScript ファイルを含む Web サイトのソースコードを変更しています。

以下のチュートリアル手順では、この環境のセットアップについて説明します。

制限事項

最新のフレームワークを使用している場合、ソースコードは、保守が容易な形式から、できるだけ迅速に実行できるように最適化された形式に変換される可能性があります。ワークスペースは、通常、JavaScript と CSS のソースマップを使用して、最適化されたコードを元のソースコードにマップできます。ただし、各フレームワークでソースマップを使用する方法には多くのバリエーションがあります。

DevTools では、すべてのフレームワークバリエーションがサポートされているわけではありません。たとえば、ワークスペース機能 ([ファイルシステム] タブ) は、アプリフレームワークの作成React使用できません。

選択したフレームワークでワークスペースを使用しているときに問題が発生した場合、または必要なフレームワーク固有の手順を特定する場合は、 Chrome DevTools メーリングリストでスレッドを開始するか、Stack Overflow に関する質問をして、DevTools コミュニティの残りの部分と情報を交換します。

オーバーライド は、ワークスペースに似た DevTools 機能です。オーバーライドは、Web ページへの変更を試す場合に使用でき、Web ページの読み込み間で変更を表示する必要がありますが、変更を Web ページのソースコードにマッピングする必要はありません。ただし、Web ページを更新しても変更は保存されません。

オーバーライド機能を使用すると、Web ページファイルのローカルコピーをサーバーに格納できます。ページを更新すると、Microsoft Edge はサーバー上のファイルの代わりにファイルのローカルコピーを読み込みます。オーバーライドの詳細については、「ローカルコピーを使用して Web ページリソースをオーバーライドする ([オーバーライド] タブ)」を参照してください。

ソースファイルのディレクトリを作成する

デモファイルを設定し、DevTools を設定します。

別のウィンドウまたはタブで、[ ワークスペース] デモソースコードに移動します。
や C:\Users\myusername\app\などの~/Desktop/appディレクトリをapp作成します。デモのソースコードからディレクトリにapp、、 styles.css をコピーindex.htmlします。 ../shared/img/logo.pngREADME.mdscript.js チュートリアルの残りの部分では、このディレクトリはまたは C:\Users\myusername\app\と~/Desktop/app呼ばれますが、別のパスを使用することもできます。
まだインストールしていない場合は、Node.js と npm をインストールします。詳細については、「Visual Studio Code 用 DevTools 拡張機能のインストール」の「Node.js とノードパッケージマネージャー (npm) をインストールする」を参照してください。
Git bash シェルや Microsoft Visual Studio Code の [ターミナル] ウィンドウなどのコマンドプロンプトに移動します。
または C:/Users/myusername/appなど~/Desktop/app、作成したディレクトリにapp移動します。 git bash シェルを使用する場合は UNIX シェルであるため、Windows の場合でも、円記号を引用符で囲んだディレクトリパスをラップするか、円記号ではなくスラッシュを使用する必要があります。

次のいずれかのコマンドを実行して、Web サーバーを起動します。
Node.js オプション:

# Node.js option
cd ~/Desktop/app  # or:  cd C:/Users/myusername/app
npx http-server  # Node.js

詳細とオプションについては、「Visual Studio Code 用 DevTools 拡張機能のインストール」の「サーバーの起動 (npx http-server)」を参照してください。

# Python 2 option
cd ~/Desktop/app  # or:  cd C:/Users/myusername/app
python -m SimpleHTTPServer  # Python 2

# Python 3 option
cd ~/Desktop/app  # or:  cd C:/Users/myusername/app
python -m http.server  # Python 3

Microsoft Edge でタブを開き、ローカルでホストされているバージョンのサイトに移動します。を使用 localhost:8080してアクセスできる必要があります。

もう 1 つの一般的な同等の URL はです http://0.0.0.0:8080。 Python サーバーオプションの既定のポート番号はです 8000。正確なポート番号が異なる場合があります。

DevTools でワークスペースを定義する

Ctrl + Shift + J (Windows、Linux) または Command + Option + J (macOS) を押して、DevTools コンソールを開きます。
[ソース] () タブをクリックします。
左側の [ ナビゲーター ] ウィンドウで、[ ファイルシステム ] タブ ([ ページ ] タブでグループ化) をクリックします。
[ フォルダーをワークスペースに追加] をクリックします。エクスプローラーまたは Finder が開きます。
作成した /app/ ディレクトリに移動します。たとえば、[ フォルダー: ] テキストボックスに、や C:\Users\myusername\app\などの~/Desktop/appパスを入力します。次に、[ フォルダーの選択 ] ボタンをクリックします。

DevTools は、DevTools にディレクトリへのフルアクセス権を付与するかどうかを確認するメッセージを app 表示します。
[ 許可 ] ボタンをクリックして、DevTools にディレクトリの読み取りと書き込みのアクセス許可を付与します。

[ファイルシステム] タブには、index.htmlscript.jsおよび styles.cssの緑色のドットを持つページアイコンがあります。緑色のドットは、DevTools が Web サーバーから受信したページのネットワークリソースとディレクトリ内のローカルソースファイルとの間にマッピングを app 確立したことを示します。

CSS を編集し、ソースファイルに変更を保存する

CSS ファイルを変更し、ディスクに保存するには:

[ソース] ツールの [ファイルシステム] タブ ([ページ] タブでグループ化) で、それを選択styles.cssしてエディターウィンドウで開きます。要素のプロパティは color にh1fuchsia設定されます。
[ 要素 ()] ツールを選択し、DOM ツリーで要素を <body> 展開し、要素を <h1> 選択します。

[ スタイル ] ウィンドウには、要素に適用される CSS ルールが <h1> 表示されます。の横にあるstyles.css:1マップされたファイル (は、緑色のドットが付いたページです。緑色のドットは、この CSS 規則に対して行った変更がディレクトリ内にappマップされることをstyles.css意味します。
要素のプロパティの値をcolor<h1>オレンジ色に変更します。これを行うには、DOM ツリーで要素を選択<h1>します。の CSS ルール h1で、をクリックし fuchsia、 オレンジ色の入力を開始し、色の一覧から オレンジ色 を選択します。
Visual Studio Code などのテキストエディターで、ディレクトリ内appにあるのコピーstyles.cssを開きます。プロパティが color 新しい色に設定されました。これは、この例ではオレンジ色です。変更は、Web サーバーから返されたファイルのコピーで行われただけではありません。変更は、ワークスペースディレクトリ内のマップされたファイルでも app 行われました。
ページを最新の情報に更新してください。

要素の <h1> 色は、引き続き新しい色に設定されます。変更を行った場合、DevTools によって変更がディスクに保存されたため、変更は更新後も保持されます。ページを更新すると、ローカルサーバーがディスクからファイルの変更されたコピーを処理しました。

ヒント： また、fucshia 色の見本をクリックしてカラーピッカーを開き、新しい色を選択することで、色を変更することもできます。選択した色の HEX 値は、色名です。

HTML を編集し、ソースファイルに変更を保存する

要素ツールでは、サーバーから返されるファイルのコピーで HTML タグ付けを変更できます。ただし、編集内容をローカルソースファイルに保存するには、[要素] ツールではなく [ソース] ツールを使用する必要があります。

要素ツールで DOM ツリーを変更しても、変更は保存されません

要素ツールの DOM ツリーを使用して HTML コンテンツに変更を加えることができますが、DOM ツリーに対する変更はディスクに保存されず、現在のブラウザーセッションにのみ影響します。

次の手順は、DOM ツリーの編集がページ更新の間で保持されていないことを示しています。

上記の手順に進み、[ 要素 ] ツールを選択します。
DOM ツリーの要素で <h1> 、テキスト文字列 DevTools Workspaces Demoを選択して削除し、テキスト文字列 I Love Cakeを入力して Enter キーを押します。レンダリングされた Web ページには、新しい見出しテキストが表示されます。
index.html Visual Studio Code などのテキストエディターで、ディレクトリ内appにあるファイルを開きます。先ほど行った変更は表示されません。見出しは引き続き "DevTools Workspaces Demo" と読み上げられます。
ブラウザーで、デモページを更新します。編集した DOM ツリーが破棄され、ワークスペースディレクトリ内の変更されていない index.html ファイルから DOM が再作成されたため、ページは元の見出し "DevTools Workspaces Demo" に app 戻ります。

ソースツールから HTML を変更すると、変更が保存されます

Web ページ HTML に変更を保存する場合は、要素ツールの DOM ツリーの HTML を変更するのではなく、([ファイルシステム] タブで) 定義されたワークスペースを使用してソース ツールの HTML を編集します。

上から進み、[ソース] (タブをクリックします。
左側の [ ナビゲーター ] ウィンドウで、を選択します index.html。ページの HTML が開きます。
ファイルの一覧でをに置き換えます <h1>DevTools Workspaces Demo</h1> (要素ツールの DOM ツリーではなく)。<h1>I Love Cake</h1>
Ctrl + S (Windows、Linux) または Command + S (macOS) を押して変更を保存します。
ページを最新の情報に更新してください。レンダリングされたページの見出しが "I Love Cake" に変わります。これは、その文字列がマップされたappディレクトリにindex.html保存されていたためです。
Visual Studio Code などのテキストエディターで、ディレクトリ内appにあるのコピーindex.htmlを開きます。

ソース <h1>ツールの エディターを使用して変更を行い、変更を保存 index.html し、そのファイルがワークスペース ( [ファイルシステム ] タブ) にマップされ、ファイルのアイコンの緑色のドットで示されたため、要素には新しいテキストが含まれています。

JavaScript を編集し、ソースファイルに変更を保存する

DevTools のコードエディターを使用するメイン場所は、ソース ツールです。ただし、ファイルの編集中に、要素ツールや コンソールなどの他のツールにアクセスする必要がある場合があります。 クイックソース ツールを使用すると、任意のツールが開いている間に、[ソース] ツールのエディターだけが表示されます。

DevTools コードエディターを他のツールと共に開くには:

上記の手順に進み、[要素] ( [要素 ] )ツールを選択します。
Ctrl + Shift + P (Windows、Linux) または Command + Shift + P (macOS) を押して、コマンドメニューを開きます。
[実行] プロンプトで、クイック入力を開始し、[クイックソースの表示] を選択します。

DevTools ウィンドウの下部に クイックソース ツールが開き、の index.html内容が表示されます。これは、 ソース ツールで最後に編集したファイルであるためです。必要に応じて、[ クイックビューの展開] をクリックし、[ 要素 ] ツールが選択されていることを確認します。
Ctrl + P (Windows、Linux) または Command + P (macOS) を押して、コマンドメニューの [ファイルを開く] プロンプトを表示します。
スクリプトの入力を開始し、アプリ/ディレクトリにある script.js を選択します。

ファイルの一覧が クイックソース ツールに表示されます。レンダリングされたデモ Web ページでは、[ ワークスペースを含むファイルの編集] ハイパーリンクのスタイルは斜体ではありません。
クイックソース ツールを使用して、次のコードを script.jsの下部に追加します。
```
document.querySelector('a').style = 'font-style:italic';
```
Ctrl + S (Windows、Linux) または Command + S (macOS) を押して変更を保存します。
ページを最新の情報に更新してください。必要に応じて、[ 更新 ] ボタンをクリックして長押しし、[ ハード更新] を選択します。ページの [ワークスペースを含むファイルの編集] ハイパーリンクが斜体になりました。

ワークスペースを使用してファイルを編集する ([ファイルシステム] タブ)

はじめに

制限事項

ソースファイルのディレクトリを作成する

DevTools でワークスペースを定義する

CSS を編集し、ソースファイルに変更を保存する

HTML を編集し、ソースファイルに変更を保存する

要素ツールで DOM ツリーを変更しても、変更は保存されません

ソースツールから HTML を変更すると、変更が保存されます

JavaScript を編集し、ソースファイルに変更を保存する

関連項目

その他のリソース

ワークスペースを使用してファイルを編集する ([ファイル システム] タブ)

はじめに

制限事項

関連機能: オーバーライド

ソース ファイルのディレクトリを作成する

DevTools でワークスペースを定義する

CSS を編集し、ソース ファイルに変更を保存する

HTML を編集し、ソース ファイルに変更を保存する

要素ツールで DOM ツリーを変更しても、変更は保存されません

ソース ツールから HTML を変更すると、変更が保存されます

JavaScript を編集し、ソース ファイルに変更を保存する

関連項目

その他のリソース

ワークスペースを使用してファイルを編集する ([ファイルシステム] タブ)

ソースファイルのディレクトリを作成する

CSS を編集し、ソースファイルに変更を保存する

HTML を編集し、ソースファイルに変更を保存する

ソースツールから HTML を変更すると、変更が保存されます

JavaScript を編集し、ソースファイルに変更を保存する