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

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

Kayce Basques

Sofia Emelianova

このチュートリアルでは、ワークスペースを設定して演習を行い、自分のプロジェクトで使用できます。Workspace では、Google Chat で加えた変更を DevTools を使用して、コンピュータに保存されているソースコードに読み込みます。

概要

Workspace では、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 を開きます。
[ソース] >Workspace に移動し、クローンを作成した devtools-workspace-demo フォルダ内にワークスペースを設定します。これにはいくつかの方法があります。
- フォルダを [ソース] の [エディタ] にドラッグ&ドロップします。
- [フォルダを選択] リンクをクリックし、フォルダを選択します。
- [ フォルダを追加] をクリックしてフォルダを選択します。
上部のプロンプトで [Allow] をクリックし、ディレクトリに対する読み取りと書き込みの権限を DevTools に付与します。

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

[ワークスペース] タブに、ローカルファイルとネットワークファイル間のマッピングが表示されるようになりました。

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

テキストエディタで /devtools-workspace-demo/styles.css を開きます。h1 の color プロパティがどのように機能するか、要素は fuchsia に設定されます。

$テキストエディタで style.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 を変更してみてください

[Elements] タブを開きます。
h1 要素のテキストコンテンツ「Workspaces Demo」をダブルクリックして置き換えます。 I ❤️ Cake と一緒に使用できます。
テキストエディタで /devtools-workspace-demo/index.html を開きます。変更内容は反映されていません。
ページを再読み込みします。ページは元のタイトルに戻ります。

省略可: 動作しない理由

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

簡単に言うと、DOM Tree !== HTML です。

[Sources] パネルで 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 の変更をディスクに保存する

[Sources] パネルでは、JavaScript に変更を加えることもできます。場合によっては変更中に、[Elements] パネルや [Elements] パネルなどの他のパネルにアクセスする追加できます[Sources] パネルを他のパネルと並べて開く方法もあります。

[Elements] タブを開きます。
Command+Shift+P キー（Mac）または Ctrl+Shift+P キー（Windows、Linux、ChromeOS）を押します。コマンドメニュー 開きます。
「QS」と入力し、[Show Quick Source] を選択します。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）を押して、変更を保存します。
ページを再読み込みします。ページ上のリンクが斜体になりました。

ページ上のリンクが斜体になりました。

次のステップ

ワークスペースには複数のフォルダを設定できます。このようなフォルダはすべて、 [Settings] >Workspace。

次に、DevTools を使用して CSS を変更し、JavaScript をデバッグする方法を学びます。