reemplazo lite google fire descargar complemento chrome bug css firebug

css - lite - google firebug



¿Por qué no puedo guardar los cambios de CSS en Firebug? (23)

CSS-X-Fire

Me sorprende que todavía no se haya incluido en esta pregunta, pero probablemente porque es nuevo y el autor no tuvo tiempo de promocionarlo.

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

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

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

Una vez instalado, hará un seguimiento de todos tus cambios de Firebug y podrás aplicarlos con un simple clic dentro de IDE.

FireFile

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

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

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

¿Alguien ha encontrado una mejor solución?

EDITAR: Soy consciente de que el código está almacenado 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 está usando el archivo .css Firefox descargado del servidor, sabe exactamente qué líneas de archivos está editando. No veo 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 control remoto con).

Intenté buscar en ubicaciones temporales, y seleccioné Archivo > Guardar ... y experimenté 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.

Acabamos de presentar Backfire, un motor de JavaScript de código abierto que le permite guardar los cambios de CSS realizados en el inspector Firebug y Webkit en el servidor. La biblioteca incluye un ejemplo de implementación de C # sobre 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/

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

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

La 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 inicial, pero debería funcionar bien.

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 tendrá que actualizar el archivo, que se encuentra debajo del botón de menú de opciones en la esquina superior derecha del panel Firebug. Ahora tiene la página css modificada, que puede copiar y pegar. Obviamente, tendrás que hacerlo por cada archivo css.

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

Citado de las preguntas frecuentes de Firebug :

Editando páginas

  • ¿Puedo guardar en la fuente los cambios que realicé 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 sacar los encurtidos y agregar mostaza a un sándwich de restaurante: puedes disfrutar el resultado, pero el próximo cliente en el restaurante seguirá obteniendo encurtidos y sin mostaza.

    Esta es una funcionalidad largamente solicitada, por lo que algún día estará disponible directamente desde Firebug. Mientras tanto, puedes probar Here , 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 Here Kevin Decker.

Creo que lo más cercano que va a obtener es ir al modo de edición en Firebug y copiar y pegar el contenido del archivo CSS.

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

El complemento Web Developer te permite guardar tus ediciones. Me gustaría combinar la edición de Firebug con la función Guardar de Web Developer.

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

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

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?

Firebug trabaja en el CSS calculado (el que obtiene al tomar el CSS en los archivos y aplicar la herencia, etc. además de los cambios realizados con JavaScript). Esto significa que probablemente no pueda usarlo directamente para incluirlo en un archivo HTML, que sea específico del navegador / versión (a menos que solo le interese 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 algunos JS a Firebug para poder exportar ese CSS a un archivo de texto.

Me he estado preguntando lo mismo desde hace bastante tiempo,
simplemente desgarrador cuando tu en-the-moment-freestyle-css''ing con firebug es volado en pedazos por
una recarga accidental o lo que sea ....

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 te permite ver / guardar lo que firebug, es decir, tu, has estado haciendo,
pero también, opcionalmente, hacer un seguimiento de los cambios realizados por la página en sí ... si es así o usted lo desea.

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

Here hay un enlace al desarrollador (no se lo menosprecie por primera vez, tal vez también diríjase directamente al repositorio de Add-On de Mozilla) .

Me preguntaba por qué no puedo seleccionar y copiar el texto que tengo frente a mí. Especialmente cuando otros dicen que solo puedes "seleccionar y copiar". Resulta que puedes , solo tienes que iniciar el arrastre fuera de cualquier texto (es decir, en el margen superior o a la izquierda del texto) ya que cualquier mousedown, ya sea un clic o arrastrar, en cualquier texto invoca inmediatamente la propiedad editor. También puede hacer clic en el texto exterior para obtener un cursor (incluso si no está siempre visible), que luego puede mover con las teclas de flecha y seleccionar el texto de esa manera.
El texto copiado al portapapeles carece de sangría, desafortunadamente, pero al menos le evita transcribir manualmente todo el contenido del archivo CSS. Simplemente haga que su programa diff ignore los cambios en el espacio en blanco cuando compara con el original.

Podría 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.

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

Personalmente preferiría pedirle al equipo de desarrollo de firebug que me 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 ha creado.

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:

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

En este caso, usted proporcionaría los detalles del FTP y la ubicación de CSS / HTML / Javascript y Firebug luego actualizaría estos archivos cuando guarde los cambios. Incluso puede ubicar los archivos 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 el mismo comportamiento se utilizaría para hacer coincidir y verificar los archivos. El acceso al sistema de archivos local se puede realizar a través de FireFTP si es necesario.

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

En este caso, debería implementarse algo así 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 asociados, así como guardar los detalles del FTP como ya lo hace FireFTP.

Puedes vincular firebug para eclipsar con fireclipse y luego guardar el archivo del eclipse

Sé que esto no responde a su pregunta, pero sorprendentemente, la "barra de herramientas del desarrollador" 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 algún modo, por ejemplo, agregando un atributo de estilo en alguna parte, también se guardará.

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

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 CSS de Firebug al IDE donde los cambios pueden aplicarse o descartarse.

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

Escenario 1: Usted 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. CSS-X-Fire detectará todos los selectores coincidentes en el proyecto y le permitirá decidir cuál debe ser modificado.

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. A CSS-X-Fire no le importan los nombres de los archivos, solo trata con los nombres de los selectores de CSS y sus propiedades.

Los anteriores son ejemplos de escenarios donde CSS-X-Fire sobresale. Dado que funciona con los archivos fuente, y conoce la estructura del lenguaje, también ayuda a encontrar duplicados desconocidos para Firebug, jump-to-code, etcétera.

CSS-X-Fire es de código abierto bajo la licencia de Apache 2. Proyecto inicio: CSS-X-Fire

Tuve este problema para siempre, y finalmente decidí que no deberíamos editar cosas en el inspector web y crear algo para eso ( https://github.com/viatropos/design.io ).

Una mejor solución:

El navegador refleja automáticamente los cambios de CSS sin volver a cargar 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. En primer lugar, puede editar un elemento individual que puede no tener un selector de id . Entonces, incluso si pudieras copiar / pegar el CSS generado desde el inspector web, tendría que generar un id para determinar el alcance del css. Algo como:

#element-127 { background: red; }

Eso comenzaría a hacer que tu CSS sea un desastre.

Puede .space cambiando solo estilos para un selector existente (el selector de clase .space en la imagen del inspector 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 este bloque de CSS a este lugar, o lo que sea.

Prefiero solo atenerme a TextMate.

Lo ideal sería simplemente escribir el CSS en su editor de texto y hacer que el navegador refleje los cambios sin tener que volver a cargar la página . De esta forma estarías escribiendo tu CSS final mientras haces 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 forma, podría comenzar a crear mixins como box-shadow() , que abstraerá las complejidades, lo que el inspector web definitivamente no podría hacer.

Hay algunas cosas por el estilo que hacen esto, pero en realidad no lo optimizo en mi opinión.

  • LiveReload : presiona css en el 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 mac, pero refresca el navegador cada vez que guardas.

No tener la capacidad de personalizar fácilmente la forma en que estos trabajos es la razón principal por la que no los usé.

Junté https://github.com/viatropos/design.io específicamente para resolver este problema, y ​​lo hago así:

  1. El navegador refleja css / js / html / etc en cualquier momento que guardes, sin volver a cargar la página
  2. Puede manejar cualquier plantilla / idioma / marco (Stylus, Less, CoffeeScript, Jade, Haml, etc.)
  3. Está escrito en JavaScript, y puedes combinar extensiones muy rápido en JavaScript.

De esta forma, cuando necesite hacer esos pequeños cambios a CSS, puede decir, establecer el color de fondo, presionar guardar, ver no, no exactamente, ajustar el tono en 10, guardar, no, ajustar en 5, guardar, se ve bien.

La forma en que funciona es observando cada vez que guarda un archivo (en el nivel del sistema operativo), procesa el archivo (aquí es donde funcionan las extensiones) y envía los datos al navegador a través de websockets, que luego se manejan (el lado del cliente de la extensión).

No enchufar ni nada, pero tuve problemas con este tema durante mucho tiempo.

Espero que ayude.

Una forma 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 la página web y seleccione abrir con, elija el bloc de notas y edite la página desde allí, si conoce html, será fácil. Una vez completada la edición, 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

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.

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

Cambie CSS y GUARDAR en el sistema de archivos local con las herramientas de desarrollo de Chrome

Lo intenté ahora y funciona de maravilla resaltando las líneas modificadas. 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 te importa cambiar el navegador mientras editas tus archivos CSS. Ya hice el cambio por el momento, pero realmente me encantaría tener esta funcionalidad integrada en Firebug. :)

[Actualización 1]

Hoy acabo de ver este video: la edición en vivo de Firefox CSS en Sublimetext (trabajo en progreso) parece realmente prometedor.

[Actualización 2]

Si usa 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