DevTools ワークスペースによる永続化の設定

Chrome DevTools で作成したものを永続化するよう設定します。永続化することにより、変更内容をすぐに確認したり、変更をディスクに保存できます。

Chrome DevTools により、ウェブページで要素やスタイルを変更できるようになり、変更点を即座に表示できるようになります。デフォルトでは、変更点を外部エディタに手動でコピーして貼り付けておかなければ、ブラウザを最新情報に更新すると、変更内容は失われます。

ワークスペースを使用すると、Chrome DevTools を使いながら、このような変更点をディスクに永続化できます。ローカル ウェブサーバーのリソースをディスク上のファイルにマップして、ファイルに加えられた変更を、まるでサーバーから利用しているかのように表示できます。

TL;DR

  • 変更点をローカル ファイルに手動でコピーする必要はありません。ワークスペースを使用して、DevTools で行った変更をローカル リソースに永続化します。
  • ブラウザに対してローカル ファイルをステージングします。ファイルを URL にマップします。
  • 永続化ワークスペースの設定後は、[Elements] パネルで行ったスタイルの変更が自動的に永続化されます。ただし、DOM への変更は永続化されません。代わりに、[Sources] パネルの要素の変更が永続化されます。

ワークスペースへのローカル ソースファイルの追加

[Sources] パネルでローカルフォルダのソースファイルを編集可能にするには、以下の手順を実行します。

  1. 左側のパネルを右クリックします。
  2. [Add Folder to Workspace] を選択します。
  3. マップするローカルフォルダの場所を選択します。
  4. [Allow] をクリックして、Chrome からフォルダへのアクセスを許可します。

ワークスペースへのフォルダの追加

通常、ローカルフォルダには、サイトのオリジナルのソースファイルが含まれます。これらのソースファイルは、サーバー側でサイトを設定するときに使用されます。こうしたオリジナルのファイルをワークスペースから変更しない場合は、このフォルダのコピーを作成し、コピーしたフォルダを代わりにワークスペース フォルダに指定します。

永続化した変更のステージング

既に、ローカルフォルダをワークスペースにマップしました。しかし、ブラウザは依然としてネットワーク フォルダのコンテンツを利用しています。永続化した変更をブラウザで自動的にステージングするには、以下の手順を実行して、フォルダのローカルファイルを URL にマップします。

  1. [Sources] パネルの左側のパネルでファイルを右クリックするか、Ctrl キーを押しながらクリックします。
  2. [Map to File System Resource] を選択します。
  3. 永続化ワークスペースでローカルファイルを選択します。
  4. Chrome でページを再読み込みします。

ファイルを URL にマップ

その後、Chrome によってマップされた URL が読み込まれ、ネットワーク コンテンツの代わりにワークスペース コンテンツが表示されす。Chrome と外部エディタを何度も切り替える必要なく、ローカルファイルで直接作業します。

制限事項

ワークスペースは強力ですが、注意すべき制限事項もいくつかあります。

  • [Elements] パネルではスタイルの変更のみが永続化され、DOM に対する変更は永続化されません。

  • 外部 CSS ファイルで定義されたスタイルのみ保存できます。element.style やインライン スタイルに対する変更は永続化されません(インライン スタイルを使用している場合は、[Sources] パネルで変更します)。

  • CSS リソースをローカルファイルにマップしている場合、[Elements] パネルでのスタイルの変更は、Ctrl+S または Cmd+S(Mac)を使って明示的に保存しなくても、即座に永続化されます。

  • ローカルサーバーではなくリモートサーバーからファイルをマップしている場合、ページを更新すると、Chrome によってリモートサーバーからページが再読み込みされます。変更はディスクに永続化され、ワークスペースで編集を続行する場合は再適用されます。

  • ブラウザではマップファイルへのフルパスを使用する必要があります。ステージングされたバージョンを表示するため、インデックス ファイルでも URL に .html を含める必要があります。

ローカルファイルの管理

ワークスペースで使用するマップ済みのローカル ディレクトリでは、既存のファイルの編集だけでなく、ファイルの追加や削除も可能です。

ファイルの追加

ファイルを追加するには、以下の手順を実行します。

  1. [Sources] パネルの左側のペインでフォルダを右クリックします。
  2. [New File] を選択します。
  3. 新しいファイルの名前を拡張子を含めて入力(newscripts.js など)し、Enter キーを押します。ファイルがローカルフォルダに追加されます。

ファイルの削除

ファイルを削除するには、以下の手順を実行します。

  1. [Sources] パネルの左側のペインでファイルを右クリックします。
  2. [Delete] を選択後、[Yes] をクリックして確認します。

ファイルのバックアップ

ファイルに大きな変更を加える前に、バックアップを目的としてオリジナルのファイルを複製しておくと役に立ちます。

ファイルを複製するには、以下の手順を実行します。

  1. [Sources] パネルの左側のペインでファイルを右クリックします。
  2. [Make a Copy] を選択します。
  3. ファイルの名前を拡張子を含めて入力(mystyles-org.css など)し、Enter キーを押します。

最新情報への更新

ワークスペースでファイルの作成や削除を直接行うと、[Sources] ディレクトリが自動的に最新の情報に更新され、ファイルの変更内容が表示されます。任意のタイミングで強制的に最新情報に更新するには、フォルダを右クリックし、[Refresh] を選択します。

これは、外部エディタでファイルを同時に開いて変更し、その変更内容を DevTools で表示する場合にも役立ちます。通常、DevTools ではこのような変更が自動的に把握されますが、確実に反映する場合は、前述の方法でフォルダを最新情報に更新します。

ファイルやテキストの検索

DevTools で読み込んだファイルを検索するには、Ctrl+O または Cmd+O(Mac)を押して検索ダイアログを開きます。ワークスペースでもこの操作が可能ですが、ワークスペース フォルダへの読み込み済みのリモートファイルとローカルファイルに検索対象が拡張されます。

複数のファイルに含まれる文字列を検索するには、以下の手順を実行します。

  1. 検索ウィンドウを開きます。[Show Drawer] ボタン ドロワーの表示 をクリックして [Search] をクリックするか、Ctrl+Shift+F または Cmd+Opt+F(Mac)を押します。
  2. 検索フィールドに文字列を入力し、Enter キーを押します。
  3. 正規表現で検索する場合や、大文字と小文字を区別する場合は、該当するチェックボックスをオンにします。

複数のファイルで文字列を検索する

検索結果は、ファイル名と、各ファイルで該当した件数として [Console] ドロワーに表示されます。展開ボタン 展開折りたたみボタン 折りたたみ を使用して、特定のファイルの結果を展開、または折りたたむことができます。