html - pagina - ¿Cómo guardar los cambios CSS del panel Estilos de las Herramientas para desarrolladores de Chrome?
guardar cambios en css (11)
¿Cómo guardar los cambios 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, ¿conoce complementos, herramientas para guardar cambios de css de las herramientas de desarrollo de Chrome? Sé que para Firebug hay muchos https://stackoverflow.com/search?q=firebug+CSS+changes+save
Siempre y cuando no hayas pegado el CSS en element.style :
- Vaya a un estilo que haya agregado. Debería haber un enlace que diga inspector-stylesheet:
Haga clic en eso y se abrirá todo el CSS que haya agregado en el panel de orígenes
Copia y pega - ¡yay!
Si ha estado usando element.style :
Simplemente 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.
Ahora hay una API para extensiones DevTools para recibir notificaciones sobre los recursos que se cambian, para que pueda crear una extensión que se integrará con su IDE de elección o simplemente publicar el contenido de recursos en un servidor WebDAV:
Ahora que Chrome 18 fue lanzado la semana pasada con las API requeridas, 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 desarrollo en el disco local. Ve a verlo.
Defensor técnico y desarrollador de DevTools aquí.
A partir de Chrome 65, las Anulaciones locales es una forma nueva y ligera de hacerlo. Esta es una característica diferente de los Espacios de trabajo.
Configurar anulaciones
- Ir al panel de Fuentes .
- Ir a la pestaña de Anulaciones
- Haga clic en Seleccionar carpeta para modificaciones .
- Seleccione en qué directorio desea guardar sus cambios.
- En la parte superior de su ventana gráfica, haga clic en Permitir para dar a DevTools acceso de lectura y escritura al directorio.
- Haga sus cambios En el GIF a continuación, puede ver que el
background:rosybrowncambio debackground:rosybrownpersiste en todas las cargas de página.
Cómo reemplaza 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. Correlaciona su código de repositorio con el código de red, usando mapas fuente. El beneficio real es si está minificando su código, o usando código que necesita ser transferido, como SCSS, luego los cambios que realiza en DevTools (generalmente) se vuelven a mapear en 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 página.
Está buscando en la sección incorrecta de "Recursos".
No está en "Almacenamiento local", está debajo de "Marcos":
La captura de pantalla anterior muestra una diferencia de los estilos originales frente a las nuevas modificaciones realizadas en los devtools. Puede hacer clic con el botón derecho en el elemento en el panel izquierdo y guardarlo en el disco.
FYI, si usa estilos en línea o modifica el DOM directamente (por ejemplo, agrega 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 de "antes" y "después" de dom desde la consola: copy(document.getElementsByTagName(''html'')[0].outerHTML)
Luego lo coloco en una herramienta diff para ver mis cambios.
Artículo completo: https://medium.com/@theroccob/get-code-out-of-chrome-devtools-and-into-your-editor-defaf5651b4a
La extensión de Chrome Tincr es más fácil de instalar (no es necesario ejecutar el servidor de nodo) Y también viene con la funcionalidad LiveReload como una caja. ¡Habla sobre la edición bidireccional! :)
Las nuevas versiones de Chrome tienen una función llamada espacios de trabajo que resuelve 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/
Para responder a la última parte de su pregunta acerca de las extensiones que pueden guardar los cambios, existe una hotfix
Te 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.
Puede guardar sus cambios de CSS desde Chrome Dev Tools. Chrome ahora te permite agregar carpetas locales a tu espacio de trabajo. Después de permitir el acceso de Chrome a la carpeta y agregarla al espacio de trabajo local, puede asignar un recurso web a un recurso local.
- Navegue hasta el panel Orígenes de Herramientas del desarrollador, haga clic con el botón derecho en el panel izquierdo (donde se enumeran los archivos) y seleccione Agregar carpeta al área de trabajo . Puede acceder rápidamente a una hoja de estilo en el panel Orígenes haciendo clic en la hoja de estilo en la parte superior derecha de cada regla de CSS para un elemento seleccionado en el panel Elementos.
Después de agregar la carpeta, tendrás que 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 muestra los recursos locales (para que no te confundas si estás editando el recurso local o de red). Para guardar sus cambios, presione
CTRL + Sal editar 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).
Sé que es una publicación anterior, pero la guardo de esta manera:
- Ir al panel de Fuentes.
- Haga clic en Mostrar navegador (para mostrar el panel del navegador a la izquierda).
- Haga clic en el archivo CSS que desee. (Se abrirá en el editor, con todos los cambios que haya realizado)
- 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 scripts.