una - Exportar cambios CSS desde el inspector(webkit, firebug, etc.)
inspeccionar elemento mozilla (10)
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 margen y 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 fantástico si pudiera hacer clic con el botón derecho en el selector en el inspector y seleccionar "exportar" o "copiar", y tener los contenidos disponibles en mi portapapeles.
Existe algo como esto?
Como se mencionó en cloudworks, la respuesta a esto ha cambiado. Esto ahora se puede lograr bastante bien con la extensión de autoguardado de Chrome DevTools . 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 @addyosmani instalar y configurar la extensión, consulte la guía escrita por @addyosmani en su blog, here .
También hay un útil screencast que detalla la extensión bastante bien.
Con Workspaces puede guardar su CSS mientras los escribe en su inspector (en Chrome). El problema es que cada cambio se guarda automáticamente y no hay manera 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 de CSS en las Herramientas de desarrollo de Chrome .
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 Edición en tiempo real e Historial de revisiones de este tutorial.
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:
He sugerido este producto en SO antes (no estoy afiliado a ellos de ninguna manera).
Producto excelente. Parece exactamente lo que estás buscando y mucho más.
EDITAR: 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!
Mi producto LIVEditor en beta pronto lo hace exactamente.
Para que lo entiendas fácilmente, puedes pensar que el inspector de Firebug está incrustado en tu editor de texto.
De esta forma, no tendrá que realizar los cambios manualmente de nuevo en el editor de código después de ajustarlo con las herramientas de desarrollo de Firebug o Webkit.
Para agregar una respuesta específica para Safari, es posible.
Cuando edite CSS en la sección Estilos en el Inspector para un archivo CSS existente, puede presionar Cmd-S para volver a guardar el archivo completo con los cambios. Sin embargo, si está usando un meta lenguaje como Sass / preprocesador / generando su CSS con empaquetado, etc., no creo que esto realmente resuelva ese problema, aunque puede ser posible con los mapas fuente de CSS.
Cuando edita CSS en la parte superior de la sección Estilos, bajo Style Attribute para 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 de Web Inspector - Edición de código para cambiar su página web .
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 sus 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).
Si está utilizando las herramientas de desarrollo de acciones 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 copie y pegue directamente en su archivo css. ¡Bonito!
Firediff es un complemento de Firebug que rastrea los cambios realizados 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 la probé, utilizo Firediff con Firefox.