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


194

¿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

ingrese la descripción de la imagen aquí

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

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

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


Ahora hay una API para extensiones de DevTools para recibir notificaciones sobre los recursos que se están cambiando, por lo que puede crear una extensión que se integrará con su IDE de elección o simplemente publicar el contenido del recurso en un servidor WebDAV: developer.chrome.com/extensions/ …
caseq

9
Creo que esta pregunta y sus respuestas son obsoletas, ya que Chrome desde entonces ha movido su funcionalidad de ahorro de CSS modificado al panel "Fuentes" . La funcionalidad es bastante confusa y algo engañosa: exploré esta funcionalidad de Chrome modificada para guardar CSS con cierto detalle en esta publicación relacionada de Stack Overflow: stackoverflow.com/questions/16005435/…
ChaseMoskal

Posible duplicado de los cambios
mems

La anulación local es una nueva forma de hacerlo, comenzando en Chrome 65. La anulación es una característica diferente a las áreas de trabajo.
Kayce Basques

Respuestas:


137

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.

ingrese la descripción de la imagen aquí

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

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

ingrese la descripción de la imagen aquí

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


44
Solo quiero agregar en la parte inferior de la hoja de estilo de mi tema cualquier diferencia de CSS que haya creado mientras edito mi CSS en vivo. Eso es. ¿Hay alguna manera de llegar a un 'diff' que sea CSS que pueda copiar y pegar? Vea esta otra pregunta: stackoverflow.com/questions/21871535/… La historia de fondo es que estoy editando CSS que pertenece a un tema, solo puedo agregar CSS en la parte inferior de la hoja de estilo, no editar nada arriba. Lo mismo se aplica si alguien solo puede agregar un archivo custom.css a un sitio web con sus anulaciones CSS.
Caroline Schnapp

Paul-irish, Interesado en cómo hacer que el diff / patch solo cambie localmente CSS (sin cambios remotos). SaveAs no resuelve realmente el problema de la flexibilidad y la aceleración ...
Denis Denisov

Ahora Chrome está guardando archivos locales automáticamente (sin presionar CTRL + S) ¿cómo evitar eso?
Uzair Ali

No funciona para mi Después de guardar el archivo CSS en la carpeta local, asignar de forma remota a local y volver a cargar, todos los cambios se han ido. :( editar el archivo local en el panel Elementos y guardar el archivo en las fuentes tampoco persiste en mis cambios.
crujiente

2
Parece que hay un error en el inspector de Chrome 46 que al volver a cargar la página, el archivo local asignado solo se vuelve a aplicar cuando lo cambia en el panel Orígenes. Incluso puede cambiarlo en un editor externo, pero debe abrirlo y enfocarlo en el panel Orígenes.
crujiente

28

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.

anula la demostración

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.


55
esto funciona, pero sigue siendo demasiado complicado. Preferiría que solo pudieras habilitar esto para la sesión actual. En mi humilde opinión, una casilla de verificación como "Mantener cambios de recursos para la sesión actual" encajaría mejor en un flujo de trabajo de desarrolladores web. Los cambios persistentes no son algo que un desarrollador web necesita en su negocio diario e incluso puede causar dolor de cabeza adicional si olvida eliminar estas anulaciones y vuelve unas semanas más tarde. Las anulaciones están bien para los usuarios finales, no para la depuración. Todavía votado.

Estoy de acuerdo con el otro comentario. No es intuitivo en absoluto y no guarda todos los cambios, por lo que no es realmente tan útil. Sería mejor para nosotros simplemente escribir una pequeña extensión de Chrome escuchando los cambios y guardándolos. Eso si hay una API o proceso que podamos conectar ... aún no lo he buscado.
Carles Alcolea

Lo siento señor ¿Ya no está liveSCSS en desuso y ya no está desarrollado? consulte stackoverflow.com/a/57622797/10189759
Luk Aron el

@Kayce Basques ¿qué pasa con el desarrollo de extensiones de Chrome? Cuando está inyectando hojas de estilo (y js), todas estas características no funcionan, ¿verdad? Cualquier solución para ese tipo de desarrollo (para acelerar las actualizaciones css / js de las herramientas de desarrollo de Chrome a los archivos de extensión de origen local). Gracias
Andrew

19

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/


Creo que OP quiere ver los cambios que realizó en la pestaña Estilos del panel Elementos. Estos cambios no están necesariamente vinculados a un archivo fuente específico.
Ron Inbar

13

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).ingrese la descripción de la imagen aquí
  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.


No pude localizar "Show Navigator"
NickyLarson

@NickyLarson, edité mi respuesta para incluir dónde está este botón.
Guilherme de Jesus Santos

Lea la pregunta original nuevamente. Él no está editando un archivo CSS. Está realizando cambios en la pestaña Estilos del panel Elementos.
Ron Inbar

11

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.


Nada dentro de Marcos también, para mí. Agregué una captura de pantalla más en cuestión
Jitendra Vyas el

No estoy seguro de cómo tus "marcos" pueden estar vacíos. Eso suena roto. Pruebe esto en la compilación de Canary (puede instalarlo junto con su versión actual): tools.google.com/dlpage/chromesxs
thirtydot

Canary no puede abrir. También encontré esta solución justin.my/2011/04/why-my-google-chrome-canary-cannot-run pero todavía no funciona. Recibí este mensaje cuando finalizó la instalación k.min.us/iefbE2.jpg
Jitendra Vyas

2
A partir de este fin de semana (21/05/2012), creo que esta solución ya no funciona. Solía ​​hacer lo mismo que mostrabas para escribir fragmentos grandes de nuevos CSS (no viejos o ediciones). Pero ahora, al menos para mí, al hacer clic en ese archivo HTML solo se muestra el HTML sin mostrar las nuevas reglas CSS. ¿Sigue funcionando para usted, y si no tiene una nueva solución para lograrlo?
Nucleon

esto tampoco me funciona en Chrome 48. ¿De todos modos, aún tengo que hacer esto?
DMTintner


8

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.


4

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.

Imagen de herramienta de diferencias

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


1

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.


1

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:

ingrese la descripción de la imagen aquí

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

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


1
Y si no puede encontrar esa hoja de estilo del inspector porque se perdió buscando a través del dom, simplemente Ctrl + P (o CMD + P) mientras DevTools está enfocado y comienza a escribir "inspec" ... aparecerá de inmediato, y luego solo entra. i.imgur.com/WSWcbh8.png
Carles Alcolea

1

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.

ingrese la descripción de la imagen aquí

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

ingrese la descripción de la imagen aquí

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.
ingrese la descripción de la imagen aquí


1
Pero OP preguntó específicamente sobre los cambios realizados en la pestaña Estilos ...
Ron Inbar
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.