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

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

このチュートリアルでは、実際のプロジェクトで使用できるようにワークスペースをセットアップして練習します。ワークスペースを使用すると、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. [ソース] > [ワークスペース] に移動し、クローンを作成した devtools-workspace-demo フォルダにワークスペースを設定します。これにはいくつかの方法があります。

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

  3. 上部のプロンプトで [許可] をクリックし、ディレクトリに対する読み取りと書き込みの権限を 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 に戻り、[要素] タブをクリックします。

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

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

    h1 要素の color プロパティを緑に設定します。

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

  5. テキスト エディタで /devtools-workspace-demo/styles.css を再度開きます。これで、color プロパティが任意の色に設定されました。

  6. 再読み込みを行います。 ページを再読み込みします。<h1> 要素の色は、引き続き好きな色に設定されています。これが機能するのは、変更を行った時点で DevTools がその変更をディスクに保存したためです。ページを再読み込みすると、ローカル サーバーは変更されたファイルのコピーをディスクから提供しました。

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

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

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

  2. h1 要素のテキスト コンテンツ（Workspaces Demo）をダブルクリックし、I ❤️ Cake に置き換えます。

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

  3. テキスト エディタで /devtools-workspace-demo/index.html を開きます。先ほど行った変更が適用されていません。

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

省略可: 動作しない理由

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

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

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

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

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

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

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

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

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

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

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

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

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

    このタブには index.html の内容が表示されます。これは、[Sources] パネルで最後に編集したファイルです。[クイックソース] タブでは、[ソース] パネルにあるエディタを使用できます。このエディタを使用すると、他のパネルを開いた状態でファイルを編集できます。

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

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

    [Open File] ダイアログからスクリプトを開きます。

  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. 再読み込みを行います。 ページを再読み込みします。これで、ページのリンクが斜体になりました。

これで、ページのリンクが斜体になりました。

次のステップ

ワークスペースには複数のフォルダを設定できます。そのようなフォルダはすべて、 [設定] > [ワークスペース] に表示されます。

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