Firebug 风格的 CSS 编辑器
这是我当前编辑 CSS 的工作流程：
- 我：“看看这个页面！”
- 伙计们：“尝试使帖子标题更大”
- 右键单击帖子标题，选择“检查”（在 Firebug 中检查它）
- 在 Firebug 中找到适当的 CSS 语句（
h2.post_title或其他内容） - 修改Firebug 中的 CSS，询问朋友它看起来如何
- 如果看起来不错，请在 Textmate 中再次进行更改
我想避免步骤 6。即，我希望能够通过类似 Firebug 的 UI 编辑 CSS 并能够提交我的更改立即复制到相关文件（而不是像我使用 Firebug 那样手动复制它们）
编辑：在 Mac 上运行的东西将是理想的选择
Here's my current workflow for editing CSS:
- Me: "Take a look at this page!"
- Guys: "Try making the post titles bigger"
- Right click on a post title, choose "inspect" (to inspect it in firebug)
- Find the appropriate CSS statement in Firebug (
h2.post_titleor something) - Modify the CSS in Firebug, ask friends how it looks
- If it looks good, make the change again in Textmate
I want to avoid step 6. I.e., I want the ability to edit CSS via a Firebug-like UI and be able to commit my changes to the relevant file immediately (rather than having to copy them by hand as I do with Firebug)
Edit: Something that works on a Mac would be ideal
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（8）
您是否在 Firefox 中尝试过 "Web Developer" 扩展程序？它允许您打开、编辑和保存 CSS 文件。
Have you tried "Web Developer" extension in Firefox? It allows you to open, edit and save CSS files.
http://www.skybound.ca/
继续前进并获得启发。这确实是一个改变生活的计划。
http://www.skybound.ca/
Go forth and be enlightened. This is truly a life changing program.
另一个可能的工作流程：
我仅使用 Firebug 进行调试（例如：“为什么这东西会采用这种样式？”），而不是在我知道它们需要进入哪里时进行更改CSS。这个工作流程确实在某种程度上依赖于能够轻松地重新加载 CSS。如果您正在开发的应用程序中，点击重新加载会完全破坏您的状态，那么它可能并不理想。
Another possible workflow:
I only use Firebug for debugging (eg: "why is this thing getting that style?") not for making changes when I know where they need to go in the CSS. This workflow does depend somewhat on being able to reload the CSS easily. If you're working on an app where hitting reload completely disrupts your state it might not be ideal.
查看逆火：
http://blog .quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/
还没有尝试过，但听起来很有希望。
Check out Backfire:
http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/
Haven't tried it, but sounds promising.
看看我对这个问题的贡献：
http://www.cssupdater.com
第 6 步将是：
6：在 Firebug 中单击“立即同步”按钮！
单击会将您的更改发送到桌面应用程序，该应用程序会同步您的原始 CSS 文件。
您还可以选择要在应用程序中同步的更改。它可以与您最喜欢的文本编辑器或 IDE 配合使用，并且可以在 Windows 和 Mac 上运行！
赫尤里卡？
Check out my contribution to this problem:
http://www.cssupdater.com
Step 6 would then be:
6: One click on the "Sync now" button in Firebug!!
The click sends your changes to the desktop application, which syncs your orignal css files.
You can also choose the changes you want to sync in the application. It works with your favorite text editor or IDE and on both Windows and Mac!
Heureka?
启用“软刷新”的 XRefresh 可能会对您的工作流程有所帮助，但您仍然需要知道您想要什么 CSS 选择器添加/编辑。
XRefresh with "Soft Refresh" enabled may help your workflow, but you still need to know what CSS selectors do you want to add/edit.
这就是我开发 LIVEditor 的原因，因为我不想再次手动重做更改在 Firebug （或类似的）中调整我的 css 样式后，在文本编辑器中。
What's why I'm developing LIVEditor, because I don't want to manually redo the change again in the text editor after tweaking my css styles in Firebug (or the likes).
Backfire（参见下面的帖子）是专门为 Quplo (http://quplo.com) 创建的，这是一个专门执行您所描述的操作的工具。您编写 html 和 css，然后讨论需要更改的内容，进行更改（使用 firebug 或 Web 开发人员工具栏）并单击“保存”。
Backfire (see post below) was created specifically for Quplo (http://quplo.com), which is a tool that specificly does what you describe. You write html and css, then talk about what needs to be changed, make the changes (using firebug or web developer toolbar) and hit save.