ChromeデベロッパーツールのスタイルパネルのCSS変更を保存する方法

CSSの変更保存する方法スタイルパネルのGoogle Chromeのデベロッパーツールを？

ツールのウェブサイトで、リソースパネルのすべての変更を確認できると記載されています

しかし、CSSファイルでローカルで作業していますが、リソースパネルに変更が表示されません

ところで、ChromeデベロッパーツールのCSS変更を保存するためのアドオンやツールはありますか？ 私はFirebugについて多くのhttps://stackoverflow.com/search?q=firebug+CSS+changes+saveがあることを知っています

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

• Developer Toolsの[ Sources]パネルに移動し、左側のパネル（ファイルがリストされている場所）で右クリックし、[ Add Folder to Workspace]を選択します。[要素]パネルで選択した要素の各CSSルールの右上にあるスタイルシートをクリックすると、[ソース]パネルのスタイルシートにすばやくアクセスできます。

• フォルダを追加したら、Chromeにフォルダへのアクセスを許可する必要があります。

• 次に、ネットワークリソースをローカルリソースにマップする必要があります。

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

PS

マップされたファイルを開いて編集を開始し、Chromeにローカルバージョンを適用する必要がある場合があります（日付201604.12）。

DevToolsのテクニカルライターであり、開発者でもあります。

Chrome 65以降、ローカルオーバーライドはこれを行うための新しい軽量な方法です。これはワークスペースとは異なる機能です。

オーバーライドを設定する

1. ソースパネルに移動します。
2. [ 上書き ]タブに移動します。
3. [ 上書きするフォルダを選択]をクリックします。
4. 変更を保存するディレクトリを選択します。
5. ビューポートの上部にある[ 許可]をクリックして、DevToolsにディレクトリへの読み取りおよび書き込みアクセスを許可します。
6. 変更を加えます。下のGIFを見ると、background:rosybrown変更がページをロードしても保持されていることがわかります。

オーバーライドの仕組み

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

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

ワークスペースは、DevToolsをIDEとして使用できるように設計されています。ソースマップを使用して、リポジトリコードをネットワークコードにマップします。本当の利点は、コードを縮小する場合、またはSCSSのように変換する必要があるコードを使用する場合、DevToolsで行った変更が（通常）元のソースコードにマッピングされることです。一方、オーバーライドを使用すると、Web上のファイルを変更して保存できます。変更をすばやく試して、ページの読み込み全体でそれらの変更を保存するだけの場合は、優れたソリューションです。

Chromeの新しいバージョンには、この問題に対処するワークスペースと呼ばれる機能があります。Webサーバー上のどのパスがシステム上のどのパスに対応するかを定義し、ctrl-sだけで編集して保存できます。

参照：http : //www.html5rocks.com/en/tutorials/developertools/revolutions2013/

古い投稿であることは知っていますが、次のように保存します。

1. [ソース]ペインに移動します。
2. [ナビゲーターの表示]をクリックします（左側にナビゲーターペインを表示します）。
3. 必要なCSSファイルをクリックします。（あなたが加えたすべての変更を伴って、それはエディタで開きます）
4. エディターを右クリックして、変更を保存します。

また、ローカルの変更を表示してリビジョンを確認することもできます。これは非常に興味深い機能です。スクリプトも使用できます。

「リソース」の間違ったセクションを探しています。

「ローカルストレージ」の下ではなく、「フレーム」の下にあります。

上のスクリーンショットは、devtoolsで行われた新しい変更に対する元のスタイルの違いを示しています。左ペインのアイテムを右クリックして、ディスクに保存し直すことができます。

Tincr Chrome拡張機能はインストールが簡単です（ノードサーバーを実行する必要はありません）。また、LiveReloadのような機能が付属しています。双方向編集について話してください！:)

Tin.crウェブサイト

Chromeウェブストアリンク

アンディのブログ記事

先週、必要なAPIを備えたChrome 18がリリースされたので、Chrome 拡張機能をChromeウェブストアに公開しました。拡張機能は、開発者ツールのCSSまたはJSの変更をローカルディスクに自動的に保存します。ぜひチェックしてみてください。

参考までに、インラインスタイルを使用している場合、またはDOMを直接変更している場合（たとえば、要素を追加する場合）、ワークスペースはこの問題を解決しません。これは、DOMがメモリ内に存在し、DOMのアクティブな状態に関連付けられた実際のファイルがないためです。

そのために、コンソールからdomの「前」と「後」のスナップショットを撮るのが好きです。 copy(document.getElementsByTagName('html')[0].outerHTML)

次に、それを差分ツールに配置して、変更を確認します。

完全な記事：https : //medium.com/@theroccob/get-code-out-of-chrome-devtools-and-into-your-editor-defaf5651b4a

変更を保存できる拡張機能に関する質問の最後の部分に答えるために、修正プログラムがあります

変更をChrome Dev ToolsからGitHubに直接保存できます。そこから、GitHubにポスト受信フックを設定して、ウェブサイトを自動的に更新できます。

CSSを貼り付けていない限りelement.style：

1. 追加したスタイルに移動します。インスペクタースタイルシートと言うリンクがあるはずです：

2. それをクリックすると、ソースパネルに追加したすべてのCSSが開きます

3. コピーして貼り付けてください。

あなたが使用している場合element.style：

HTML要素を右クリックし、[HTMLとして編集]をクリックして、インラインスタイルでHTMLをコピーして貼り付けることができます。

UPDATE 2019：他の回答は少し古くなっているので、ここに更新された回答を追加します。最新バージョンでは、クロムフォルダーをファイルシステムにマップする必要はありません。

それで、Chromeに変更を加えたときに更新したいHTML、CSS、JSファイルを含むWebフォルダーがデスクトップにあるとします。

1）ノードなどの実行中のローカルサーバーが必要です。または、このvscode拡張機能がサーバーを作成します：ライブサーバーVSCode拡張機能、インストール、サーバーの実行。

2）実行中のローカルサーバーからChromeにHTMLページをロードします。

3）devTools-> Sources-> Filesystem-> Add folder to folderを開きます

4）ローカルサーバーの実行に使用されるフォルダーを追加します。最新のクロムでは追加のマッピングは必要ありません！たーだ！

もっとその上で編集したファイルからワークスペース

[スタイル]タブで行った変更は、ファイルシステムファイルには反映されないことに注意してください。 代わりに、devtools-> source-> your_folderに移動して変更を加え、ページをリロードして効果を確認する必要があります。