Firebug es la herramienta más conveniente que he encontrado para editar CSS, entonces, ¿por qué no hay una opción simple de "guardar" para CSS?

Siempre me encuentro haciendo ajustes en Firebug, luego volviendo a mi archivo .css original y replicando los ajustes.

¿Alguien ha encontrado una solución mejor?

EDITAR: Soy consciente de que el código se almacena en un servidor (en la mayoría de los casos no es el mío), pero lo uso cuando construyo mis propios sitios web.

Firebug solo está usando el archivo .css que Firefox descargó del servidor, sabe exactamente en qué líneas está editando los archivos. No puedo ver por qué no hay una opción de "exportación" o "guardar", que le permite almacenar el nuevo archivo .css. (Con lo cual podría reemplazar el remoto con).

He intentado buscar en ubicaciones temporales y elegir Archivo > Guardar ... y experimentar con las opciones de salida en Firefox, pero todavía no he encontrado la manera.

EDIT 2: El grupo de discusión oficial tiene muchas preguntas , pero no respuestas.

Llegué aquí buscando exactamente esta característica, es decir, poder guardar las CSSpropiedades editadas nuevamente en el archivo original (en mi máquina de desarrollo local). Desafortunadamente, después de buscar mucho y no encontrar nada que se adapte a mis necesidades (OK, hay CSS Updater pero tienes que registrarte y es una extensión paga ...) Me di por vencido en Firefox + Firebug y busqué algo similar para Google Chrome. Adivina qué ... Acabo de encontrar esta gran publicación que muestra una buena manera de hacer que esto funcione (integrado en Chrome, no hay necesidad de extensiones adicionales):

Cambie CSS y GUARDE en el sistema de archivos local utilizando las Herramientas para desarrolladores de Chrome

Lo probé ahora y funciona muy bien resaltando las líneas cambiadas. Simplemente haga clic en Guardar y listo. :)

Aquí hay un video que explica esto y mucho más: Google I / O 2011: Chrome Dev Tools Reloaded

Espero que ayude si no le importa cambiar de navegador mientras edita sus archivos CSS. Ya hice el cambio por ahora, pero realmente me encantaría tener esta funcionalidad integrada en Firebug. :)

[Actualización 1]

Hoy acabo de ver este video: Firefox CSS live edit en Sublimetext (trabajo en progreso) Parece realmente prometedor.

[Actualización 2]

Si está utilizando Visual Studio 2013 con Web Essentials , podrá sincronizar CSS automáticamente como se muestra en este video:

Web Essentials: integración de herramientas del navegador

Me he estado preguntando lo mismo desde hace bastante tiempo, simplemente desgarrador cuando su in-moment-freestyle-css'ing con firebug se hace pedazos por
una recarga accidental o algo así ...

Para mis propósitos, finalmente encontré la herramienta ...: FireDiff .

Te da una nueva pestaña, probablemente alguna referencia extraña de David Bowie, llamada "cambios"; que no solo le permite ver / guardar lo que Firebug, es decir, usted ha estado haciendo,
sino que también opcionalmente puede realizar un seguimiento de los cambios realizados por la página en sí ... si está o está dispuesto.

Así que agradecido de no tener que volver a escribir, o volver a imaginar y luego volver a escribir, cada regla CSS que hago ...

Aquí hay un enlace al desarrollador (no se desanime por la primera aparición, quizás también diríjase directamente al repositorio de complementos de Mozilla) .

los complemento Desarrollador web le permite guardar sus ediciones. Me gustaría combinar la edición de Firebug con la función Guardar de Web Developer.

Utilice el " Guardar botón " (haga clic en el menú CSS -> Editar CSS) para guardar el CSS modificado en el disco.

Recomendación : use el botón " Pegar " para evitar perder sus cambios cuando cambie la pestaña para hacer otra navegación. Si es posible, use solo una pestaña para hacer la edición y otra ventana de Firefox para las búsquedas relacionadas, el correo web, etc.

Acabo de lanzar un complemento firebug en el sandbox de complementos de mozilla que podría hacer lo que quieras: https://addons.mozilla.org/en/firefox/addon/52365/

En realidad, guarda los archivos css "tocados" a pedido en su servidor web (mediante la comunicación con un script php de servicio web de un archivo).

Documentación se puede encontrar en mi página de inicio o en la página de complementos

Agradecería cualquier prueba, informe de errores, comentarios, calificaciones, discusión sobre esto, ya que todavía está en la versión beta temprana, pero ya debería funcionar bien.

CSS-X-Fire

Me sorprende que todavía no esté en la lista para esta pregunta, pero probablemente porque es nuevo y el autor aún no tuvo tiempo para promocionarlo.

Se llama CSS-X-Fire y es un complemento para la serie de IDEs de JetBrains: IntelliJ IDEA, PHPWebStorm, PyCharm, WebStorm, RubyMine .

Cómo funciona: instala uno de estos IDE y configura la implementación (admite FTP y SCP). Esto le permitirá mantenerse sincronizado con el servidor.

Después de esto, instala este complemento. Cuando comience, le pedirá que le diga que instalará un complemento para Firefox, a fin de hacer la integración entre Firebug y el IDE. Si no puede instalar el complemento, solo use la técnica de arrastrar y soltar para instalarlo.

Una vez instalado, rastreará todos sus cambios desde Firebug y podrá aplicarlos con un simple clic dentro de IDE.

Archivo de fuego

FireFile es una alternativa que requiere que agregue un pequeño archivo php al lado del servidor para poder cargar el CSS modificado.

Puede vincular firebug a eclipse con fireclipse y luego guardar el archivo de eclipse

Creo que lo más cercano que vas a llegar es ir al modo Editar en Firebug y copiar y pegar el contenido del archivo CSS.

Acabamos de presentar Backfire, un motor de código abierto de JavaScript que le permite guardar los cambios de CSS realizados en Firebug y Webkit inspector en el servidor. La biblioteca incluye un ejemplo de implementación C # de cómo guardar los cambios entrantes en su CSS.

Aquí hay una publicación de blog sobre cómo funciona: http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/

Y aquí está el código alojado en Google Code: http://code.google.com/p/backfire/

Sé que esto no responde a su pregunta, pero sorprendentemente, la "barra de herramientas para desarrolladores" del clon Firebug de Internet Explorer 8 (accesible a través de F12) ofrece la opción de "guardar html". Esta función guarda el DOM actual en un archivo local, lo que significa que si edita el DOM de alguna manera, por ejemplo, agregando un atributo de estilo en algún lugar, también se guardará.

No es particularmente útil si está usando Firebug para jugar con CSS como todos, pero es un paso en la dirección correcta.

Propongo una solución que involucra una combinación de Firebug y FireFTP, así como un código que accede directamente al sistema de archivos local cuando se ejecuta un sitio web localmente.

Aquí están los escenarios:

Trabajar en un sitio web alojado en una máquina remota

En este caso, proporcionaría los detalles de FTP y la ubicación de CSS / HTML / Javascript y Firebug actualizaría estos archivos cuando guarde los cambios. Incluso puede localizar los archivos en sí y luego pedirle que verifique que tiene el archivo correcto. Si los nombres de archivo son únicos, no debería ser un problema.

Trabajando en un sitio web que se ejecuta en su máquina local

En este caso, podría proporcionar Firebug con la ubicación de la carpeta local del sitio web y se utilizaría el mismo comportamiento para unir y verificar los archivos. El acceso al sistema de archivos local podría realizarse a través de FireFTP si fuera necesario.

Trabajar en un sitio web alojado de forma remota sin acceso FTP

En este caso, habría que implementar algo como el complemento FireFile.

Una característica adicional sería la capacidad de guardar y abrir archivos de proyecto que almacenan las asignaciones entre los archivos locales y las URL con las que están asociados, así como guardar los detalles de FTP como FireFTP ya lo hace.

Soy el autor de CSS-X-Fire, que Sorin Sbarnea también publicó amablemente en este hilo. Supongo que llego un poco tarde;)

CSS-X-Fire emite cambios de propiedad CSS de Firebug al IDE donde los cambios se pueden aplicar o descartar.

Hay un par de ventajas con esta solución sobre la mayoría de las otras herramientas existentes que solo conocen los nombres de archivos y el contenido descargado por el navegador (vea el comentario de NickFitz en la publicación original).

Escenario 1: tiene un sitio web (proyecto) que tiene un puñado de temas entre los que el usuario puede seleccionar. Cada tema tiene su propio archivo CSS, pero Firebug solo conoce uno, el actual. CSS-X-Fire detectará todos los selectores coincidentes en el proyecto y le permitirá decidir cuál debe modificarse.

Escenario 2: el proyecto web tiene hojas de estilo creadas en tiempo de compilación o durante la implementación. Pueden fusionarse a partir de varios archivos y los nombres de los archivos pueden cambiar. CSS-X-Fire no se preocupa por los nombres de los archivos, solo trata con los nombres del selector CSS y sus propiedades.

Arriba hay ejemplos de escenarios en los que CSS-X-Fire sobresale. Dado que funciona con los archivos de origen y conoce la estructura del lenguaje, también ayuda a encontrar duplicados que Firebug, jump-to-code, etcétera no conocen.

CSS-X-Fire es de código abierto bajo la licencia Apache 2. Página principal del proyecto: http://code.google.com/p/css-x-fire/

Archivo de fuego

Firebug fue creado para detectar un problema para no ser un depurador. pero puede guardar el cambio si agrega una nueva herramienta que integra firebug con guardar cambios. es FireFile, haga clic aquí http://thelistoflist.blogspot.com/2010/04/how-to-save-change-you-make-in-firebug.html .

FireFile proporciona la funcionalidad deseada al agregar un pequeño archivo PHP al lado del servidor.

Dado que Firebug no funciona en su servidor, sino que toma el CSS del sitio y lo almacena localmente y le muestra el sitio con esos cambios locales.

Usa el editor CSS en la barra de herramientas de Firefox Web Developer:

http://chrispederick.com/work/web-developer/

Tiene suficientes cosas buenas para usar junto con Firebug, y le permite guardar su CSS en un archivo de texto.

Utiliza Backfire.

http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/

Es una solución de código abierto que envía los cambios de CSS al servidor y los guarda.

Backfire utiliza un solo archivo javascript, y el paquete de código fuente tiene un ejemplo de implementación de servidor .NET que es fácilmente portátil para otras plataformas.

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í:

1. El navegador refleja el css / js / html / etc cada vez que guarda, sin volver a cargar la página
2. Puede manejar cualquier plantilla / lenguaje / marco (Stylus, Less, CoffeeScript, Jade, Haml, etc.)
3. 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.

Firebug funciona en el CSS calculado (el que se obtiene al tomar el CSS en los archivos y aplicar la herencia, etc. más los cambios realizados con JavaScript). Esto significa que probablemente no podría usarlo directamente para incluir en un archivo HTML, que es específico del navegador / versión (a menos que solo le importe Firefox). Por otro lado, realiza un seguimiento de lo que es original y lo que se calcula ... Creo que no debería ser muy difícil agregar algo de JS a Firebug para poder exportar ese CSS a un archivo de texto.

Me preguntaba por qué no puedo seleccionar y copiar el texto delante de mis ojos. Especialmente cuando otros dicen que puedes simplemente "seleccionar y copiar". Resulta que puedes , solo tienes que comenzar a arrastrar. El texto copiado en el portapapeles no tiene sangría, desafortunadamente, pero al menos te ahorra transcribir manualmente todo el contenido del archivo CSS. Simplemente haga que su programa diff ignore los cambios en el espacio en blanco al compararlo con el original. fuera de cualquier texto (es decir, en la canaleta arriba o a la izquierda del texto) como cualquier mousedown, ya sea un clic o arrastrar, en cualquier texto que invoque inmediatamente la propiedad editor. También puede hacer clic fuera del texto para obtener un cursor (incluso si no siempre es visible) que luego puede mover con las teclas de flecha y seleccionar el texto de esa manera.

Puede escribir su propio archivo de script del servidor que tome un parámetro de nombre de archivo y un parámetro de contenido.

El script del servidor encontraría el archivo solicitado y reemplazaría su contenido con el nuevo.

La parte difícil sería escribir el Javascript que aprovecha la información de Firebug y recupera los datos útiles.

Personalmente prefiero pedirle al equipo de desarrollo de firebug que proporcione una función, no debería ser demasiado difícil para ellos.

Finalmente, Ajax envía el par de nombre de archivo / contenido al archivo php que creó.

Citado de las preguntas frecuentes de Firebug :

Edición de páginas

• ¿Puedo guardar en la fuente los cambios que hice en la página web que estoy viendo?

  En este momento no puedes. Como John J. Barton escribió en el grupo de noticias:

  Editar en Firebug es como sacarle los encurtidos y agregarle mostaza a un sándwich de restaurante: puedes disfrutar del resultado, pero el próximo cliente en el restaurante aún obtendrá encurtidos y nada de mostaza.

  Esta es una funcionalidad solicitada desde hace mucho tiempo, por lo que algún día estará disponible directamente desde Firebug. Mientras tanto, puedes probar Firediff , una extensión para Firebug de Kevin Decker.

• ¿Cómo puedo generar todos los cambios que se han realizado en el CSS de un sitio dentro de firebug?

  Esa es una característica implementada en el Firediff de Kevin Decker .

Aquí hay una solución parcial. Después de realizar los cambios, haga clic en uno de los enlaces al archivo correspondiente. Este es el archivo original, por lo que deberá actualizar el archivo, que se encuentra debajo del botón de menú de opciones en la esquina superior derecha del panel de Firebug. Ahora tiene la página CSS modificada, que puede copiar y pegar. Obviamente, tendrás que hacerlo para cada archivo CSS.

Editar: parece que Mark Biek tiene una versión más rápida

Una manera muy fácil de "editar" su página es ir al sitio a través de su navegador de Internet. Guarde la página como html solo en su escritorio. Vaya a su escritorio y haga clic derecho en el nuevo archivo de página web y seleccione abrir con, elija el bloc de notas y edite la página desde allí, si sabe html será fácil. Una vez que haya realizado toda su edición, guarde el archivo y vuelva a abrir su página web, los cambios deberían estar allí si se realiza correctamente. Luego puede usar su nueva página editada y exportarla o copiarla a su ubicación remota

En realidad, Firebug es una herramienta de depuración y análisis: no es un editor y obviamente no se considera uno. La otra razón ya se mencionó: ¿cómo desea cambiar CSS, almacenado en un servidor al depurar una página web?