html - ブラウザ内から Web サイトの CSS を永続的に変更する方法は?

Question

Firefoxに組み込まれている開発者ツール(右クリックしてからInspect ElementCSSを選択してアクセス)を使用して巨大なプロジェクトの一部を編集しようとしている場合、それらの変更を永続的にする方法はありますか?

実際には多数のスタイルシートがあり、その中でこの 1 つのプロパティを見つけることができませんでしたか? このプロパティを含むファイルが見つからなかったため、ブラウザ内から CSS に永続的な変更を加えたいと考えています。方法はありますか？

編集：- ここに画像の説明を入力

score 5 · Accepted Answer

Chrome でセットアップするには、最初にプロジェクトファイルを「ワークスペース」に追加する必要があります。開発ツール Ctrl+Shift+I に移動し、設定ギアをクリックすると、左側にワークスペースが表示されます。

プロジェクトフォルダーをワークスペースに追加したら、オプションを閉じて [ソース] タブをクリックします (まだ開発ツールにあります)。

通常どおり、LocalHost から index.html をロードします。ソースパネルに、現在読み込まれているページとそのリソースが表示されます。.css ファイルを右クリックし、[Map To File System Resource] をクリックすると、実際のプロジェクトフォルダー (Chrome のワークスペースの一部) から対応する .css ファイルを検索できる検索ボックスが表示されます。リンクを作成すると、Chrome はプロジェクトフォルダーにある他の CSS および HTML ファイルをリンクするのに十分なほどスマートになります。

これで、Chrome Dev Tools の [要素] タブで変更を加えることができ、それらの変更は保持されます。また、[ELements] タブには、どの css ファイルと、特定のスタイルがどの行から作成されているかが表示されます。

これの最も良い点は、Sass または Less を使用すると、Scss ファイルが Chrome で処理されている CSS スタイルにマップされることです。(Sass と Less を使用する場合は、CSS ソースマップをオンにする必要があることに注意してください)

score 2 · Accepted Answer

これを手動で行いたくない場合は、ルールベースのスタイル調整を定義できるスタイリッシュという FF 用のプラグインがあります。

編集

これについて言及したのは、どの Firefox クライアントでも取得して特定のインストールにインストールできる一連のスタイル変更を公開できるからです。リモートスタイル情報の内容を「永久に」変更することはできないため、唯一の解決策は、変更が必要な各ユーザーエージェントで半永久的に操作することです。

score 2 · Accepted Answer

この件については、Web Developer Toolbar を使用できます。CSS メニューに移動し、[CSS の編集] に移動して、変更を編集および保存できます。Il には、関連するファイルを特定して手動で変更するためのツールも用意されています。また、同様のことができる Firebug 拡張機能を試すこともできます。ここの両方へのリンク：

https://addons.mozilla.org/firefox/addon/web-developer/

https://addons.mozilla.org/firefox/addon/firebug/

Firebug をインストールしている場合は、cssUpdater をインストールして、変更を保存するプロセスを簡素化できます。

https://addons.mozilla.org/firefox/addon/cssupdater/