107

私が CSS を扱っているときは、ブラウザー (たとえば Chrome) でテストすることがよくあります。要素を右クリックし、[要素の検査] をクリックして、その場で CSS を編集します。矢印キーを使用してマージンやパディングなどを変更すると、並べ替えが非常に簡単になります。

それらの変更を取得して CSS ファイルに適用するのはそれほど難しくありませんが、インスペクターでセレクターを右クリックして「エクスポート」または「コピー」を選択し、コンテンツを自分のクリップボード。

このようなものは存在しますか？

4

14 に答える 14

79

少なくともChrome v14の時点で、これに対する答えを見つけました。

Elements セクションで、CSS ルールの横にある「filename:linenumber」リンクをクリックするだけです。表示される CSS ファイルには、すべての変更が含まれます。

この場所は正確に:

https://cdn.tutsplus.com/net/uploads/2013/06/dev-tools-regular-view.jpg

于 2011-10-10T17:54:50.373 に答える
50

Chrome では、[ソース] タブで CSS ファイルを右クリックし、[ローカル変更] をクリックします。

これにより、ローカルの変更がすべて表示されます。各リビジョンにはタイムスタンプが付けられ、以前のリビジョンにロールバックできます。

このチュートリアルの「ライブ編集と改訂履歴」セクションを参照してください。

于 2012-11-01T19:37:56.033 に答える
11

Firediffは、Firebugで行われた変更を追跡する Firebug アドオンです。HTML ペインで行うすべての操作 (すばらしい) だけでなく、Web 開発者ツールバー拡張機能の簡単な使用 (それほどすばらしいものではありません) も記録します。

Chrome で Firebug 拡張機能を見たことがありますが、テストしていません。Firefox で Firediff を使用しています。

于 2010-07-28T16:53:58.473 に答える
8

Chromeでは、CSS のすべての変更を表示するコンソール ドロワーに [変更] タブもあります。エクスポートではありませんが、少なくとも何が変わったのかを素早く把握するのに非常に便利です。

Chrome 開発ツールの [変更] タブのスクリーンショット

于 2019-11-19T08:42:43.893 に答える
5

以前に SO でこの製品を提案したことがあります (私は SO とは一切関係ありません)。

http://www.skybound.ca/

優れた製品。まさにあなたが探しているもののように聞こえます。

編集:ここでの他のいくつかの回答では、ローカル ファイルにリンクする Google Chrome の機能について言及されています (これは非常に優れています)。他の回答もチェック！

于 2010-08-05T02:26:55.517 に答える
2

ワークスペースを使用すると、(Chrome の) インスペクターに入力した CSS を保存できます。問題は、すべての変更が自動的に保存され、この機能を無効にする方法がないことです。 .

于 2015-05-03T11:56:41.087 に答える
-1

まもなくベータ版になる私の製品LIVEditorはまさにこれを行います。

簡単に理解できるように、Firebug のインスペクターがテキスト エディターに組み込まれていると考えることができます。

そうすれば、Firebug または Webkit の開発者ツールを使用して微調整した後、コード エディターで手動で再度変更を加える必要がなくなります。

于 2012-07-11T09:42:16.517 に答える