ChromeデベロッパーツールのスタイルパネルのCSSの変更を保存するにはどうすればいいですか？

Question

スタイルパネル of Google ChromeデベロッパーツールのCSSの変更を保存するにはどうすればいいですか？

ツールのWebサイトでは、それが言及されています私たちはすべての変更をリソースパネルで確認できます

enter image description here

しかし、私はローカルでCSSファイルに取り組んでいますが、変更がリソースパネルに表示されません。

enter image description here

ところで、Chrome DeveloperツールのCSS変更を保存するためのアドオン、ツールはありますか？Firebugにはたくさんのものがあります https://stackoverflow.com/search?q=firebug+CSS+changes+save

Philip Ramirez · Answer

CSSの変更はChrome Dev Tools自体から保存できます。 Chromeでは、ローカルフォルダをワークスペースに追加できるようになりました。 Chromeにそのフォルダへのアクセスを許可し、そのフォルダをローカルワークスペースに追加したら、Webリソースをローカルリソースにマッピングできます。

開発者ツールの[ソース]パネルに移動し、左側のパネル（ファイルが一覧表示されている場所）の右クリックを選択して、ワークスペースへのフォルダの追加を選択します。 [要素]パネルで選択した要素の各CSSルールの右上にあるスタイルシートをクリックすると、[ソース]パネルのスタイルシートにすばやく移動できます。

enter image description here

フォルダを追加したら、Chromeにそのフォルダへのアクセス権を付与する必要があります。
次に、ネットワークリソースをローカルリソースにマッピングする必要があります。

enter image description here

ページを再読み込みした後、Chromeはマップされたファイルのローカルリソースを読み込みます。物事を簡単にするために、Chromeはあなたにローカルリソースのみを表示します（それであなたがあなたがローカルまたはネットワークリソースを編集しているかどうかに関して混乱しないでください）。変更を保存するには、ファイルを編集するときにCTRL + Sを押します。

pS.

マッピングされたファイルを開いて編集を開始し、Chromeがローカルバージョンを適用するようにする必要があるかもしれません（日付201604.12）。

Kayce Basques · Answer

DevToolsのテクニカルライターおよび開発者がここに提唱します。

Chrome 65以降、 Local Overrides がこれを実現するための新しい軽量な方法です。これはワークスペースとは異なる機能です。

上書きを設定する

Sourcesパネルに行きます。
Overridesタブに進んでください。
上書きするフォルダを選択をクリックします。
変更を保存したいディレクトリを選択してください。
ビューポートの上部で、許可をクリックして、DevToolsにディレクトリへの読み書きアクセスを許可します。
変更を加えます。以下のGIFを見ると、background:rosybrownの変更がページをロードしても持続することがわかります。

オーバーライドのしくみ

DevToolsで変更を加えると、DevToolsは変更をコンピュータ上のファイルの修正コピーに保存します。ページをリロードすると、DevToolsはネットワークリソースではなく、変更されたファイルを配信します。

オーバーライドとワークスペースの違い

ワークスペースは、DevToolsをIDEとして使用できるように設計されています。ソースマップを使用して、リポジトリコードをネットワークコードにマッピングします。真の利点は、コードを縮小している場合、またはSCSSのように変換する必要があるコードを使用している場合、DevToolsで行った変更は（通常）元のソースコードに再度マッピングされることです。一方、上書きを使用すると、Web上のファイルを変更して保存できます。変更をすぐに試して、ページをロードしても変更を保存したいだけの場合は、良い解決策です。