blocks|key|972633|text|我已经找到了这个问题的答案，至少从Chrome+v14开始。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|972634|在元素部分，只需点击CSS规则旁边的"filename:linenumber“链接即可。显示的CSS文件将包含所有修改。|972635|这个地方就是：|972636|​|972637|📷|atomic|offset|length|972638|972639|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/fc274e1d5e6c1e2b59b3aeb432cf0bd7.jpeg|imageAlt^0|0|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|10|8|@]|9|@$K|11|L|12|1|13]]|A|$]]|$1|M|3|G|5|6|7|14|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|O|$P|$5|Q|R|S|A|$T|U|V|-4]]]]

I have found the answer to this, at least as of Chrome v14. 

While in the Elements section, just click on the "filename:linenumber" link next to the CSS rules. The CSS file that shows up will contain all of the modifications.

This place exactly:

<img src="https://i.stack.imgur.com/wX27K.jpg" alt="https://cdn.tutsplus.com/net/uploads/2013/06/dev-tools-regular-view.jpg">

blocks|key|972740|text|在Chrome中，您可以在源选项卡中右键单击CSS文件，然后单击“本地修改”|type|unstyled|depth|inlineStyleRanges|entityRanges|data|972741|这将显示您所有的本地更改。每个版本都有时间戳，您可以回滚到任何以前的版本。|972742|本教程的See+the+Live+Editing+and+Revision+History部分。|offset|length|972743|entityMap|0|LINK|mutability|MUTABLE|url|http://webdesign.tutsplus.com/tutorials/workflow-tutorials/faster-htmlcss-workflow-with-chrome-developer-tools/^0|0|0|4|15|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@$F|S|G|T|1|U]]|A|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

In Chrome, you can right-click a CSS file in the Sources tab and click "Local Modifications"

This shows you all of your local changes. Each revision is timestamped and you can rollback to any previous revision.

<a href="http://webdesign.tutsplus.com/tutorials/workflow-tutorials/faster-htmlcss-workflow-with-chrome-developer-tools/" rel="noreferrer">See the Live Editing and Revision History</a> section of this tutorial.

blocks|key|973239|text|我构建了一个Chrome扩展来做这件事。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|973240|它叫做StyleURL+-它接受你在Chrome+Inspector中所做的任何CSS更改，并输出有效的CSS作为diff：https://chrome.google.com/webstore/detail/styleurl/emplcligcppnlalfjknjbanolhlnkmgp|offset|length|973241|下面是一个例子，我在这个页面中添加了“padding:+50px”：|973242|📷|atomic|973243|​|973244|它是开源的，也是基于GitHub的：https://github.com/Jarred-Sumner/styleurl-extension|973245|entityMap|0|LINK|mutability|MUTABLE|url|https://www.styleurl.app/|1|https://chrome.google.com/webstore/detail/styleurl/emplcligcppnlalfjknjbanolhlnkmgp|2|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/7297cf237b51c7618853024fb9340f46.png|imageAlt|3|https://github.com/Jarred-Sumner/styleurl-extension^0|0|3|8|0|1Q|2B|1|0|0|0|1|2|0|0|I|1F|3|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@]|9|@$D|18|E|19|1|1A]|$D|1B|E|1C|1|1D]]|A|$]]|$1|F|3|G|5|6|7|1E|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|1F|8|@]|9|@$D|1G|E|1H|1|1I]]|A|$]]|$1|K|3|L|5|6|7|1J|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1K|8|@]|9|@$D|1L|E|1M|1|1N]]|A|$]]|$1|O|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]|W|$5|R|S|T|A|$U|X]]|Y|$5|Z|S|10|A|$11|12|13|-4]]|14|$5|R|S|T|A|$U|15]]]]

I built a Chrome extension that does exactly this.

It's called <a href="https://www.styleurl.app" rel="noreferrer">StyleURL</a> - it takes whatever CSS changes you made in Chrome Inspector and outputs valid CSS as the diff: <a href="https://chrome.google.com/webstore/detail/styleurl/emplcligcppnlalfjknjbanolhlnkmgp" rel="noreferrer">https://chrome.google.com/webstore/detail/styleurl/emplcligcppnlalfjknjbanolhlnkmgp</a>

Here's an example where I added "padding-bottom: 50px" to this page:
<a href="https://i.stack.imgur.com/l6DC8.png" rel="noreferrer"><img src="https://i.stack.imgur.com/l6DC8.png" alt="StyleURL example diff"></a>

It's open-source and on GitHub too: <a href="https://github.com/Jarred-Sumner/styleurl-extension" rel="noreferrer">https://github.com/Jarred-Sumner/styleurl-extension</a>

blocks|key|972668|text|如果编辑外部CSS，则可以将其最新修订从资源面板拖到任何支持DnD的文本编辑器中(有关更多详细信息，请参阅http://www.webkit.org/blog/1463/web-inspector-styles-enhanced/的“持久更改”一节)。还可以将CSS更改恢复到任何早期版本的样式表资源(在任何样式表修订版本的右键单击弹出菜单中)。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|972669|entityMap|0|LINK|mutability|MUTABLE|url|http://www.webkit.org/blog/1463/web-inspector-styles-enhanced/^0|1H|1Q|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

If you edit external CSS, then you can drag its latest revision out of the Resources panel into any text editor that supports DnD (see <a href="http://www.webkit.org/blog/1463/web-inspector-styles-enhanced/" rel="nofollow">http://www.webkit.org/blog/1463/web-inspector-styles-enhanced/</a>, the "Persisting Changes" section for more detail.) You can also revert your CSS changes to any earlier version of the stylesheet resource (in the right-click popup menu of any stylesheet revision.)

blocks|key|1187077|text|正如cloudworks所提到的，这个问题的答案已经改变了。现在，这可以通过Chrome+DevTools+Autosave扩展很好地完成。此工具跟踪在Chrome开发人员工具控制台中所做的CSS和JavaScript更改，并将其保存回本地文件。有关安装和设置扩展的说明，请参考@addyosmani在他的博客here上编写的指南。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1187078|​|1187079|📷|atomic|1187080|1187081|还有一个方便的screencast，它很好地详细描述了这个扩展。|1187082|entityMap|0|LINK|mutability|MUTABLE|url|https://chrome.google.com/webstore/detail/devtools-autosave/mlejngncgiocofkcbnnpaieapabmanfl?hl=en|1|https://twitter.com/addyosmani|2|http://addyosmani.com/blog/autosave-changes-chrome-dev-tools/|3|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/e2f493b33902b6c7247a2ed0165772ea.jpeg|imageAlt|4|http://vimeo.com/33765496^0|12|O|0|3V|B|1|4B|4|2|0|0|0|1|3|0|0|7|A|4|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@$A|16|B|17|1|18]|$A|19|B|1A|1|1B]|$A|1C|B|1D|1|1E]]|C|$]]|$1|D|3|E|5|6|7|1F|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|1G|8|@]|9|@$A|1H|B|1I|1|1J]]|C|$]]|$1|I|3|E|5|6|7|1K|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|1L|8|@]|9|@$A|1M|B|1N|1|1O]]|C|$]]|$1|L|3|-4|5|6|7|1P|8|@]|9|@]|C|$]]]|M|$N|$5|O|P|Q|C|$R|S]]|T|$5|O|P|Q|C|$R|U]]|V|$5|O|P|Q|C|$R|W]]|X|$5|Y|P|Z|C|$10|11|12|-4]]|13|$5|O|P|Q|C|$R|14]]]]

As mentioned by cloudworks, the answer to this has changed. This can now be accomplished rather well by the <a href="https://chrome.google.com/webstore/detail/devtools-autosave/mlejngncgiocofkcbnnpaieapabmanfl?hl=en" rel="nofollow noreferrer">Chrome DevTools Autosave</a> extension. This tool tracks CSS and JavaScript changes made within the Chrome Developer Tools console, and saves them back to local files. For instructions to install and setup the extension, please refer to the guide written by <a href="https://twitter.com/addyosmani" rel="nofollow noreferrer">@addyosmani</a> on his blog, <a href="http://addyosmani.com/blog/autosave-changes-chrome-dev-tools/" rel="nofollow noreferrer">here</a>.

<img src="https://i.stack.imgur.com/arleQ.jpg" alt="enter image description here">

There is also a handy <a href="http://vimeo.com/33765496" rel="nofollow noreferrer">screencast</a> which details the extension rather well.

blocks|key|972966|text|使用Workspaces，你可以在检查器中输入CSS时保存它们(在Chrome中)。问题是，每个更改都会自动保存，并且没有办法禁用此功能，正如http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/和Disable+automatic+saving+of+CSS+changes+in+Chrome+Developer+Tools中指出的那样。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|972967|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.chrome.com/devtools/docs/workspaces|1|http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/|2|https://stackoverflow.com/questions/16796467/disable-automatic-saving-of-css-changes-in-chrome-developer-tools^0|2|A|0|1Z|1Y|1|3Y|1T|2|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]|$A|T|B|U|1|V]|$A|W|B|X|1|Y]]|C|$]]|$1|D|3|-4|5|6|7|Z|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]|N|$5|G|H|I|C|$J|O]]]]

With <a href="https://developer.chrome.com/devtools/docs/workspaces" rel="nofollow noreferrer">Workspaces</a> you can have your CSS saved as you type them in your inspector (in Chrome). The problem is that every change is automatically saved and there's no way to disable this feature, as pointed in <a href="http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/" rel="nofollow noreferrer">http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/</a> and <a href="https://stackoverflow.com/questions/16796467/disable-automatic-saving-of-css-changes-in-chrome-developer-tools">Disable automatic saving of CSS changes in Chrome Developer Tools</a>.

blocks|key|1187263|text|如果你使用的是火狐股票开发工具，你可以直接在工具对话框中编辑css+--点击CSS+viewport按钮(这是顶部带有{}符号的按钮)，然后直接编辑css。它会在浏览器中实时更新，完成后只需将其直接复制粘贴到css文件中即可。好的!|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1187264|entityMap^0|1N|2|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

If you're using the Firefox stock dev tools you can edit the css directly in the tools dialog - click the CSS viewport button (that's the button at the top with the <code>{}</code> symbol) and edit your css directly. It will update in realtime in the browser and when you're done just copy-paste it directly into your css file. Nice!

blocks|key|973128|text|专门为Safari添加一个答案--这是有可能的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|973129|在检查器中编辑现有CSS文件的“样式”部分中的CSS时，可以按Cmd-S重新保存包含更改的整个文件。然而，如果你正在使用像Sass+/+preprocessor+/生成CSS这样的元语言，我认为这并不能真正解决这个问题，尽管使用CSS源映射可能是可能的。|offset|length|style|CODE|973130|当您编辑样式部分顶部的CSS时，在Style+Attribute下添加内联样式(不绑定到现有的CSS文件)，似乎不可能轻松导出所有这些更改。现在，我只是手动复制和粘贴每个元素的覆盖。|973131|苹果的官方文档有点过时，但可以在这里找到：Web+Inspector+Tutorial+-+Editing+Code+to+Change+Your+Webpage。|973132|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.apple.com/library/content/documentation/NetworkingInternetWeb/Conceptual/Web_Inspector_Tutorial/EditingCode/EditingCode.html^0|0|V|5|0|H|F|0|L|1O|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@$D|V|E|W|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|X|8|@$D|Y|E|Z|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|10|8|@]|9|@$D|11|E|12|1|13]]|A|$]]|$1|L|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S]]]]

To add an answer for Safari specifically — it's kind of possible.

When you edit CSS in the Styles section in the Inspector for an existing CSS file, you can hit <code>Cmd-S</code> to re-save the entire file with the changes. However, if you're using a meta language like Sass / preprocessor / generating your CSS with bundling etc, I don't think this really solves that problem, though it may be possible with CSS source maps.

When you edit CSS at the top of the Styles section, under <code>Style Attribute</code> to add inline styles (not tied to an existing CSS file), it doesn't seem possible to easily export all of those changes. For now, I'm just copying and pasting the overrides manually for each element.

The official Apple docs are a little dated but found here: <a href="https://developer.apple.com/library/content/documentation/NetworkingInternetWeb/Conceptual/Web_Inspector_Tutorial/EditingCode/EditingCode.html" rel="nofollow noreferrer">Web Inspector Tutorial - Editing Code to Change Your Webpage</a>.

blocks|key|973319|text|在Chrome中，您可以在css检查器中单击并按住%2B按钮，然后选择将更改添加到检查器样式表中。它不像在css选择器中直接编辑那样方便，但您编写的内容将全部放在检查器-stylesheet.css中|type|unstyled|depth|inlineStyleRanges|entityRanges|data|973320|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

In Chrome, in the css inspector you can click and hold the + button, then choose to add your changes to the inspector-stylesheet. It's not as convenient as directly editing in your css-selectors, but what you write will all be in inspector-stylesheet.css

When I'm working with CSS, I'll often test in a browser - say, Chrome - right click an element, click Inspect Element, and edit the CSS right there. The use of arrow keys to change things like margin and padding makes lining things up super easy.

It's not too hard to then take those changes and apply them to the CSS file, but it would be cool if I could just right click the selector in the inspector and select "export" or "copy", and have the contents available in my clipboard.

Does something like this exist?

Export CSS changes from inspector (webkit, firebug, etc)

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

当我使用CSS时，我通常会在浏览器中测试-比如Chrome -右键单击一个元素，单击Inspect element，然后在那里编辑CSS。使用箭头键来改变诸如边距和填充之类的东西，使得排列起来非常容易。然后将这些更改应用到CSS文件中并不是太难，但如果我可以在检查器中右键单击选择器并选择“导出”或“复制”，并在剪贴板中提供内容，那将是很酷的。真的存在这样的东西吗？

问从检查器导出CSS更改(webkit、firebug等)
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从检查器导出CSS更改(webkit、firebug等)EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从检查器导出CSS更改(webkit、firebug等)
EN