¿Por qué no puedo guardar los cambios de CSS en Firebug? [cerrado]
https://stackoverflow.com/questions/162644
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Firebug es la herramienta más conveniente que he encontrado para editar CSS, así que, ¿por qué no hay un simple " guardar " opción para CSS?
Siempre me encuentro haciendo ajustes en Firebug, luego vuelvo a mi archivo .css original y repleto los ajustes.
¿Alguien ha encontrado una mejor solución?
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 al crear mis propios sitios web.
Firebug solo está utilizando el archivo .css que Firefox descargó del servidor, sabe exactamente en qué líneas se editan los archivos. No puedo ver por qué no hay un " exportar " o " guardar " Opción, que le permite almacenar el nuevo archivo .css. (Que luego podría reemplazar el remoto con).
He intentado buscar en ubicaciones temporales y seleccionar Archivo > Guarda ... y experimenta con las opciones de salida en Firefox, pero aún no he encontrado una manera.
EDIT 2: El grupo de discusión oficial tiene muchas preguntas , pero no respuestas.
Solución
Llegué aquí buscando exactamente esta función, es decir, poder guardar las propiedades de CSS editadas 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 debes registrarte y es una extensión pagada ...) Renuncié a Firefox + Firebug y busqué algo similar para Google Chrome. Adivina qué ... acabo de encontrar esta excelente publicación que muestra una buena manera de hacer que esto funcione (integrado en Chrome - no hay necesidad de extensiones adicionales):
Cambiar CSS y GUARDAR en el sistema de archivos local utilizando Chrome Developer Tools
Lo probé ahora y funciona muy bien al resaltar 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 te sirva de ayuda si no te importa cambiar de navegador mientras editas tus archivos CSS. Ya hice el cambio por ahora, pero me encantaría tener esta funcionalidad integrada en Firebug. :)
[Actualización 1]
Hoy acabo de ver este video: Edición en vivo de CSS de Firefox en Sublimetext (trabajo en progreso) Parece prometedora.
[Actualización 2]
Si está usando Visual Studio 2013 con Web Essentials podrá sincronizar CSS automáticamente como se muestra en este video:
Otros consejos
Hace tiempo que me estoy preguntando lo mismo,
acaba de desgarrarte cuando tu in-the-moment-freestyle-css'ing con firebug se quema en pedazos por
una recarga accidental o lo que sea ....
Para mis propósitos y 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, i. mi. tu has estado haciendo pero también puede realizar un seguimiento opcional de los cambios realizados por la propia página ... si así lo desea.
Muy agradecido por no tener que volver a escribir, o volver a imaginar y luego volver a escribir, todas las reglas css que hago ...
Aquí hay un enlace al desarrollador (no se desestime por primera vez, tal vez solo y diríjase directamente a el repositorio de complementos de Mozilla .
El complemento para desarrolladores 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 la etiqueta " Stick " para evitar perder sus cambios cuando cambia la pestaña para hacer otra navegación. Si es posible, use solo una pestaña para editar y otra ventana de Firefox las búsquedas relacionadas, el correo web, etc.
CSS-X-Fire
Me sorprende que aún no esté incluido en esta pregunta, pero probablemente porque es nuevo y el autor no tuvo tiempo de promocionarlo aún.
Se llama CSS-X-Fire y es un complemento para JetBrains serie de IDE: 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 plugin. Cuando comience, le pedirá que le diga que instalará un complemento para Firefox para realizar la integración entre Firebug y el IDE. Si no puede instalar el complemento, use la técnica de arrastrar y soltar para instalarlo.
Una vez instalado, rastreará todos tus cambios desde Firebug y podrás aplicarlos con un simple clic dentro de IDE.
FireFile
FireFile es una alternativa que requiere que agregues un pequeño archivo php al lado del servidor para poder cargar el archivo css modificado.
Acabo de lanzar un complemento de firebug en el recinto de seguridad de Mozilla Addon que podría hacer lo que quieras: https://addons.mozilla.org/en/firefox/addon/52365/
En realidad guarda el " tocado " archivos css a petición para su servidor web (mediante comunicación con un script de PHP de servicio web de un solo archivo).
Documentación se puede encontrar en mi página de inicio o en la página de complementos
Apreciaría cualquier prueba, informe de errores, comentarios, calificaciones, discusión sobre esto, ya que todavía está en su versión beta temprana, pero ya debería funcionar bien.
Puede vincular firebug a eclipse con fireclipse y luego guarde el archivo desde eclipse
Creo que lo más cerca que estarás es entrar en el modo de edición en Firebug y copiar y pegar el contenido del archivo CSS.
Acabamos de presentar Backfire, un motor javascript de código abierto que te permite guardar en el servidor los cambios de CSS realizados en Firebug y el inspector de Webkit. La biblioteca incluye un ejemplo de implementación en C # de cómo guardar los cambios entrantes en tu CSS.
Aquí hay una entrada 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 tu pregunta, pero sorprendentemente, el clon Firebug de Internet Explorer 8 "barra de herramientas de desarrollador" " (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. al agregar un atributo de estilo en algún lugar, esto también se guardará.
No es particularmente útil si estás usando Firebug para jugar con CSS como todo el mundo, pero es un paso en la dirección correcta.
Propongo una solución que implica 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, debe proporcionar los detalles de FTP y la ubicación de CSS / HTML / Javascript y Firebug actualizaría estos archivos cuando guarde los cambios. Incluso puede ubicar los archivos y luego solicitarle que verifique que tiene el archivo correcto. Si los nombres de los archivos 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 a Firebug la ubicación de la carpeta local del sitio web y se usaría el mismo comportamiento para comparar y verificar los archivos. El acceso al sistema de archivos local podría realizarse a través de FireFTP si es necesario.
Trabajar en un sitio web alojado de forma remota sin acceso a FTP
En este caso, se debería 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 a las que están asociadas, además de guardar los detalles de FTP como lo hace FireFTP.
Soy el autor de CSS-X-Fire que Sorin Sbarnea también publicó amablemente en este hilo. Supongo que estoy un poco tarde;)
CSS-X-Fire emite cambios de propiedad de CSS desde Firebug al IDE donde se pueden aplicar o descartar los cambios.
Esta solución tiene algunas ventajas sobre la mayoría de las otras herramientas existentes que solo conocen los nombres de archivos y el contenido descargado por el navegador (consulte el comentario de NickFitz en la publicación original).
Escenario 1: tiene un sitio web (proyecto) que tiene varios 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. Se pueden combinar desde varios archivos y los nombres de los archivos pueden cambiar. CSS-X-Fire no se preocupa por los nombres de los archivos, solo se ocupa de los nombres del selector CSS y sus propiedades.
Los ejemplos anteriores muestran ejemplos de situaciones en las que CSS-X-Fire se destaca. Ya que funciona con los archivos de origen y conoce la estructura del lenguaje, también ayuda a encontrar duplicados que no conoce Firebug, salto a código, etcétera.
CSS-X-Fire es de código abierto bajo la licencia de Apache 2. Página principal del proyecto: http://code.google.com/p/css-x-fire /
FireFile
Firebug fue creado para detectar un problema para no ser un depurador. pero puede guardar los cambios si agrega una nueva herramienta que integra Firebug con los cambios guardados. 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 agregando un pequeño archivo PHP al lado del servidor.
Dado que Firebug no está funcionando en su servidor pero toma el CSS del sitio y lo almacena localmente y le muestra el sitio con esos cambios locales.
Use el editor de 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 te permite guardar tu CSS en un archivo de texto.
Usa 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 usa un solo archivo javascript, y el paquete de código fuente tiene un ejemplo de implementación de servidor .NET que es fácilmente transportable a otras plataformas.
También tuve este problema para siempre, y finalmente decidí que no deberíamos editar cosas en el inspector web y construimos 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 presionas guardar en tu 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 demora demasiado en volver a cargar la página.
Hay 2 problemas principales con este enfoque. Primero, se le permite editar un elemento individual que puede no tener un selector id . Entonces, incluso si pudieras copiar / pegar el CSS generado desde el inspector web, tendría que generar un id para encuadrar el css. Algo como:
#element-127 {
background: red;
}
Eso comenzaría a hacer que tu css sea un desastre.
Puede evitarlo cambiando solo los estilos de un selector existente (el selector de clase .space en la imagen del inspector de webkit a continuación).
Aun así, el segundo problema. La interfaz para esa cosa es bastante aproximada, es difícil hacer grandes cambios, como si quisieras intentar copiar este bloque de css en este lugar, o lo que sea, realmente rápido.
Prefiero quedarme 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ías escribiendo tu css final mientras haces los pequeños cambios.
El siguiente nivel sería escribir en un lenguaje de CSS dinámico, como Stylus, Less, SCSS, etc., y actualizar el navegador con el CSS generado. De esta manera, puedes comenzar a crear mixins como box-shadow () , que abstrae las complejidades, lo que el inspector web definitivamente no pudo hacer.
Hay algunas cosas por ahí que hacen esto, pero nada realmente lo simplifica en mi opinión.
- LiveReload : empuja css al navegador sin actualizar cuando presionas guardar, pero es una aplicación mac , por lo que sería difícil de personalizar.
- CodeKit : también es una aplicación mac, pero actualiza el navegador cada vez que guardas.
No tener la capacidad de personalizar fácilmente la forma en que funcionan es la razón principal por la que no los usé.
Puse juntos 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 guarde, sin volver a cargar la página
- Puede manejar cualquier plantilla / idioma / marco (Stylus, Less, CoffeeScript, Jade, Haml, etc.)
- Está escrito en JavaScript, y puedes juntar las extensiones muy rápido en JavaScript.
De esta manera, cuando necesite hacer esos pequeños cambios en CSS, puede decir, configurar el color de fondo, presionar guardar, ver no, no del todo, ajustar el tono en 10, guardar, no, ajustar por 5, guardar, se ve bien.
La forma en que funciona es observando cada vez que guardas un archivo (en el nivel de 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 computed CSS (el que obtiene al tomar el CSS de los archivos y aplicar la herencia, etc. más los cambios realizados con JavaScript). Esto significa que probablemente no podría usarlo directamente para incluirlo en un archivo HTML, que es específico del navegador / versión (a menos que solo se preocupe por Firefox). Por otro lado, mantiene un registro de lo que es original y lo que se calcula ... Creo que no debería ser muy difícil agregar algunos 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 can , solo tiene que iniciar el arrastre fuera de cualquier texto (es decir, en el margen superior o a la izquierda del texto) como cualquier ratón, ya sea es un clic o arrastrar - en cualquier texto invoca inmediatamente el editor de propiedades. También puede hacer clic fuera del texto para obtener un cursor (incluso si no siempre está visible) que luego puede moverse con las teclas de flecha y seleccionar el texto de esa manera.
El texto copiado en el portapapeles carece de sangría, desafortunadamente, pero al menos le impide transcribir manualmente todo el contenido del archivo CSS. Simplemente haga que su programa de diferencias ignore los cambios en los espacios en blanco cuando se compara con el original.
Podría escribir su propio archivo de script de servidor que toma 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 por el nuevo.
Escribir el Javascript que se conecta a la información de firebug y recupera los datos útiles sería la parte difícil.
Personalmente, prefiero pedirle al equipo de desarrollo de firebug que realice 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 en las preguntas frecuentes sobre Firebug :
Edición de páginas
¿Puedo guardar en la fuente los cambios que hice en la página web que estoy viendo?
Ahora mismo no puedes. Como escribió John J. Barton en el grupo de noticias:
Editar en Firebug es algo así como sacar los pepinillos y agregar mostaza a un sándwich de restaurante: puedes disfrutar del resultado, pero el próximo cliente en el restaurante seguirá recibiendo pepinillos y no mostaza.
Esta es una funcionalidad solicitada desde hace tiempo, por lo que algún día estará disponible directamente desde Firebug. Mientras tanto, puede probar Firediff , una extensión para firebug por Kevin Decker.
¿Cómo puedo generar todos los cambios realizados en el CSS de un sitio dentro de firebug?
Esa es una función implementada en 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 parte superior derecha del panel de firebug. Ahora tiene la página css modificada, que puede copiar & amp; pegar. Obviamente, tendrás que hacerlo para cada archivo css.
Editar: se parece a Mark Biek tiene una versión más rápida
Una forma muy fácil de " editar " su página es ir al sitio a través de su navegador de internet. Guarda la página como html solo en tu escritorio. Vaya a su escritorio y haga clic con el botón derecho en el nuevo archivo de la página web y seleccione abrir con, elija el bloc de notas y edite la página desde allí, si sabe que html será fácil. Una vez que haya terminado de editar, guarde el archivo y vuelva a abrir su página web, los cambios deberían estar allí si se hacen 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 que sea uno. La otra razón ya se mencionó: ¿cómo quieres cambiar CSS, almacenado en un servidor al depurar una página web?
