2
I had this problem forever as well, and finally decided that we shouldn't be editing things in the web inspector and built something for it (https://github.com/viatropos/design.io).
我也一直有这个问题,最后决定我们不应该在web检查器中编辑东西,并为它构建了一些东西(https://github.com/viatropos/designio)。
A better solution:
一个更好的解决方案:
The browser automatically reflects CSS changes without reloading when you press save in your text editor.
当您在文本编辑器中按下save时,浏览器会自动地反映CSS更改,而不会重新加载。
The main reason we're editing css in the web inspector (I use webkit, but FireBug is along the same lines) is because we need to make small adjustments, and it takes too long to reload the page.
我们在web inspector(我使用webkit,但是FireBug是沿着同一条线编辑css)中编辑css的主要原因是我们需要进行小的调整,重新加载页面需要很长时间。
There are 2 main problems with this approach. First, you're allowed to edit an individual element that may not have an id
selector. So even if you were able to copy/paste the generated CSS from the web inspector, it would have to generate an id
to scope the css. Something like:
这种方法有两个主要问题。首先,允许编辑可能没有id选择器的单个元素。因此,即使您能够从web inspector复制/粘贴生成的CSS,它也必须生成一个id来确定CSS的范围。喜欢的东西:
#element-127 {
background: red;
}
That would start making your css a mess.
这会让你的css变得一团糟。
You could get around that by only changing styles for an existing selector (the .space
class selector in the webkit inspector image below).
您可以通过只改变现有选择器的样式来解决这个问题(webkit inspector映像中的.space类选择器)。
Still though, the second problem. The interface to that thing is pretty rough, it's hard to make big changes - like if you want to try real quick copying this block of css to this place, or whatever.
尽管如此,第二个问题。这个东西的界面很粗糙,很难做出大的改变——比如如果你想尝试快速复制这个块的css到这个地方,或者别的什么。
I'd rather just stick to TextMate.
我宁愿只听TextMate。
The ideal would be to just write the CSS in your text editor and have the browser reflect the changes without reloading the page. This way you'd be writing your final css as you're making the little changes.
理想的做法是在文本编辑器中编写CSS,让浏览器在不重新加载页面的情况下反映更改。这样,您就可以在进行小更改时编写最终的css了。
The next level would be to write in a dynamic CSS language, like Stylus, Less, SCSS, etc, and have that update the browser with the generated CSS. This way you could start creating mixins like box-shadow()
, that abstracted away the complexities, which the web inspector definitely couldn't do.
下一个级别是使用动态CSS语言编写,比如手写笔、Less、SCSS等,并使用生成的CSS更新浏览器。通过这种方式,您可以开始创建像box-shadow()这样的混合器,这样就消除了复杂性,这是web inspector绝对做不到的。
There's a few things out there that kind of do this, but nothing really streamlining it in my opinion.
有一些事情可以做到这一点,但在我看来,没有什么能真正使它变得简洁。
- LiveReload: pushes css to browser without refreshing when you press save, but it's a mac app, so it'd be difficult to customize.
- LiveReload:当你按下save时,将css推送到浏览器,但它是一个mac应用程序,所以很难定制。
- CodeKit: also a mac app, but it refreshes the browser every time you save.
- CodeKit:也是一款mac应用,但每次保存时都会刷新浏览器。
Not having the ability to easily customize the way these work is the main reason I didn't use them.
没有能力轻松定制这些工作的方式是我没有使用它们的主要原因。
I put together https://github.com/viatropos/design.io specifically to solve this problem, and make it so:
我特意将https://github.com/viatropos/designio整合到一起解决这个问题,并使之成为:
- The browser reflects the css/js/html/etc anytime you save, without reloading the page
- 浏览器反映css/js/html等任何时候你保存,没有重新加载页面
- It can handle any template/language/framework (Stylus, Less, CoffeeScript, Jade, Haml, etc.)
- 它可以处理任何模板/语言/框架(手写笔、更少、咖啡稿、翡翠、Haml等)。
- It's written in Javascript, and you can whip together extensions real quick in Javascript.
- 它是用Javascript编写的,您可以在Javascript中快速组合扩展。
This way, when you need to make those little changes to CSS, you can say, set background color, press save, see nope, not quite, adjust the hue by 10, save, nope, adjust by 5, save, looks good.
这样,当你需要对CSS做一些小小的修改时,你可以说,设置背景色,按保存,看不,不完全,调整色调10,保存,不,调整5,保存,看起来不错。
The way it works is by watching whenever you save a file (at the os level), processing the file (this is where the extensions work), and pushing the data to the browser through websockets, which are then handled (the client side of the extension).
它的工作方式是观察保存文件(在os级别)、处理文件(这是扩展工作的地方)以及通过websockets将数据推送到浏览器,然后进行处理(扩展的客户端)。
Not to plug or anything, but I struggled with this issue for a long ass time.
不是为了插入或其他什么,但我在这个问题上挣扎了很长一段时间。
Hope that helps.
希望有帮助。