web-dev-qa-db-ja.com

インスペクターからCSSの変更をエクスポートします(webkit、firebugなど)

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

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

このようなものはありますか?

96
hookedonwinter

少なくともChrome v14。

[要素]セクションで、CSSルールの横にある[ファイル名:行番号]リンクをクリックします。表示されるCSSファイルには、すべての変更が含まれます。

この場所は正確に:

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

76

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

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

ライブ編集および改訂履歴を参照 このチュートリアルのセクション。

41
Chris MacDonald

Firediff は、Firebugで行われたchangesを追跡するFirebugアドオンです。 HTMLペインで行うすべて(素晴らしい)だけでなく、Web Developer Toolbar拡張の短い使用(それほど素晴らしいではない)も記録します。たとえば、Shift-Ctrl-Fを使用して、フォントサイズ情報をpxで取得します。

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

11
FelipeAls

以前にSOでこの製品を提案しました(私は決してそれらと提携していません)。

http://www.skybound.ca/

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

EDIT:ここでの他のいくつかの回答では、ローカルファイルにリンクするGoogle Chromeの機能について言及しています(非常にクールです)。他の答えをチェックしてください!

5
Bryan Downing

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

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

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

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

5
Jarred Sumner

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

enter image description here

便利な screencast もあります。これは、拡張機能をかなり詳しく説明しています。

4
Andrew Craswell

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

4

Workspaces を使用すると、インスペクター(Chrome)に入力するときにCSSを保存できます。問題は、 http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/ および Chrome Developer Tools のCSS変更の自動保存を無効にします。

2

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

0
Abraham Brookes

Chromeでは、CSSインスペクターで[+]ボタンをクリックしてホールドし、インスペクタースタイルシートに変更を追加することを選択できます。 css-selectorsで直接編集するほど便利ではありませんが、作成する内容はすべてinspector-stylesheet.cssにあります

0
Frazer Kirkman

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

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

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

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

0
Taylor Edmiston