Exportar cambios de CSS desde el inspector (webkit, firebug, etc.)


104

Cuando trabajo con CSS, a menudo pruebo en un navegador, por ejemplo, Chrome, hago clic con el botón derecho en un elemento, hago clic en Inspeccionar elemento y edito el CSS allí mismo. El uso de las teclas de flecha para cambiar cosas como el margen y el relleno hace que alinear las cosas sea muy fácil.

No es demasiado difícil tomar esos cambios y aplicarlos al archivo CSS, pero sería genial si pudiera hacer clic con el botón derecho en el selector en el inspector y seleccionar "exportar" o "copiar", y tener el contenido disponible en mi portapapeles.

Existe algo como esto?


No debería ser difícil escribir una extensión de Safari / Chrome para esto. Utilice el menú contextual para permitir al usuario hacer clic con el botón derecho en un elemento, luego tomar la propiedad currentStyle del objeto, ¿tal vez enviar al portapapeles?
tbeseda

Tal vez debería haber ido a buscar antes de comentar aquí. Posible duplicado de stackoverflow.com/questions/162644/…
MiffTheFox

Oh bien. Me encantaría ver algunas respuestas para chrome / web-kit, pero esas son algunas respuestas excelentes. Gracias @MiffTheFox
hookedonwinter

Echa un vistazo a Backfire: blog.quplo.com/2010/08/… No lo he probado, pero suena prometedor.
Bryan Downing

1
@BryanDowning Hecho! Eso es super asombroso. Gracias por el ping.
hookedonwinter

Respuestas:


77

He encontrado la respuesta a esto, al menos a partir de Chrome v14.

En la sección Elementos, simplemente haga clic en el enlace "nombre de archivo: número de lino" junto a las reglas de CSS. El archivo CSS que aparece contendrá todas las modificaciones.

Este lugar exactamente:

https://cdn.tutsplus.com/net/uploads/2013/06/dev-tools-regular-view.jpg


4
tenga en cuenta que esto también funciona para los nuevos selectores de CSS que se agregan en el Inspector a través del +ícono
Día de Jonathan

1
Esto solo funcionará para los cambios que se hayan agregado a la hoja de estilo del inspector. No funcionará para los cambios realizados en los conjuntos de reglas de los selectores de clases existentes.
ian.pvd

49

En Chrome, puede hacer clic con el botón derecho en un archivo CSS en la pestaña Fuentes y hacer clic en "Modificaciones locales"

Esto le muestra todos sus cambios locales. Cada revisión tiene una marca de tiempo y puede retroceder a cualquier revisión anterior.

Consulte la sección Historial de revisión y edición en vivo de este tutorial.


1
Parece que solo puede revertir hasta su última referencia. Por lo que perderá los cambios si accidentalmente se actualiza / cerrar pestaña etc
tomblah

¿Cómo funciona esto con paquetes modernos como webpack donde todo su CSS está empaquetado en un solo archivo?
Mattgabor

No veo estas "Modificaciones locales", ¿esta respuesta está desactualizada?
Luke Pighetti

@LukePighetti Lo veo en v79 (12/2019) si abro el archivo fuente que me interesa> clic derecho> modificaciones locales. Eso abre una pestaña en el "cajón de la consola" titulada "cambios" que tiene un menú a la izquierda con todos mis archivos modificados. También puede acceder a él haciendo clic en los puntos suspensivos del menú> más herramientas> cambios.
xr280xr

11

Firediff es un complemento de Firebug que rastrea los cambios realizados en Firebug. Registra todo lo que harás en el panel HTML (genial), pero también tu uso breve de la extensión de la barra de herramientas del desarrollador web (no tan genial), di Shift-Ctrl-F para obtener una información del tamaño de fuente en px.

He visto una extensión de Firebug en Chrome pero no la probé, uso Firediff con Firefox.


Complemento genial. Definitivamente me acerca a donde quiero. Voy a esperar y ver si aparece algo mejor (completo en CSS con formato de copia al portapapeles, por ejemplo).
hookedonwinter

7

Creé una extensión de Chrome que hace exactamente esto.

Se llama StyleURL : toma los cambios de CSS que realizó en Chrome Inspector y genera CSS válido como diff: https://chrome.google.com/webstore/detail/styleurl/emplcligcppnlalfjknjbanolhlnkmgp

Aquí hay un ejemplo en el que agregué "padding-bottom: 50px" a esta página: Diferencia de ejemplo de StyleURL

Es de código abierto y también en GitHub: https://github.com/Jarred-Sumner/styleurl-extension


¡Herramienta muy útil!
DanTheMann

2
Todos los enlaces que no funcionan aceptan github. Por favor actualice, suena prometedor
Mirosław

Este proyecto ahora está abandonado. Es una pena :-(
Damon Hill

6

En Chrome también existe la pestaña Cambios en el cajón de la consola que muestra todas las modificaciones de CSS. No es una exportación, pero al menos es muy conveniente comprender rápidamente qué ha cambiado.

Captura de pantalla de la pestaña Cambios en las herramientas de desarrollo de Chrome


1
Esta respuesta proporciona una solución de navegador integrada para ver los cambios sin necesidad de instalar extensiones adicionales. Realiza un seguimiento de los cambios realizados en cualquier hoja de estilo (o JS) como una diferencia detallada con archivos separados y muestra adiciones, eliminaciones y cambios de caracteres individuales línea por línea. Si bien no hay exportación, es una solución mejor hoy que la mejor respuesta actual de 2011.
ian.pvd

Hay mucho ruido en estas respuestas después de 9 años, pero esta es fácilmente la mejor respuesta. Lo único que falta es una forma rápida de exportar la diferencia para que pueda procesar los cambios automáticamente en un script o IDE en lugar de tener que hacer una comparación y ajustar manualmente una hoja de estilo.
Sami Fouad

5

He sugerido este producto en SO antes (no estoy afiliado a ellos de ninguna manera).

http://www.skybound.ca/

Producto excelente. Suena exactamente como lo que estás buscando y mucho más.

EDITAR: Varias otras respuestas aquí han mencionado la capacidad de Google Chrome para vincularse a sus archivos locales (lo cual es muy, muy bueno). ¡Mira las otras respuestas!


Parece bastante impresionante. Lástima que sean $ 80. Gracias @Bryan, buen descubrimiento
hookedonwinter

2
La respuesta aquí ha cambiado en los últimos años. Chrome DevTools ahora le permite volver a escribir sus cambios en el archivo . ¡Tiempos emocionantes!
Cloudworks

4

Si edita CSS externo, puede arrastrar su última revisión fuera del panel de Recursos a cualquier editor de texto que admita DnD (consulte http://www.webkit.org/blog/1463/web-inspector-styles-enhanced/ , la sección "Cambios persistentes" para obtener más detalles). También puede revertir los cambios de CSS a cualquier versión anterior del recurso de la hoja de estilo (en el menú emergente del botón derecho de cualquier revisión de la hoja de estilo).


4

Como mencionó Cloudworks, la respuesta a esto ha cambiado. Esto ahora se puede lograr bastante bien con la extensión Chrome DevTools Autosave . Esta herramienta realiza un seguimiento de los cambios de CSS y JavaScript realizados dentro de la consola de herramientas de desarrollo de Chrome y los guarda en archivos locales. Para obtener instrucciones para instalar y configurar la extensión, consulte la guía escrita por @addyosmani en su blog, aquí .

ingrese la descripción de la imagen aquí

También hay un práctico screencast que detalla bastante bien la extensión.



1

Tanto Firefox como Chrome admiten esta función ahora, pero vale la pena señalar que en algunas plataformas, si no todo Chrome no la muestra de forma predeterminada, debe habilitar la vista "Cambios" para verla (en mi Kubuntu Linux 20.04 no lo era por defecto), así es como puede habilitarlo: vaya al botón "Personalizar y controlar DevTools" en la barra de Herramientas para desarrolladores> "Más herramientas"> "Cambios" , luego aparecerá la pestaña en el botón:

ingrese la descripción de la imagen aquí

En Firefox no es necesario habilitarlo, pero si vienes del mundo Chrom * puede ser difícil encontrarlo. Simplemente verifique la última sección a la derecha en la pestaña "Inspector":

ingrese la descripción de la imagen aquí


0

Si está utilizando las herramientas de desarrollo de stock de Firefox, puede editar el CSS directamente en el cuadro de diálogo de herramientas: haga clic en el botón de la ventana CSS (ese es el botón en la parte superior con el {}símbolo) y edite su CSS directamente. Se actualizará en tiempo real en el navegador y cuando haya terminado, simplemente cópielo y péguelo directamente en su archivo css. ¡Agradable!


0

Para agregar una respuesta para Safari específicamente, es posible.

Cuando edita CSS en la sección Estilos en el Inspector para un archivo CSS existente, puede presionar Cmd-Spara volver a guardar el archivo completo con los cambios. Sin embargo, si está utilizando un metalenguaje como Sass / preprocesador / generando su CSS con empaquetado, etc., no creo que esto realmente resuelva ese problema, aunque puede ser posible con mapas fuente CSS.

Cuando edita CSS en la parte superior de la sección Estilos, debajo Style Attributepara agregar estilos en línea (no vinculados a un archivo CSS existente), no parece posible exportar fácilmente todos esos cambios. Por ahora, solo estoy copiando y pegando las modificaciones manualmente para cada elemento.

Los documentos oficiales de Apple están un poco anticuados, pero se encuentran aquí: Tutorial del inspector web: edición de código para cambiar su página web .


0

En Chrome, en el inspector css puede hacer clic y mantener presionado el botón +, luego elegir agregar los cambios a la hoja de estilo del inspector. No es tan conveniente como editar directamente en sus selectores css, pero todo lo que escriba estará en inspector-stylesheet.css


-1

Mi producto LIVEditor, que pronto estará en fase beta, hace exactamente esto.

Para que pueda entenderlo fácilmente, puede pensar en el inspector de Firebug integrado en su editor de texto.

De esa manera, no tiene que volver a realizar los cambios manualmente en su editor de código después de ajustarlo con las herramientas de desarrollo de Firebug o Webkit.


8
Suena genial. Lástima que sea para Windows.
KPM

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.