Edita CSS en un sitio activo, cambia a otra página y todos los cambios desaparecen. ¿Frustrante? Absolutamente. El panel Elements de Chrome DevTools es excelente para ediciones rápidas de estilos y marcado, pero hasta hace poco cualquier experimento duraba exactamente hasta el primer F5. Y volver al editor de código, reconstruir y redesplegar solo para probar una hipótesis es una pérdida de tiempo que nadie disfruta.

Afortunadamente, Chrome tiene un mecanismo integrado que resuelve este problema. Se llama Local Overrides y le permite guardar cambios localmente para que el navegador los aplique incluso después de refrescar la página. La funcionalidad apareció en Chrome 65, pero con los años ha ganado nuevas capacidades: ahora puede sobrescribir no solo archivos, sino también cabeceras de respuesta HTTP, y simular peticiones API directamente desde el navegador.

En esta guía, desde la activación hasta el seguimiento de ediciones: todo lo que un desarrollador necesita para trabajar productivamente con local overrides.

💡 Resumen rápido:

• Active Local Overrides en la pestaña Sources y elija una carpeta para almacenar los archivos sobrescritos.
• Edite CSS, JS o HTML en la pestaña Sources, los cambios se guardan automáticamente en local.
• Refresque la página o navegue a otra, Chrome sigue aplicando sus ediciones.
• Siga las diferencias en la pestaña Changes y gestione los archivos mediante Overrides.

Cómo activar local overrides

Abra DevTools (F12 o Ctrl+Shift+I) y vaya a la pestaña Sources. En la parte izquierda del panel busque la pestaña Overrides. Si no está visible, haga clic en el icono >> para mostrar las pestañas ocultas.

Haga clic en el botón Select folder for overrides. Chrome solicitará permiso para acceder al sistema de archivos, elija una carpeta existente o cree una nueva. Allí se almacenarán todos los archivos sobrescritos.

Tras seleccionar la carpeta, la casilla Enable Local Overrides se activará automáticamente. Observe: en la pestaña Network aparecerá un icono de advertencia, que indica que algunas peticiones de red pueden ser interceptadas y reemplazadas por versiones locales de archivos. Esto es normal y significa que las sobrescrituras están activas.

Cómo hacer y guardar cambios

Ahora la parte interesante: editar. Abra cualquier archivo a través de la pestaña Sources: busque el CSS o JavaScript necesario en el árbol de archivos de la izquierda y haga doble clic. Realice las ediciones y pulse Ctrl+S, el archivo se guardará en su carpeta local y Chrome comenzará a usar la versión local en lugar de la del servidor.

Un matiz importante: edite el marcado específicamente en la pestaña Sources, no en Elements. El panel Elements es conveniente para el trabajo visual con el DOM, pero los cambios de HTML realizados en él no se guardan como local overrides. Cambie a Sources, encuentre el archivo HTML necesario y edítelo allí, un punto morado junto al nombre del archivo confirmará que está sobrescrito.

Refresque la página o navegue a otra, Chrome seguirá aplicando sus ediciones. ¿Quiere restaurar el original? Elimine el archivo de la carpeta de sobrescrituras o desmarque Enable Local Overrides.

Merece una mención aparte la sobrescritura de cabeceras HTTP, una capacidad añadida en versiones posteriores de Chrome. Vaya a la pestaña Network, haga clic derecho sobre una petición y seleccione Override headers. Chrome creará un archivo .headers en su carpeta local donde puede establecer cabeceras de respuesta personalizadas. Esto es invaluable para probar políticas CORS, Content-Security-Policy y caché sin editar el servidor.

Cómo rastrear las ediciones realizadas

Cuando está sobrescribiendo activamente docenas de archivos, es fácil olvidar qué se cambió exactamente y dónde. Para esto, DevTools dispone de dos herramientas útiles.

La pestaña Overrides (en el panel Sources) muestra una lista completa de archivos sobrescritos agrupados por dominios. Desde aquí puede abrir cualquier archivo para seguir editándolo o eliminar una sobrescritura innecesaria, clic derecho → Delete.

La pestaña Changes se encuentra en la parte inferior de DevTools, junto a la pestaña Console. Muestra las diferencias entre el archivo original y su versión local, línea por línea, como en Git. Es conveniente para una auditoría rápida: qué cambió exactamente en cada archivo y cuánto difieren los cambios del original.

Consejo rápido: antes de refactorizar o experimentar en un sitio activo, tome una instantánea de los cambios mediante Changes, este es su "commit" local al que siempre puede volver.

Overrides como herramienta de pruebas de rendimiento

Además de la creación conveniente de prototipos, Local Overrides abre un escenario interesante para el análisis de rendimiento. Usted tiene la capacidad de cambiar código en un sitio no local y medir inmediatamente el impacto de esas ediciones en la velocidad de carga y el renderizado.

Por ejemplo, sospecha que un script de analítica de terceros está ralentizando la renderización de la primera pantalla. Sobrescriba la petición, reemplace el script original por un archivo vacío o una versión diferida, y ejecute Lighthouse. La diferencia en las métricas mostrará claramente si la optimización está justificada.

Otro escenario: las fuentes tipográficas. Sobrescriba el archivo CSS, eliminando @font-face para una fuente personalizada, y vea cuánto cambia el LCP (Largest Contentful Paint). O experimente con el orden de carga de scripts, mueva JS crítico del <head> al final del <body> y compare métricas.

Harry Roberts y Umar Hansa, reconocidos expertos en rendimiento web, publicaron screencasts con ejemplos claros de este enfoque. Sus demostraciones muestran: Local Overrides convierten el navegador en un entorno de pruebas para hipótesis de rendimiento donde cada iteración toma segundos, no minutos.

Si trabaja con un servidor de desarrollo local, el valor de las sobrescrituras es menor, usted ya controla las fuentes. Pero cuando necesita probar rápidamente una idea en producción o en un sitio ajeno sin acceso al código fuente, esta herramienta es indispensable.

⁉️🤔 Preguntas frecuentes

¿Se guardan las sobrescrituras locales después de cerrar el navegador?

Sí, todos los archivos se almacenan en la carpeta que eligió en el disco. Después de reiniciar Chrome, las sobrescrituras se retoman automáticamente, siempre que la casilla Enable Local Overrides permaneciera activada. Los archivos en sí no desaparecen, ya que son archivos normales en su sistema de archivos.

¿Puedo sobrescribir una respuesta de API (JSON), no solo archivos estáticos?

Sí, a partir de Chrome 117 esto funciona. En la pestaña Network, haga clic derecho sobre una petición y seleccione Override content, Chrome creará un archivo local con el cuerpo de la respuesta que puede editar. En la siguiente petición, el navegador devolverá su versión local en lugar de la respuesta del servidor.

¿Por qué mis cambios realizados en el panel Elements se pierden al refrescar?

El panel Elements edita el DOM en memoria, no los archivos fuente. Para que los cambios sobrevivan a F5, cambie a la pestaña Sources, encuentre el archivo correspondiente y edítelo allí. Guarde con Ctrl+S y Chrome creará una sobrescritura local.

¿Cómo comparto las sobrescrituras locales con un colega?

Simplemente envíe el contenido de la carpeta de sobrescrituras. El colega coloca los archivos en su carpeta, la especifica en DevTools mediante Select folder for overrides, y todas las ediciones se aplican en su equipo. Para el trabajo en equipo es conveniente mantener la carpeta de sobrescrituras en el repositorio Git del proyecto.

¿Puedo usar Local Overrides en Firefox u otros navegadores?

Firefox no tiene un análogo de Local Overrides, no se admite guardar cambios entre recargas. Edge, basado en Chromium, tiene la misma funcionalidad que Chrome ya que usa el código base común de DevTools. Brave y Opera también admiten sobrescrituras al ser navegadores Chromium.

Por qué necesita realmente las sobrescrituras locales

Local Overrides en Chrome DevTools no es solo una "característica conveniente". Es una forma de convertir el navegador en un entorno completo para la creación rápida de prototipos y la comprobación de hipótesis sin tocar el código de producción. Se ahorra los ciclos de «editar → construir → desplegar → comprobar» y obtiene resultados al instante.

Pruébelo ahora mismo: abra cualquier sitio, active las sobrescrituras y cambie el color de un encabezado. Refresque la página. ¿Ve que el color se mantuvo? De eso se trataba todo esto.