En un artículo anterior habíamos visto cómo usar el inspector de código para modificar un tema. Sin embargo el inspector de código en algunos navegadores incluye una funcionalidad de overrides que nos facilitará hacer cambios sin perderlos al refrescar el navegador.
Generalidades
Actualmente todos los navegadores incluyen una herramienta de Inspector de código, tal como se muestra en la siguiente imagen:
- En Mac y Linux: Cmd + Opción + i
- En Windows : Ctrl + Shift + i
Algunos navegadores como Google Chrome, Microsoft Edge o Brave, incluyen una funcionalidad de overrides, esto nos permite agregar código CSS o Javascript sin que se pierda al refrescar el navegador ya que se guardará una copia del archivo modificado en una ruta en tu máquina local.
¿Como crear la carpeta de overrides?
Desde el Inspector de Código, en tab de Sources, selecciona la opción de overrides, tal como se muestra en la imagen.
Luego crea la carpeta de overrides, usa la opción: Select folder for overrdies, te permitirá elegir una ruta local y crear o usar una carpeta existente.
El navegador solicitará acceso completo a la carpeta seleccionada, por lo que debes permitir el acceso.
Con esto tendremos el override habilitado y veremos que aparece la ruta de nuestra carpeta en la sección de override, tal como se muestra en la siguiente imagen:
Overrides para código CSS
Primero tienes que buscar el archivo que vas a editar, en la siguiente imagen usando el inspector vemos que el código CSS para ese elemento HTML seleccionado se encuentra en el archivo style.css
Simplemente usando el enlace al archivo style.css nos llevará al tab de Sources
Desde el tab sources podemos grabar el archivo recuperado para overrides, tal como se muestra en la siguiente imagen:
Al realizar esto veremos que se ha creado una ruta del archivo style.css que incluye una referencia al sitio web pero que esta almacenada localmente.
Ahora ya podremos hacer las modificaciones al archivo .css del overrides, grabándolo y luego refrescando el navegador para ver los cambios.
Overrides para código Javascript
El proceso es bastante similar a como viste anteriormente para los archivos .css, simplemente que en este caso buscaremos llevar al tab Sources un archivo javascript, podemos usar la opción de pages para buscar el archivo .js y luego grabarlo para overrides, tal como se muestra en la siguiente imagen.
Verás que se creará una ruta local al archivo .js que modificarás, tal como se muestra en la siguiente imagen, para ejecutar el código javascript guarda los cambios y luego refresca el navegador.
Conclusión
Si estas haciendo modificaciones a un sitio web que esta en producción y las modificaciones son de CSS o Javascript, puedes probar estas modificaciones con el inspector de código de tu navegador, y para no perder los cambios que vas haciendo puedes usar la funcionalidad de overrides.
Evidentemente una vez termines las modificaciones tienes que guardarlas en los archivos correspondientes en el servidor.
¿Aún con dudas?, en el siguiente video se detalla los puntos anteriores.
Artículos Relacionados
(1 votos, promedio: 5,00 de 5)
Cargando…