我也一直有这个问题,最后决定我们不应该在网络检查器中编辑东西并为它构建一些东西(https://github.com/viatropos/design.io)。
更好的解决方案:
当您在文本编辑器中按下保存时,浏览器会自动反映 CSS 更改而无需重新加载。
我们在 web 检查器中编辑 css 的主要原因(我使用 webkit,但 FireBug 也是如此)是因为我们需要进行一些小的调整,并且重新加载页面需要很长时间。
这种方法有两个主要问题。首先,您可以编辑可能没有id
选择器的单个元素。因此,即使您能够从 Web 检查器复制/粘贴生成的 CSS,它也必须生成一个id
以限定 css 的范围。就像是:
#element-127 {
background: red;
}
那会让你的CSS变得一团糟。
您可以通过仅更改现有选择器的样式(.space
下面的 webkit 检查器图像中的类选择器)来解决这个问题。
不过,第二个问题。那个东西的界面很粗糙,很难做出大的改变——比如如果你想尝试真正快速地将这个css块复制到这个地方,或者其他什么。
我宁愿坚持使用TextMate。
理想的做法是在您的文本编辑器中编写 CSS并让浏览器反映更改而无需重新加载页面。这样,您将在进行微小更改时编写最终的 CSS。
下一个级别是用动态 CSS 语言编写,如 Stylus、Less、SCSS 等,并使用生成的 CSS 更新浏览器。通过这种方式,您可以开始创建像 一样的 mixin box-shadow()
,从而抽象出 Web 检查器绝对无法做到的复杂性。
有一些东西可以做到这一点,但在我看来,没有什么能真正简化它。
无法轻松自定义这些工作方式是我没有使用它们的主要原因。
我专门整理了https://github.com/viatropos/design.io来解决这个问题,并做到了:
- 浏览器会在您保存时随时反映 css/js/html/etc,而无需重新加载页面
- 它可以处理任何模板/语言/框架(Stylus、Less、CoffeeScript、Jade、Haml 等)
- 它是用 JavaScript 编写的,您可以在 JavaScript 中快速组合扩展。
这样,当你需要对 CSS 进行一些小改动时,你可以说,设置背景颜色,按保存,看不,不完全,将色调调整 10,保存,不,调整 5,保存,看起来不错。
它的工作方式是在您保存文件时(在操作系统级别)观察,处理文件(这是扩展工作的地方),然后通过 websocket 将数据推送到浏览器,然后处理(客户端扩展名)。
不要插入或任何东西,但我在这个问题上挣扎了很长时间。
希望有帮助。