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

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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

概要

Workspace では、DevTools で行った変更を、 ダウンロードします。次のような例を考えてみましょう。

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

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

制限事項

最新のフレームワークを使用する場合は、ソースコードが 簡単に実行できるように最適化された形式に維持できますワークスペース: 通常、最適化されたコードを元のソースコードにマッピングするには、ソース マップ。

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

関連機能: ローカル オーバーライド

ローカル オーバーライドは、ワークスペースに似た DevTools のもう 1 つの機能です。 ローカル オーバーライドを使用して、バックエンドの変更やリクエスト ヘッダーの待ち時間を ページの変更をテストし、それらの変更をページ全体に表示する必要がある場合 が読み込まれますが、変更をページのソースコードにマッピングする必要はありません。

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

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

デモをセットアップする

  1. パソコンのディレクトリにこのデモリポジトリのクローンを作成します。たとえば、~/Desktop とします。

  2. ~/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 と呼びます。

  3. Google Chrome でタブを開き、サイトのローカルでホストされているバージョンにアクセスします。次のことを行える必要があります。 localhost:8000 のような URL でアクセスします。正確なポート番号は異なる場合があります。

    ローカルにホストされたデモページが Chrome で開かれた。

DevTools の設定

  1. ローカルでホストされているデモページで DevTools を開きます。

  2. [ソース] >Workspace に移動し、クローンを作成した devtools-workspace-demo フォルダ内にワークスペースを設定します。これにはいくつかの方法があります。

    • フォルダを [ソース] の [エディタ] にドラッグ&ドロップします。
    • [フォルダを選択] リンクをクリックし、フォルダを選択します。
    • [追加する フォルダを追加] をクリックしてフォルダを選択します。[ソース]、[Workspace] タブの順にクリック。

  3. 上部のプロンプトで [Allow] をクリックし、ディレクトリに対する読み取りと書き込みの権限を DevTools に付与します。

    プロンプトの [許可] ボタン。

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

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

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

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

    テキスト エディタで style.css を表示する

  2. テキスト エディタを閉じます。

  3. DevTools に戻り、[Elements] タブをクリックします。

  4. <h1> 要素の color プロパティの値を好みの色に変更します。手順は次のとおりです。

    1. [DOM Tree] の <h1> 要素をクリックします。
    2. [スタイル] ペインで、h1 { color: fuchsia } CSS ルールを見つけ、お好みの色に変更します。この例では、色は緑に設定されています。

    h1 要素の color プロパティを green に設定する。

    [Styles] ペインの styles.css:1 の横にある緑色のドット 緑色のドット。 は、すべての変更が /devtools-workspace-demo/styles.css にマッピングされていることを意味します。

  5. テキスト エディタで /devtools-workspace-demo/styles.css をもう一度開きます。color プロパティが 選択します。

  6. 再読み込みを行います。 ページを再読み込みします。<h1> 要素の色は、引き続き任意の色に設定されています。うまくいく これは、変更後に DevTools によって変更がディスクに保存されるためです。再読み込みすると ディスクから変更されたファイルのコピーがローカル サーバーから配信されています。

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

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

  1. [Elements] タブを開きます。

  2. h1 要素のテキスト コンテンツ「Workspaces Demo」をダブルクリックして置き換えます。 I ❤️ Cake と一緒に使用できます。

    [要素] パネルの DOM ツリーから HTML を変更しようとしています。

  3. テキスト エディタで /devtools-workspace-demo/index.html を開きます。変更内容は反映されていません。

  4. 再読み込みを行います。 ページを再読み込みします。ページは元のタイトルに戻ります。

省略可: 動作しない理由

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

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

[Sources] パネルで HTML を変更する

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

  1. [ソース] >ページ。
  2. [（index）] をクリックします。ページの HTML が開きます。
  3. <h1>Workspaces Demo</h1> を <h1>I ❤️ Cake</h1> に置き換えます。
  4. Command+S キー（Mac）または Ctrl+S キー（Windows、Linux、ChromeOS）を押して、変更を保存します。

  5. 再読み込みを行います。 ページを再読み込みします。<h1> 要素にはまだ新しいテキストが表示されています。

    [Sources] パネルから HTML を変更する。

  6. /devtools-workspace-demo/index.html を開きます。<h1> 要素に新しいテキストが含まれます。

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

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

  1. [Elements] タブを開きます。
  2. Command+Shift+P キー（Mac）または Ctrl+Shift+P キー（Windows、Linux、ChromeOS）を押します。コマンド メニュー 開きます。

  3. 「QS」と入力し、[Show Quick Source] を選択します。DevTools ウィンドウの下部に [クイックソース] タブ

    コマンド メニューから [クイック ソース] タブを開きます。

    このタブには index.html の内容が表示されています。 [ソース] パネルで編集したファイル。[Quick Source] タブには、 [Sources] パネル。他のパネルを開いたままファイルを編集できます。

  4. Command+P キー（Mac）または Ctrl+P キー（Windows、Linux、ChromeOS）を押して、[ファイルを開く] ダイアログを開きます。

  5. 「script」と入力して [devtools-workspace-demo/script.js] を選択します。

    [ファイルを開く] ダイアログからスクリプトを開きます。

  6. デモの Edit and save files in a workspace リンクに注目してください。定期的にスタイルが設定されています。

  7. [クイックソース] タブの script.js の下部に、次のコードを追加します。

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

  8. Command+S キー（Mac）または Ctrl+S キー（Windows、Linux、ChromeOS）を押して、変更を保存します。

  9. 再読み込みを行います。 ページを再読み込みします。ページ上のリンクが斜体になりました。

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

次のステップ

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

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