CSSを使用しているときは、ブラウザでテストすることがよくあります。たとえば、Chrome-要素を右クリックし、[要素を検査]をクリックして、そこでCSSを編集します。矢印の使用マージンやパディングなどを変更するキーを使用すると、物事を簡単に並べることができます。
これらの変更を適用してCSSファイルに適用するのはそれほど難しくありませんが、インスペクターでセレクターを右クリックして[エクスポート]または[コピー]を選択し、そのコンテンツをクリップボード。
このようなものはありますか?
少なくともChrome v14。
[要素]セクションで、CSSルールの横にある[ファイル名:行番号]リンクをクリックします。表示されるCSSファイルには、すべての変更が含まれます。
この場所は正確に:
Chromeでは、[ソース]タブでCSSファイルを右クリックし、[ローカルの変更]をクリックできます
これにより、ローカルの変更がすべて表示されます。各リビジョンにはタイムスタンプが付けられ、以前のリビジョンにロールバックできます。
ライブ編集および改訂履歴を参照 このチュートリアルのセクション。
Firediff は、Firebugで行われたchangesを追跡するFirebugアドオンです。 HTMLペインで行うすべて(素晴らしい)だけでなく、Web Developer Toolbar拡張の短い使用(それほど素晴らしいではない)も記録します。たとえば、Shift-Ctrl-Fを使用して、フォントサイズ情報をpxで取得します。
Firebug拡張機能をChromeで見ましたが、テストしていません。FirediffでFirediffを使用しています。
以前にSOでこの製品を提案しました(私は決してそれらと提携していません)。
素晴らしい製品。まさにあなたが探しているもののように聞こえます。
EDIT:ここでの他のいくつかの回答では、ローカルファイルにリンクするGoogle Chromeの機能について言及しています(非常にクールです)。他の答えをチェックしてください!
Chromeこれを正確に行う拡張機能を作成しました。
これは StyleURL と呼ばれます。Chrome Inspectorで行ったCSSの変更をすべて受け取り、有効なCSSをdiffとして出力します。 https://chrome.google。 com/webstore/detail/styleurl/emplcligcppnlalfjknjbanolhlnkmgp
このページに「padding-bottom:50px」を追加した例を次に示します。
それはオープンソースであり、GitHubでも: https://github.com/Jarred-Sumner/styleurl-extension
Cloudworksで述べたように、これに対する答えは変わりました。これは、 Chrome DevTools Autosave 拡張機能によってかなりうまく実現できるようになりました。このツールは、Chrome Developer Toolsコンソール内で行われたCSSおよびJavaScriptの変更を追跡し、ローカルファイルに保存します。拡張機能のインストールとセットアップの手順については、 @ addyosmani 彼のブログ、 こちら 。
便利な screencast もあります。これは、拡張機能をかなり詳しく説明しています。
外部CSSを編集する場合、その最新リビジョンを[リソース]パネルからDnDをサポートするテキストエディターにドラッグできます( http://www.webkit.org/blog/1463/web-inspector-stylesを参照してください-enhanced / 、詳細については「変更の永続化」セクション。CSSの変更をスタイルシートリソースの以前のバージョンに戻すこともできます(スタイルシートリビジョンの右クリックポップアップメニューで)。
Workspaces を使用すると、インスペクター(Chrome)に入力するときにCSSを保存できます。問題は、 http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/ および Chrome Developer Tools のCSS変更の自動保存を無効にします。
Firefoxのストック開発ツールを使用している場合は、ツールダイアログで直接cssを編集できます。CSSビューポートボタン({}
シンボル)、CSSを直接編集します。ブラウザでリアルタイムに更新されます。完了したら、CSSファイルに直接コピーして貼り付けてください。いいね!
Chromeでは、CSSインスペクターで[+]ボタンをクリックしてホールドし、インスペクタースタイルシートに変更を追加することを選択できます。 css-selectorsで直接編集するほど便利ではありませんが、作成する内容はすべてinspector-stylesheet.cssにあります
特にSafariの回答を追加することは、一種の可能性です。
既存のCSSファイルのインスペクターの[スタイル]セクションでCSSを編集する場合、Cmd-S
変更を含むファイル全体を再保存します。ただし、Sass /プリプロセッサ/バンドリングなどを使用してCSSを生成するなどのメタ言語を使用している場合、CSSソースマップでは可能かもしれませんが、この問題は本当に解決するとは思いません。
[スタイル]セクションの上部の[Style Attribute
(既存のCSSファイルに関連付けられていない)インラインスタイルを追加する場合、これらの変更のすべてを簡単にエクスポートすることはできないようです。現時点では、各要素のオーバーライドを手動でコピーして貼り付けています。
公式のAppleのドキュメントは少し古いですが、ここにあります: Web Inspectorチュートリアル-Webページを変更するためのコードの編集 。