ソースファイルへの変更を保存するようにワークスペースを設定する

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

ワークスペースを設定して、DevTools で行った変更をパソコンのソースファイルに保存します。構成ファイルを提供することで、ワークスペース フォルダを DevTools に自動的に接続できます。また、[Sources] パネルでワークスペースの場所を手動で追加することもできます。

概要

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

  • サイトのソースコードがパソコンに保存されている。
  • ソースコード ディレクトリからローカル ウェブサーバーを実行しているため、localhost:PORT でサイトにアクセスできます。また、メタデータを含むシンプルな JSON ファイルも提供されます（後述）。
  • Google Chrome で localhost:PORT を開き、DevTools を使用してサイトの CSS を変更しています。

ワークスペース フォルダを接続すると、[Sources] パネルで CSS、HTML、JavaScript ファイルに加えた変更が、パソコンのソースコードに保存されます。ただし、[Elements] パネルで行った DOM の変更は保存されません。

さらに、DevTools は通常、ソースマップを使用して、最適化されたコードを元のソースコードにマッピングできます。

接続のメタデータを生成する

DevTools がワークスペース フォルダを自動的に検出できるようにするには、ランダムなバージョン 4 UUID を生成し、次の JSON ファイルに配置します。

{
  "workspace": {
    "uuid": "UUID",
    "root": "path/to/project/root/folder"
  }
}

次に、JSON ファイルを path/to/project/root/folder/.well-known/appspecific/com.chrome.devtools.json に配置します。

最後に、ローカル HTTP サーバーを実行し、JSON ファイルも提供されるようにします。

この手順をスキップして、手動でフォルダ接続を設定することもできます。

ワークスペース フォルダを接続する

フォルダを同期するには:

  1. Chrome で、ローカルでホストされているページ（この例では localhost:8000）に移動し、DevTools を開きます。

  2. [ソース] > [ワークスペース] で、フォルダの横にある [接続] をクリックします。

    [Workspace] タブのフォルダの横にある [Connect] ボタン。

  3. プロンプトが表示されたら、[Edit files] をクリックして、DevTools にフォルダへのアクセスを許可します。

    DevTools にフォルダへのアクセスを許可するよう求めるプロンプト。

  4. 接続すると、[ワークスペース] タブでフォルダを開くことができます。

    接続され、開いているワークスペース フォルダ。

[Workspace] タブでは、HTML、CSS、JavaScript ファイルの横に緑色の点が表示されます。これらの緑色の点は、DevTools がページのネットワーク リソースとフォルダ内のファイルとの間のマッピングを確立したことを意味します。

変更をソースフォルダに保存する

接続されたワークスペース フォルダ内の CSS、HTML、JavaScript ファイルへの変更を保存できます。

CSS への変更を保存する

CSS への変更を保存するには:

  1. [Sources] > [Workspaces] で、接続されたワークスペース フォルダから CSS ファイルを開きます。

  2. CSS に変更を加えます。

  3. Ctrl / Cmd + S キーを押すなどして変更を保存し、適用された変更がソースファイルに反映されていることを確認します。[Sources] パネルのファイル名の横に緑色の点が表示されます。

ワークフローについては、次の動画をご覧ください。

変更を HTML に保存

HTML への変更を保存するには:

  1. [Sources] > [Workspaces] で、接続されたワークスペース フォルダから HTML ファイルを開きます。

  2. HTML に変更を加えます。

  3. Ctrl / Cmd + S キーを押すなどして変更を保存し、適用された変更がソースファイルに反映されていることを確認します。[Sources] パネルのファイル名の横に緑色の点が表示されます。

  4. ページを再読み込みして、変更が反映されていることを確認します。

ワークフローについては、次の動画をご覧ください。

[Elements] パネルから HTML を変更できないのはなぜですか？

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

簡単に言うと、DOM ツリー !== HTML です。

JavaScript の変更を保存する

JavaScript への変更を保存するには:

  1. [Sources] > [Workspaces] で、接続されたワークスペース フォルダから JavaScript ファイルを開きます。

  2. JavaScript に変更を加えます。

  3. Ctrl / Cmd + S キーを押すなどして変更を保存し、適用された変更がソースファイルに反映されていることを確認します。[Sources] パネルのファイル名の横に緑色の点が表示されます。

  4. ローカル HTTP サーバーがライブソース ファイルの変更をリッスンし、ページを自動的に再読み込みする場合は、DevTools で変更を保存すると、変更が適用されます。それ以外の場合は、ローカル サーバーを再デプロイします。

ワークフローについては、次の動画をご覧ください。

ワークスペース フォルダの接続を削除する

ワークスペース フォルダの接続を削除するには、[Sources] > [Workspace] でフォルダを右クリックし、プルダウン メニューから [Remove from workspace] を選択して、[Remove] をクリックします。

プルダウン メニューの [ワークスペースから削除] オプション。

ワークスペース フォルダを手動で接続する

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

  2. [Sources] > [Workspace] で、[Add folder manually] をクリックします。次に、ソースファイルを含むフォルダを選択します。

    [Workspace] タブの [Add folder manually] ボタン。

  3. ワークスペース フォルダを接続するの手順 3 と 4 を行います。

制限事項

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

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

次のステップ

すでに設定されているフォルダはすべて、 [設定] > [ワークスペース] で管理できます。

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

関連情報

ローカル オーバーライドは、ウェブ コンテンツやリクエスト ヘッダーをモックできる、DevTools の類似機能です。これにより、バックエンドの更新を待つことなく、ページの変更を自由にテストできます。ローカル オーバーライドを使用すると、変更はページ読み込みをまたいで保持されますが、ページのソースコードにはマッピングされません。