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

ソース ツールの [ファイル システム] タブを使用してワークスペースを定義し、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 を設定します。

1. 別のウィンドウまたはタブで、[ ワークスペース] デモ ソース コードに移動します。

2. ~/Desktop/appやC:\Users\myusername\app\など、app ディレクトリを作成します。 index.html、../shared/img/logo.png、README.md、script.js、styles.cssをデモ ソース コードから app ディレクトリにコピーします。 チュートリアルの残りの部分では、このディレクトリは ~/Desktop/app または C:\Users\myusername\app\ と呼ばれますが、別のパスを使用することもできます。

3. まだインストールしていない場合は、Node.js と npm をインストールします。 詳細については、「Visual Studio Code 用 DevTools 拡張機能のインストール」の「Node.js とノード パッケージ マネージャー (npm) をインストールする」を参照してください。

4. Git bash シェルや Microsoft Visual Studio Code の [ターミナル] ウィンドウなどのコマンド プロンプトに移動します。

5. ~/Desktop/appやC:/Users/myusername/appなど、作成したapp ディレクトリに移動します。 git bash シェルを使用する場合は UNIX シェルであるため、Windows の場合でも、円記号を引用符で囲んだディレクトリ パスをラップするか、円記号ではなくスラッシュを使用する必要があります。

6. 次のいずれかのコマンドを実行して、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
   

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

   

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

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

1. Ctrl + Shift + J (Windows、Linux) または Command + Option + J (macOS) を押して、DevTools コンソールを開きます。

   

2. [ソース] () タブをクリックします。

3. 左側の [ ナビゲーター ] ウィンドウで、[ ファイル システム ] タブ ([ ページ ] タブでグループ化) をクリックします。

   

4. [ フォルダーをワークスペースに追加] をクリックします。 エクスプローラーまたは Finder が開きます。

5. 作成した /app/ ディレクトリに移動します。 たとえば、[ フォルダー: ] テキスト ボックスに、 ~/Desktop/app や C:\Users\myusername\app\などのパスを入力します。 次に、[ フォルダーの選択 ] ボタンをクリックします。

   DevTools は、 app ディレクトリへのフル アクセス権を DevTools に付与するかどうかを確認するメッセージを表示します。

6. [ 許可 ] ボタンをクリックして、DevTools にディレクトリの読み取りと書き込みのアクセス許可を付与します。

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

   

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

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

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

   

2. 要素 () ツールを選択し、DOM ツリーで<body>要素を展開し、<h1>要素を選択します。

   [ スタイル ] ウィンドウには、 <h1> 要素に適用される CSS ルールが表示されます。 styles.css:1の横にあるマップされたファイル (は、緑色のドットが付いたページです。 緑色のドットは、この CSS 規則に加えた変更が、app ディレクトリ内のstyles.cssにマップされることを意味します。

   

3. <h1> 要素の color プロパティの値をオレンジ色に変更します。 これを行うには、DOM ツリーで <h1> 要素を選択します。 h1の CSS ルールで、[fuchsia] をクリックし、オレンジ色の入力を開始し、色の一覧からオレンジ色を選択します。

   

4. Visual Studio Code などのテキスト エディターで、app ディレクトリにあるstyles.cssのコピーを開きます。 color プロパティは、この例ではオレンジ色の新しい色に設定されました。 変更は、Web サーバーから返されたファイルのコピーで行われただけではありません。変更は、 app ワークスペース ディレクトリ内のマップされたファイルでも行われました。

5. ページを最新の情報に更新してください。

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

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

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

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

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

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

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

1. 上記の手順に進み、[ 要素 ] ツールを選択します。

2. DOM ツリーの <h1> 要素で、 DevTools Workspaces Demoテキスト文字列を選択して削除し、テキスト文字列を I Love Cake入力して Enter キーを押します。 レンダリングされた Web ページには、新しい見出しテキストが表示されます。

   

3. Visual Studio Code などのテキスト エディターで、app ディレクトリにあるindex.html ファイルを開きます。 先ほど行った変更は表示されません。見出しは引き続き "DevTools Workspaces Demo" と読み上げられます。

4. ブラウザーで、デモ ページを更新します。 編集した DOM ツリーが破棄され、 ワークスペース ディレクトリ内の変更されていない ファイルから DOM が再作成されたため、ページは元の見出し "DevTools Workspaces Demo" に戻ります。

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

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

1. 上から進み、[ソース] (タブをクリックします。

2. 左側の [ ナビゲーター ] ウィンドウで、[ index.html] を選択します。 ページの HTML が開きます。

3. <h1>DevTools Workspaces Demo</h1>をファイル一覧の<h1>I Love Cake</h1>に置き換えます (要素ツールの DOM ツリーではなく)。

4. Ctrl + S (Windows、Linux) または Command + S (macOS) を押して変更を保存します。

5. ページを最新の情報に更新してください。 レンダリングされたページの見出しが "I Love Cake" に変わります。これは、その文字列がマップされたapp ディレクトリのindex.htmlに保存されていたためです。

   

6. Visual Studio Code などのテキスト エディターで、app ディレクトリにあるindex.htmlのコピーを開きます。

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

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

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

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

1. 上記の手順に進み、[要素] ( [要素 ] )ツールを選択します。

2. Ctrl + Shift + P (Windows、Linux) または Command + Shift + P (macOS) を押して、コマンド メニューを開きます。

3. [実行] プロンプトで、クイック入力を開始し、[クイック ソースの表示] を選択します。

   

   DevTools ウィンドウの下部に 、[クイック ソース ] ツールが開き、 index.htmlの内容が表示されます。これは、[ ソース ] ツールで最後に編集したファイルであるためです。 必要に応じて、[ クイック ビューの展開] をクリックし、[ 要素 ] ツールが選択されていることを確認します。

4. Ctrl + P (Windows、Linux) または Command + P (macOS) を押して、コマンド メニューの [ファイルを開く] プロンプトを表示します。

   

5. スクリプトの入力を開始し、アプリ/ディレクトリにある script.js を選択します。

   ファイルの一覧が クイック ソース ツールに表示されます。 レンダリングされたデモ Web ページでは、[ ワークスペースを含むファイルの編集] ハイパーリンクのスタイルは斜体ではありません。

6. クイック ソース ツールを使用して、次のコードを script.jsの下部に追加します。

   document.querySelector('a').style = 'font-style:italic';
   

7. Ctrl + S (Windows、Linux) または Command + S (macOS) を押して変更を保存します。

8. ページを最新の情報に更新してください。 必要に応じて、[ 更新 ] ボタンをクリックして長押しし、[ ハード 更新] を選択します。 ページの [ワークスペースを含むファイルの編集] ハイパーリンクが斜体になりました。

   

関連項目

• ソース ツールでデモ フォルダーを開き、DevTools のサンプル コードでファイルを編集します。

この作品は 、クリエイティブ・コモンズ属性4.0国際ライセンスに基づきライセンスされています。