¿Cómo guardar los cambios CSS del panel Estilos de las Herramientas para desarrolladores de Chrome?

¿Cómo guardar los cambios de CSS del panel Estilos de las Herramientas para desarrolladores de Google Chrome ?

En el sitio web de la herramienta se menciona que podemos ver todos los cambios en el panel de recursos

Pero estoy trabajando localmente en un archivo CSS, pero los cambios no se muestran en el panel de Recursos para mí

Por cierto, ¿conoces algún complemento o herramienta para guardar los cambios de CSS de las herramientas para desarrolladores de Chrome? Sé que para Firebug hay muchos https://stackoverflow.com/search?q=firebug+CSS+changes+save

Puede guardar sus cambios de CSS desde Chrome Dev Tools. Chrome ahora le permite agregar carpetas locales a su área de trabajo. Después de permitir el acceso de Chrome a la carpeta y agregar la carpeta al espacio de trabajo local, puede asignar un recurso web a un recurso local.

• Navegue hasta el panel Orígenes de las Herramientas para desarrolladores, haga clic con el botón derecho en el panel izquierdo (donde se enumeran los archivos) y seleccione Agregar carpeta al espacio de trabajo . Puede acceder a una hoja de estilo en el panel Fuentes rápidamente haciendo clic en la hoja de estilo en la parte superior derecha de cada regla CSS para un elemento seleccionado en el panel Elementos.

• Después de agregar la carpeta, deberá darle acceso a Chrome a la carpeta.

• A continuación, debe asignar el recurso de red al recurso local.

• Después de volver a cargar la página, Chrome ahora carga los recursos locales para los archivos asignados. Para simplificar las cosas, Chrome solo le muestra los recursos locales (para que no se confunda si está editando el recurso local o el recurso de red). Para guardar sus cambios, presione CTRL + Scuando edite el archivo.

PD

Es posible que deba abrir los archivos asignados y comenzar a editar para que Chrome aplique la versión local (fecha 201604.12).

El escritor y desarrollador tecnológico de DevTools defiende aquí.

A partir de Chrome 65, Local Overrides es una forma nueva y liviana de hacer esto. Esta es una característica diferente a los espacios de trabajo.

Configurar anulaciones

1. Ir al panel de fuentes .
2. Vaya a la pestaña Anulaciones .
3. Haga clic en Seleccionar carpeta para anulaciones .
4. Seleccione en qué directorio desea guardar sus cambios.
5. En la parte superior de su ventana gráfica , haga clic en Permitir para otorgar a DevTools acceso de lectura y escritura al directorio.
6. Haz tus cambios. En el GIF a continuación, puede ver que el background:rosybrowncambio persiste en las cargas de página.

Cómo anula el trabajo

Cuando realiza un cambio en DevTools, DevTools guarda el cambio en una copia modificada del archivo en su computadora. Cuando vuelve a cargar la página, DevTools sirve el archivo modificado, en lugar del recurso de red.

La diferencia entre anulaciones y espacios de trabajo

Workspaces está diseñado para permitirle usar DevTools como su IDE. Asigna su código de repositorio al código de red, utilizando mapas de origen. El beneficio real es que si está minimizando su código, o está usando un código que necesita ser transpilado, como SCSS, entonces los cambios que realiza en DevTools (generalmente) se asignan nuevamente a su código fuente original. Las anulaciones, por otro lado, le permiten modificar y guardar cualquier archivo en la web. Es una buena solución si solo desea experimentar rápidamente con los cambios y guardar esos cambios en las cargas de la página.

Las nuevas versiones de Chrome tienen una función llamada espacios de trabajo que soluciona este problema. Puede definir qué rutas en su servidor web corresponden a qué rutas en su sistema, luego editar y guardar con solo ctrl-s.

Ver: http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/

Sé que es una publicación antigua, pero la guardo de esta manera:

1. Ir al panel de fuentes.
2. Haga clic en Mostrar navegador (para mostrar el panel del navegador a la izquierda).
3. Haga clic en el archivo CSS que desee. (Se abrirá en el editor, con todos los cambios que haya realizado)
4. Haga clic derecho en el editor y guarde sus cambios.

También puede ver las modificaciones locales para ver sus revisiones, característica muy interesante. También trabaje con guiones.

Estás buscando en la sección incorrecta de "Recursos".

No está en "Almacenamiento local", está en "Marcos":

La captura de pantalla anterior muestra una diferencia de los estilos originales contra las nuevas modificaciones realizadas en las herramientas de desarrollo. Puede hacer clic con el botón derecho en el elemento en el panel izquierdo y guardarlo nuevamente en el disco.

La extensión Tincr Chrome es más fácil de instalar (no es necesario ejecutar el servidor de nodo) ¡Y también viene con LiveReload como funcionalidad lista para usar! ¡Habla sobre edición bidireccional! :)

Sitio web de Tin.cr

Enlace de Chrome Web Store

Artículo de blog de Andy

Ahora que Chrome 18 se lanzó la semana pasada con las API necesarias, publiqué mi extensión de Chrome en la tienda web de Chrome. La extensión guarda automáticamente los cambios en CSS o JS en las herramientas de desarrollador en el disco local. Ve a verlo.

Para su información, si está utilizando estilos en línea o modificando el DOM directamente (por ejemplo, agregando un elemento), los espacios de trabajo no resuelven este problema. Eso es porque el DOM está viviendo en la memoria y no hay un archivo real asociado con el estado activo del DOM.

Para eso, me gusta tomar una instantánea "antes" y "después" del dom desde la consola: copy(document.getElementsByTagName('html')[0].outerHTML)

Luego lo coloco en una herramienta de diferencias para ver mis cambios.

Artículo completo: https://medium.com/@theroccob/get-code-out-of-chrome-devtools-and-into-your-editor-defaf5651b4a

Para responder la última parte de su pregunta sobre cualquier extensión que pueda guardar cambios, hay una revisión

Le permite guardar los cambios de Chrome Dev Tools directamente en GitHub. Desde allí, puede configurar un enlace posterior a la recepción en GitHub para actualizar automáticamente su sitio web.

Mientras no hayas estado pegando el CSS en element.style:

1. Ve a un estilo que hayas agregado. Debería haber un enlace que diga inspector-stylesheet:

2. Haga clic en eso y se abrirá todo el CSS que ha agregado en el panel de fuentes

3. Cópialo y pégalo, ¡sí!

Si usted ha estado utilizando element.style:

Puede hacer clic derecho en su elemento HTML, hacer clic en Editar como HTML y luego copiar y pegar el HTML con los estilos en línea.

ACTUALIZACIÓN 2019: como otras respuestas están un poco desactualizadas, agregaré una actualizada aquí. En la última versión no es necesario asignar la carpeta de Chrome al sistema de archivos.

Entonces, supongamos que tengo una carpeta web que contiene archivos HTML, CSS, JS en el escritorio que quiero actualizar cuando hago cambios en Chrome: =

1) Necesitaría un servidor local en ejecución como nodo, etc., alternativamente, esta extensión vscode crea el servidor para usted: extensión VSCode del servidor en vivo , instálela, ejecute el servidor.

2) cargue la página html en Chrome desde el servidor local en ejecución.

3) Abra devTools-> Sources-> Filesystem-> Add folder to workspace

4) Agregue la carpeta que se utiliza para ejecutar el servidor local. ¡No se requiere mapeo adicional en el último Chrome! Ta-da!

Más sobre esto Editar archivos con espacios de trabajo

Tenga en cuenta que los cambios realizados en la pestaña de estilos NO se reflejarán en los archivos del sistema de archivos. En su lugar, debe ir a devtools-> source-> your_folder y luego realizar los cambios allí y volver a cargar la página para ver el efecto.