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

By Dave Gash

Dave is a Tech Writer

By Kayce Basques

Technical Writer, Chrome DevTools & Lighthouse

By Meggin Kearney

Meggin is a Tech Writer

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

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

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

TL;DR

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

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

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

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

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

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

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

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

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

ファイルを URL にマップ

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

制限事項

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

[Elements] パネルではスタイルの変更のみが永続化され、DOM に対する変更は永続化されません。
外部 CSS ファイルで定義されたスタイルのみ保存できます。element.style やインラインスタイルに対する変更は永続化されません（インラインスタイルを使用している場合は、[Sources] パネルで変更します）。
CSS リソースをローカルファイルにマップしている場合、[Elements] パネルでのスタイルの変更は、Ctrl+S または Cmd+S（Mac）を使って明示的に保存しなくても、即座に永続化されます。
ローカルサーバーではなくリモートサーバーからファイルをマップしている場合、ページを更新すると、Chrome によってリモートサーバーからページが再読み込みされます。変更はディスクに永続化され、ワークスペースで編集を続行する場合は再適用されます。
ブラウザではマップファイルへのフルパスを使用する必要があります。ステージングされたバージョンを表示するため、インデックスファイルでも URL に .html を含める必要があります。

ローカルファイルの管理

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

ファイルの追加

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

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

ファイルの削除

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

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

ファイルのバックアップ

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

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

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

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

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

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

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