インスペクターからのCSS変更のエクスポート（webkit、firebugなど）

CSSを使用しているときは、ブラウザー（Chromeなど）で要素を右クリックし、[要素の検査]をクリックして、CSSを編集することがよくあります。矢印キーを使用してマージンやパディングなどを変更すると、非常に簡単に整列できます。

これらの変更を適用してCSSファイルに適用することはそれほど難しくありませんが、インスペクターでセレクターを右クリックして[エクスポート]または[コピー]を選択し、コンテンツを使用できるようにすると便利ですクリップボード。

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

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

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

この場所は正確に：

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

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

このチュートリアルのライブ編集と改訂履歴のセクションをご覧ください。

Firediffは、Firebugで行われた変更を追跡する Firebugアドオンです。HTMLペインで実行するすべての操作をログに記録します（素晴らしい）。Web開発者ツールバー拡張機能の簡単な使用（あまりよくない）も記録します。たとえば、Shift-Ctrl-Fを押してフォントサイズ情報をpxで取得します。

ChromeでFirebug拡張機能を確認しましたが、テストしていません。FirediffをFirefoxで使用しています。

これを正確に行うChrome拡張機能を作成しました。

これはStyleURLと呼ばれ、Chromeインスペクターで行ったCSSの変更をすべて受け取り、有効なCSSをdiffとして出力します。https：//chrome.google.com/webstore/detail/styleurl/emplcligcppnlalfjknjbanolhlnkmgp

このページに「padding-bottom：50px」を追加した例を次に示します。

これはオープンソースで、GitHubにもあります：https : //github.com/Jarred-Sumner/styleurl-extension

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

私は以前にこの製品をSOで提案しました（私はそれらとは何の関係もありません）。

http://www.skybound.ca/

優れた製品。まさにあなたが探しているもの、そしてそれ以上のものに聞こえます。

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

あなたが編集外部CSSをした場合は、サポートのDnDが（参照することを任意のテキストエディタにリソースパネルのうち、その最新版をドラッグすることができhttp://www.webkit.org/blog/1463/web-inspector-styles-enhanced/、を詳細については、「変更の永続化」セクションを参照してください。）CSSの変更をスタイルシートリソースの以前のバージョンに戻すこともできます（スタイルシートリビジョンの右クリックポップアップメニューで）。

cloudworksで述べたように、これに対する答えは変更されました。これは、Chrome DevToolsのAutosave拡張機能によってかなりうまく実行できるようになりました。このツールは、Chromeデベロッパーツールコンソール内で行われたCSSおよびJavaScriptの変更を追跡し、それらをローカルファイルに保存します。拡張機能のインストールとセットアップの手順については、@ addyosmaniが彼のブログでここに書いたガイドを参照してください。

拡張機能をかなり詳しく説明する便利なスクリーンキャストもあります。

ではワークスペース、あなたは（Chromeで）あなたのインスペクタでそれらを入力すると、あなたのCSSを保存することができます。問題は、すべての変更が自動的に保存されていることであり、この機能を無効にする方法はありません、で指摘したようにhttp://www.html5rocks.com/en/tutorials/developertools/revolutions2013/とChromeデベロッパーツールでCSSの変更を無効に自動保存。

現在、FirefoxとChromeの両方がこの機能をサポートしていますが、一部のプラットフォームでは、すべてのChromeがデフォルトで表示しない場合、「変更」ビューを有効にして表示する必要があることに注意してください（私のKubuntu Linux 20.04では、デフォルトで）、これを有効にする方法は次のとおりです。開発者ツールバーの[DevToolsのカスタマイズと制御]ボタン> [その他のツール]> [変更 ]に移動すると、ボタンにタブが表示されます。

Firefoxでは有効にする必要はありませんが、Chrom *の世界から来た場合は、見つけにくい場合があります。右側の[インスペクタ]タブで最後のセクションを確認してください：

Firefoxのストック開発ツールを使用している場合は、ツールダイアログで直接CSSを編集できます。CSSビューポートボタン（{}シンボルの上部にあるボタン）をクリックして、CSSを直接​​編集します。ブラウザでリアルタイムに更新されます。完了したら、CSSファイルに直接コピーして貼り付けます。いいね！

特にSafariの回答を追加することは可能です。

既存のCSSファイルのインスペクターの[スタイル]セクションでCSSを編集するときに、を押しCmd-Sて、変更を加えたファイル全体を再保存できます。ただし、Sass /プリプロセッサ/バンドルなどでCSSを生成するなどのメタ言語を使用している場合、CSSソースマップを使用することで問題が解決することはないと思います。

スタイルセクションの上部にあるCSSを編集してStyle Attributeインラインスタイル（既存のCSSファイルに関連付けられていない）を追加する場合、すべての変更を簡単にエクスポートすることはできないようです。今のところ、各要素のオーバーライドを手動でコピーして貼り付けています。

Appleの公式ドキュメントは少し古くなっていますが、ここにあります：Web Inspectorチュートリアル-コードを編集してWebページを変更する。

Chromeでは、CSSインスペクターで+ボタンをクリックして押したままにして、変更をインスペクタースタイルシートに追加することを選択できます。それはあなたのcss-selectorsで直接編集するほど便利ではありませんが、あなたが書くものはすべてinspector-stylesheet.cssにあります

私のベータ版の製品LIVEditorはこれを正確に行います。

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

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