También tuve este problema para siempre, y finalmente decidí que no deberíamos editar cosas en el inspector web y creé algo para ello ( https://github.com/viatropos/design.io ).
Una mejor solución:
El navegador refleja automáticamente los cambios de CSS sin recargar cuando presiona guardar en su editor de texto .
La razón principal por la que estamos editando CSS en el inspector web (uso webkit, pero FireBug está en la misma línea) es porque necesitamos hacer pequeños ajustes, y lleva demasiado tiempo volver a cargar la página.
Hay 2 problemas principales con este enfoque. Primero, puede editar un elemento individual que puede no tener un idselector. Entonces, incluso si pudiera copiar / pegar el CSS generado desde el inspector web, tendría que generar un idalcance para el CSS. Algo como:
#element-127 {
background: red;
}
Eso comenzaría a hacer que tu CSS sea un desastre.
Puede evitar eso solo cambiando los estilos de un selector existente (el .spaceselector de clase en la imagen del inspector de webkit a continuación).
Aún así, el segundo problema. La interfaz para esa cosa es bastante difícil, es difícil hacer grandes cambios, como si quieres intentar copiar realmente rápido este bloque de CSS a este lugar, o lo que sea.
Prefiero seguir con TextMate.
Lo ideal sería simplemente escribir el CSS en su editor de texto y hacer que el navegador refleje los cambios sin volver a cargar la página . De esta manera, estaría escribiendo su CSS final mientras realiza los pequeños cambios.
El siguiente nivel sería escribir en un lenguaje CSS dinámico, como Stylus, Less, SCSS, etc., y hacer que actualice el navegador con el CSS generado. De esta manera, podrías comenzar a crear mixins comobox-shadow() , que abstraen las complejidades, lo que el inspector web definitivamente no podría hacer.
Hay algunas cosas por ahí que hacen esto, pero nada realmente lo racionaliza en mi opinión.
- LiveReload : empuja css al navegador sin actualizar cuando presiona guardar, pero es una aplicación de mac , por lo que sería difícil de personalizar.
- CodeKit : también una aplicación para Mac, pero actualiza el navegador cada vez que guarda.
No tener la capacidad de personalizar fácilmente la forma en que funcionan es la razón principal por la que no los utilicé.
Reuní https://github.com/viatropos/design.io específicamente para resolver este problema y hacerlo así:
- El navegador refleja el css / js / html / etc cada vez que guarda, sin volver a cargar la página
- Puede manejar cualquier plantilla / lenguaje / marco (Stylus, Less, CoffeeScript, Jade, Haml, etc.)
- Está escrito en JavaScript, y puede combinar extensiones muy rápido en JavaScript.
De esta manera, cuando necesite hacer esos pequeños cambios en CSS, puede decir, establecer el color de fondo, presionar guardar, ver no, no del todo, ajustar el tono en 10, guardar, no, ajustar en 5, guardar, se ve bien.
La forma en que funciona es mirando cada vez que guarda un archivo (en el nivel del sistema operativo), procesando el archivo (aquí es donde funcionan las extensiones) y enviando los datos al navegador a través de websockets, que luego se manejan (el lado del cliente de la extensión).
No para enchufar ni nada, pero luché con este problema durante mucho tiempo.
Espero que ayude.
