このページは 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 に戻り、[Elements] タブをクリックします。
<h1> 要素の color プロパティの値を好みの色に変更します。手順は次のとおりです。
1. [DOM Tree] の <h1> 要素をクリックします。
2. [スタイル] ペインで h1 { color: fuchsia } CSS ルールを見つけ、色をお好みのものに変えます。この例では、色は緑に設定されています。
[Styles] ペインの 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 の影響を受けるため、[Elements] パネルで行った変更の保存場所について、DevTools で解決が難しくなります。

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

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

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

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

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

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

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

このタブには、[ソース] パネルで最後に編集したファイルである index.html の内容が表示されます。[Quick Source] タブには [Sources] パネルからアクセスできるエディタがあるため、他のパネルを開いたままファイルを編集できます。
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）または Ctrl+S キー（Windows、Linux、ChromeOS）を押して、変更を保存します。
ページを再読み込みします。ページ上のリンクが斜体になりました。