css - 開発中に chrome devtools で作成されたすべての診断スタイルを削除します

Question

開発ワークフローで gulp/live reload を使用しています。CSS を使用して要素のスタイルを設定するとき、Chrome Dev Tools を直接使用して、その要素のスタイル ルールを調整することがあります (編集:要素パネルの下のevent.style {}を使用)。そして、それらを希望どおりに作成したら、それらを Sublime Text にコピーしてプロジェクトに保存します。

問題は、私が行ったこれらの一時的な変更は、保存した後も CSS ファイルに加えられた変更をブロックし続けるため、本質的に Live Reload をオーバーライドすることです。つまり、(実際の) 変更を確認するには、標準的な方法でページをリロードする必要があります。 css ファイル自体で作成されるため、ライブ リロードの効果が妨げられます。

1 つだけ変更した場合は、特定の要素のスタイル ルールをオフにすることができます。これは問題なく機能しますが、スタイルに複数の要素が含まれるメニューなどのより複雑な要素の場合、それを無効にするのは困難です。それらをオフにするためにdevtools内で変更されたものを覚えておいてください。

これらのローカル スタイル ルールをグローバルに無効化または削除する方法はありますか?

Answer 1

これを行うローファイな方法は、ctrl-z を数秒間押し続けることであり、私が見ることができるさまざまなパネル全体ですべてを元に戻すようです。

Answer 2

最善の解決策ではありませんが、私にとってはうまくいったようです:

• デバッガを開いたとき
• デバッガー設定を開く開発ツールのカスタマイズと制御(3 つのドット メニュー)
• 設定に入る
• 「デフォルトに戻してリロード」を使用して設定をリセットする

編集: 私のように、Chrome のデバッガーをファイルシステムにリンクした場合は、Chrome がファイルシステムの CSS リソースに書き込む権利を持っているため、テストルールがファイルシステムの CSS ファイルに保存されていないことを確認してください。

Answer 3

これが開発ツールの目的であるため、スタイルの変更を無効にできるとは思いません。

これらの Chrome 開発ツール リソースのいずれも、これが可能であるとは述べていません。

• https://developer.chrome.com/devtools/docs/authoring-development-workflow#styles
• https://developer.chrome.com/devtools/docs/dom-and-styles#styles
• https://developer.chrome.com/devtools/docs/elements-styles

開発ツールが追加/変更された要素スタイルを追跡したとしても、その間のスクリプトによって変更された可能性があります。リセット/削除すると、おそらくアプリケーションが台無しになります。

---

ただし、ロードしたスタイルに直接加えた変更を削除できます。

コメントに関しては、すべてのインライン/要素スタイルを削除したいのですが、これは不可能と思われるため、ロードされたスタイルシートのみを変更することを検討する必要があります。その後、変更を元に戻すことができます。

.css ファイルのソース ビューに移動し、そこで Ctrl-Z を押します。

(変更のあるファイルにはアスタリスクが付いています)

または、変更を表示して、ボタンをクリックして元に戻すこともできます: .css ファイルを右クリックし、次に [ローカルの変更... ] をクリックします。ヒストリが開いています。元に戻すをクリック

Answer 4

これが私が見つけた解決策です（Chrome v93.0.4577.82）...

• Chrome 開発ツールを開く (F12)
• [ソース] タブをクリックします。
• ローカルで変更したファイルは紫色の点で表示されます。
• これらの変更されたファイルのいずれかを右クリックして、Copy Link Address
• これにより、元のソースではなく、ローカル ファイル システムへのリンクが提供されます。
• 選択したツール (Windows Explorer など) で、このファイルの親ディレクトリに移動します。
• オーバーライドを削除するファイルを削除します。

注: 私にとって、親フォルダーはc:\temp\overrides\{sites_fqdn}\. このフォルダが構成されている場所を見つけることができませんでした (つまり、私が見る限り、chrome://flagsまたはの下にはありません)。chrome://settings