このページは Cloud Translation API によって翻訳されました。

ワークスペースでファイルを編集、保存する

Kayce Basques

Sofia Emelianova

このチュートリアルでは、ワークスペースを設定して、独自のプロジェクトで使用できるようにします。ワークスペースを使用すると、DevTools 内で行った変更を、パソコンに保存されているソースコードに保存できます。

概要

ワークスペースを使用すると、DevTools で行った変更を、パソコン上の同じファイルのローカルコピーに保存できます。次のような例を考えてみましょう。

サイトのソースコードがパソコンに保存されている。
ソースコードディレクトリからローカルウェブサーバーを実行しているため、サイトには localhost:8080 からアクセスできます。
Google Chrome で localhost:8080 を開き、DevTools を使用してサイトの CSS を変更しています。

ワークスペースを有効にすると、DevTools 内で行った CSS の変更がデスクトップのソースコードに保存されます。

制限事項

最新のフレームワークを使用している場合は、ソースコードをメンテナンスしやすい形式から、できるだけ速く実行するように最適化された形式に変換します。通常、ワークスペースはソースマップを使用して、最適化されたコードを元のソースコードにマッピングできます。

DevTools コミュニティは、さまざまなフレームワークとツールでソースマップが提供する機能をサポートしています。選択したフレームワークでワークスペースの使用中に問題が発生した場合や、カスタム構成後に動作するようになった場合は、メーリングリストでスレッドを開始するか、Stack Overflow で質問して、DevTools コミュニティの他のユーザーと知識を共有してください。

ステップ 1: セットアップ

このチュートリアルを完了すると、ワークスペースを実際に操作できます。

デモを設定する

このデモ用リポジトリをパソコンのディレクトリにクローンを作成します。たとえば、~/Desktop とします。
~/Desktop/devtools-workspace-demo でローカルウェブサーバーを起動します。以下に、SimpleHTTPServer の起動サンプルコードを示します。任意のサーバーを使用できます。
```
cd ~/Desktop/devtools-workspace-demo
# If your Python version is 3.X
# On Windows, try "python -m http.server" or "py -3 -m http.server"
python3 -m http.server
# If your Python version is 2.X
python -m SimpleHTTPServer
```
このチュートリアルの残りの部分では、このディレクトリを /devtools-workspace-demo とします。
Google Chrome でタブを開き、ローカルでホストされているバージョンのサイトに移動します。localhost:8000 などの URL からアクセスできます。正確なポート番号は異なる場合があります。

DevTools を設定する

ローカルでホストされているデモページで DevTools を開く。
[ソース] > [ワークスペース] に移動し、クローンを作成した devtools-workspace-demo フォルダにワークスペースを設定します。削除するには、次の方法があります。
- フォルダを [ソース] の [エディタ] にドラッグ＆ドロップします。
- [フォルダを選択] リンクをクリックして、フォルダを選択します。
- [フォルダを追加] をクリックしてフォルダを選択します。
上部のプロンプトで [許可] をクリックして、ディレクトリへの読み取りと書き込みの権限を DevTools に付与します。

[ワークスペース] タブの index.html、script.js、styles.css の横に緑色のドットが追加されました。これらの緑色のドットは、DevTools がページのネットワークリソースと devtools-workspace-demo のファイルとの間でマッピングを確立したことを示します。

[ワークスペース] タブに、ローカルファイルとネットワークファイルのマッピングが表示されます。

ステップ 2: CSS の変更をディスクに保存する

テキストエディタで /devtools-workspace-demo/styles.css を開きます。h1 要素の color プロパティが fuchsia に設定されていることに注目してください。

$テキストエディタで styles.css を表示している様子。$
テキストエディタを閉じます。
DevTools に戻り、[要素] タブをクリックします。
<h1> 要素の color プロパティの値を好みの色に変更します。手順は次のとおりです。
1. [DOM Tree] で <h1> 要素をクリックします。
2. [スタイル] ペインで h1 { color: fuchsia } CSS ルールを見つけ、色をお好みのものに変えます。この例では、色は緑色に設定されています。
[スタイル] ペインの styles.css:1 の横にある緑色のドットは、変更が /devtools-workspace-demo/styles.css にマッピングされていることを示します。
テキストエディタで /devtools-workspace-demo/styles.css をもう一度開きます。color プロパティがお好みの色に設定されました。
ページを再読み込みします。<h1> 要素の色は、お好きな色に設定されたままです。これは、変更を加えて DevTools が変更をディスクに保存したときに機能します。ページを再読み込みすると、ローカルサーバーはディスクから変更されたファイルのコピーを提供しました。

ステップ 3: HTML の変更をディスクに保存する

[要素] パネルで HTML を変更してみてください

[要素] タブを開きます。
h1 要素のテキストコンテンツ（Workspaces Demo）をダブルクリックして、I ❤️ Cake に置き換えます。
テキストエディタで /devtools-workspace-demo/index.html を開きます。先ほど行った変更が反映されていません。
ページを再読み込みします。ページのタイトルが元に戻ります。

省略可: 機能しない理由

[要素] パネルに表示されるノードツリーは、ページの DOM を表します。
ページを表示するために、ブラウザはネットワーク経由で HTML を取得し、HTML を解析して DOM ノードのツリーに変換します。
ページに JavaScript が含まれている場合、その JavaScript によって DOM ノードが追加、削除、変更される可能性があります。CSS は content プロパティを介して DOM を変更することもできます。
ブラウザは最終的に DOM を使用して、ブラウザユーザーに表示するコンテンツを決定します。
そのため、ユーザーに表示されるページの最終状態は、ブラウザがフェッチした HTML と大きく異なる場合があります。
DOM は HTML、JavaScript、CSS の影響を受けるため、DevTools では [Elements] パネルで行った変更を保存する場所を解決するのが困難です。

つまり、DOM ツリー !== HTML です。

[ソース] パネルから HTML を変更する

ページの HTML に変更を加えて保存する場合は、[ソース] パネルで保存します。

[ソース] > [ページ] に移動します。
[（index）] をクリックします。ページの HTML が開きます。
<h1>Workspaces Demo</h1> を <h1>I ❤️ Cake</h1> に置き換えます。
変更を保存するには、Command+S キー（Mac）または Control+S キー（Windows、Linux、ChromeOS）を押します。
ページを再読み込みします。<h1> 要素には新しいテキストが表示されています。
/devtools-workspace-demo/index.html を開きます。<h1> 要素には新しいテキストが含まれます。

ステップ 4: JavaScript の変更をディスクに保存する

[ソース] パネルでは、JavaScript の変更も行えます。ただし、サイトに変更を加える際に、要素パネルやコンソールパネルなど、他のパネルにアクセスする必要がある場合があります。ソースパネルを他のパネルと一緒に開く方法があります。

[要素] タブを開きます。
Command+Shift+P（Mac）または Ctrl+Shift+P（Windows、Linux、ChromeOS）を押します。コマンドメニューが開きます。
QS と入力し、[クイックソースを表示] を選択します。DevTools ウィンドウの下部に [クイックソース] タブが表示されます。

このタブには、[ソース] パネルで最後に編集したファイルである index.html の内容が表示されます。[クイックソース] タブには [ソース] パネルのエディタが表示されるため、他のパネルを開いたままファイルを編集できます。
Command+P（Mac）または Ctrl+P（Windows、Linux、ChromeOS）を押して、[ファイルを開く] ダイアログを開きます。
script と入力し、[devtools-workspace-demo/script.js] を選択します。
デモの Edit and save files in a workspace リンクに注目してください。定期的にスタイル設定されている。
[クイックソース] タブの script.js の末尾に次のコードを追加します。
```
document.querySelector('a').style = 'font-style:italic';
```
Command+S キー（Mac）または Control+S キー（Windows、Linux、ChromeOS）を押して変更を保存します。
ページを再読み込みします。ページ上のリンクが斜体になりました。