¿Por qué no puedo guardar los cambios de CSS en Firebug? [cerrado]

143

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.

Dean Rather
fuente
Aquí hay una publicación que hice al grupo hace un tiempo: groups.google.com/group/firebug/browse_thread/thread/…
NickFitz
¿Has probado cssUpdater.com ? Con él editas en FireBug, presiona el botón "Sincronizar ahora" para transferir todos tus cambios a los archivos CSS originales.
Jhonte
2
Firebug tiene una forma específica de hacer esto. Después de hacer algunos cambios en CSS añadiendo reglas en la vista CSS en el lado derecho, haga clic en la dirección del elemento de estilo al que se hace referencia en el extremo derecho, luego elija Edición en vivo en el menú desplegable del menú superior (NO EDITAR FUENTE), haga clic en en Live Edit y copia / pega al contenido de tu corazón.
Chris Like
Recarga automática en el navegador al cambiar el archivo local. De esa manera puedo quedarme en mi editor. Pero solo funciona localmente.
Nils Lindemann

Respuestas:

27

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

ingrese la descripción de la imagen aquí

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

Leniel Maccaferri
fuente
1
Hay otra opción, con Chrome Chrome puede habilitar una asignación directa de archivos js y css, consulte este artículo para obtener instrucciones sobre cómo habilitar el experimento del espacio de trabajo canario devcoma.blogspot.it/2013/01/…
Matteo Conta
Muy agradable @contam. ¡Las cosas realmente están evolucionando! Gracias por la actualización. :)
Leniel Maccaferri
@LenielMacaferi [Actualización 2]: Nunca pude obtener los elementos esenciales de la web para actualizar el CSS actual, ¿hay alguna configuración que deba establecer?
Arvand
104


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) .

Morten Bergfall
fuente
Una herramienta tan pequeña, tantas horas hombre ahorradas, todos somos ganadores hoy ;-) Saludos al autor de FireDiff, parece que no atraviesa las aguas de SO. Tareas: autor del correo, agradecimiento expreso
Morten Bergfall
El autor es Kevin Decker. Podría ser este usuario: stackoverflow.com/users/238459/kevin-decker
Jonathan Parker
Sí, es este usuario, ya que el enlace a su sitio es el mismo.
Jonathan Parker el
1
dulce madre de Dios. Esto es asombroso.
Jason
3
Dios mío, ¡he explotado totalmente geek!
Glicerina
15

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.

texto alternativo

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.

Ceniza
fuente
1
Yo uso el complemento de desarrollador web. Pero solo intenté buscar la opción y no pude encontrarla. ¿Cómo guardo las nuevas hojas de estilo?
Dean Rather
Cuando edito el CSS en Firebug, los cambios no se sincronizan con la barra de herramientas de WebDeveloper "Editar CSS". ¿Cómo los sincronizas?
Gerold Meisinger
13

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.

Tobias Strebitzer
fuente
13

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.

Ventana CSS-X-Fire dentro del 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.

Sorin
fuente
Buen hallazgo! Pero me pregunto si hay algún conducto similar entre Firebug y otros IDE o editores de Mac que el de IntelliJ.
Henrik
@hced Su deseo se cumplió, verifique FireFile.
Sorin
10

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

Craig Angus
fuente
1
¿Puedes vincular FireBug a eclipse? ¡Asombroso! FireBug y Eclipse son las principales herramientas que uso en el desarrollo. Voy a mirar en esto. ¡Gracias!
Dean Rather
9

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.

Mark Biek
fuente
Esa era la solución que estaba buscando ... Me encantan las respuestas obvias que nunca antes había notado. Cthulu maldice a StackOverflow en todas sus formas, por la locura que evita.
OhkaBaka
2
BAH ... eso no funciona ... esa es la fuente original ... y borró todos mis cambios.
OhkaBaka
7

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/

Rahul
fuente
Parece increíble. ¿Y para el WebKit Web Inspector también? ¡Hurra!
jocap
3

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.

Rahul
fuente
3

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.

Jonathan Parker
fuente
Suena genial, lo probaré!
Dean Rather
3

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/

Ronnie Kolehmainen
fuente
2

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.

Ólafur Waage
fuente
2

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.

Mathletics
fuente
2

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).

Inspector de webkit

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.

Lance Pollard
fuente
1

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.

Ryszard Szopa
fuente
1
Esto no es del todo cierto. Firebug te muestra todos los estilos que se aplican a un elemento, incluido de dónde provienen, y solo los atraviesa si han sido reemplazados por una regla más específica / posterior / importante. Le permite cambiar / agregar reglas en cualquier nivel. También tiene la opción de ver solo los estilos calculados, pero la vista predeterminada es mostrar todos los estilos.
SpoonMeiser
1

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.

León
fuente
1

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ó.

mrk
fuente
1

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 .

James
fuente
0

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

sblundy
fuente
Qué tal combinar: use la solución de Mark Biek para copiar y pegar, pero use la solución de Eduardo Molteni y péguela en las herramientas de desarrollador y guarde. Eso es lo que voy a hacer por ahora. ¡Sería bueno si esto se agregara a FB!
Rob
0

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

mjk
fuente
1
Es cierto, pero creo que la pregunta es cómo guardar archivos CSS con los cambios realizados en Firebug aplicados a ellos.
Henrik
-4

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?

MADMapa
fuente
No estoy seguro de por qué te han votado negativamente, pero de mi parte: una de las principales razones por las que la gente sigue pidiendo esta característica casi imposible es que no aprecian la diferencia entre un depurador y un editor.
NickFitz
44
Firebug fue creado para resolver un problema de no ser un depurador. Si hay otro problema que necesita solución, ¿por qué no se puede agregar a Firebug?
Jonathan Parker el
3
Claro, Firebug es un depurador, pero ¿por qué te permite editar CSS, por ejemplo? ¿Quién dice que un depurador no debería poder guardar el resultado de la salida alterada? Mi impresión es que Firebug es tantas cosas para tanta gente. Para algunos, lo principal es usar el depurador y entrar y salir de las funciones, etc.
Henrik