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

Cuando estoy trabajando 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 ahí. El uso de las teclas de flecha para cambiar cosas como margen y relleno hace que alinear las cosas sea muy fácil.Exportar cambios de CSS de inspector (webkit, firebug, etc.)

No es demasiado difícil tomar esos cambios y aplicarlos al archivo CSS, pero sería genial si pudiera simplemente 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.

¿Algo como esto existe?

Fuente

2010-07-28 hookedonwinter

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

@tb ¡Veámoslo! – hookedonwinter

Creo que este es un duplicado de una pregunta existente, pero no estoy seguro. – MiffTheFox

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

Mientras está en la sección de Elementos, simplemente haga clic en el enlace "filename: linenumber" al lado de las reglas de CSS. El archivo CSS que aparece contendrá todas las modificaciones.

Este lugar exactamente:

Fuente

2011-10-10 17:54:50

cuenta que esto también funciona para los nuevos selectores CSS que se agregan en el Inspector a través del icono '' + –

muchas gracias por esto! – serdarsenay

Firediff es un complemento de Firebug que rastrea cambios hecho en Firebug. Registra todo lo que hará en el panel HTML (excelente) pero también su breve uso de la extensión Web Developer Toolbar (no tan buena), digamos Shift-Ctrl-F para obtener una información de tamaño de fuente en px.

He visto una extensión de Firebug en Chrome pero no lo he probado, utilizo Firediff con Firefox.

Fuente

2010-07-28 16:53:58 FelipeAls

Plugin genial. Definitivamente me acerca más a donde quiero. Voy a esperar y ver si aparece algo mejor (por ejemplo, copie el CSS con formato de copia al portapapeles). – hookedonwinter

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

http://www.skybound.ca/

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

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

Fuente

2010-08-05 02:26:55

Se ve bastante impresionante. Lástima que sea $ 80. Gracias @Bryan, buen hallazgo – hookedonwinter

La respuesta aquí ha cambiado en los últimos años. Chrome DevTools ahora [le permite volver a escribir los cambios en el archivo] (https://developers.google.com/chrome-developer-tools/docs/settings#workspace). ¡Tiempos emocionantes! – cloudworks

Si edita CSS externo, a continuación, puede arrastrar su última revisión del panel Recursos en cualquier editor de texto compatible con NOM (ver http://www.webkit.org/blog/1463/web-inspector-styles-enhanced/, la "persistente Cambios "sección para más detalles.) también puede revertir los cambios de estilo CSS a cualquier versión anterior del recurso de estilo (en el botón derecho del ratón menú emergente de cualquier revisión de estilo.)

Fuente

2011-12-14 13:47:30

Mi en-beta-pronto producto LIVEditor hace esto exactamente.

Para que pueda entenderlo fácilmente, puede pensar que Firebug's inspector es incrustado en su editor de texto.

De esa manera usted no tiene que hacer los cambios manualmente de nuevo en su editor de código después de ajustar usando Firebug o de WebKit herramientas de desarrollo.

Fuente

2012-07-11 09:42:16

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

En Chrome, puede hacer clic en un archivo CSS en la ficha Fuentes y haga clic en "modificaciones locales"

Esto demuestra que todos los cambios locales.Cada revisión tiene una marca de tiempo y puede retroceder a cualquier revisión anterior.

See the Live Editing and Revision History sección de este tutorial.

Fuente

2012-11-01 19:37:56

Parece que solo puede retroceder hasta su última remisión. Por lo tanto, perderá los cambios si accidentalmente actualiza/cierra la pestaña, etc. – tomblah

Según lo mencionado por 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 en la consola de Chrome Developer Tools y los guarda de nuevo en archivos locales. Para obtener instrucciones sobre cómo instalar y configurar la extensión, consulte la guía escrita por @addyosmani en su blog, here.

enter image description here

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

Fuente

2015-03-02 19:31:32

Puede guardar su CSS guardado al escribirlos en su inspector (en Chrome). El problema es que cada cambio se guarda automáticamente y no hay manera de desactivar esta función, como se indica en http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/ y Disable automatic saving of CSS changes in Chrome Developer Tools.

Fuente

2015-05-03 11:56:41

Si está utilizando las herramientas stock dev Firefox puede editar el CSS directamente en el diálogo de herramientas - haga clic en el botón de visualización de CSS (que es el botón en la parte superior con el símbolo {}) y editar el CSS directamente. Se actualizará en tiempo real en el navegador y cuando haya terminado simplemente copie y pegue directamente en su archivo css. ¡Bonito!

Fuente

2016-05-26 08:23:29

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

Respuesta

Cuestiones relacionadas