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

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?

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:

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.

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.

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:

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

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.

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!

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

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

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

Con Workspaces puede guardar su CSS a medida que los escribe en su inspector (en Chrome). El problema es que todos los cambios se guardan automáticamente y no hay forma de deshabilitar esta función, como se indica en http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/ y deshabilitar el guardado automático de cambios CSS en las herramientas de desarrollo de Chrome. .

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:

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":

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!

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 .

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

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.