POLITICA DE COOKIES

Q2BSTUDIO.COM utiliza cookies técnicas, analíticas, de sesión y de publicidad con la finalidad de prestar un mejor servicio. No obstante, necesitamos su consentimiento explícito para poder utilizarlas. Así mismo puede cambiar la configuración de las cookies u obtener más información aquí .

Prueba de cambios del frontend en el navegador (con sobrescrituras de Chromium)

Acelera las pruebas de frontend y reduce dependencias del backend con Network Overrides de DevTools

Publicado el 09/09/2025

Antes perdía mucho tiempo esperando al equipo de backend para probar cambios en el frontend. Si necesitaba ver qué ocurre cuando una API devuelve un valor distinto o un error, tenía dos opciones lentas: pedir a backend que cambiara su respuesta o montar un servidor mock y configurar todo manualmente. Hasta que descubrí una herramienta escondida en DevTools llamada Network Overrides que es como un interruptor secreto que convierte el navegador en un mini servidor de pruebas.

Paso 1 Abrir las herramientas del navegador Hice clic derecho en la página e inspeccionar y cambié a la pestaña Sources. Ahí, en la columna izquierda, apareció la sección Overrides esperando a ser usada.

Paso 2 Crear el sandbox de sobrescrituras Al seleccionar Overrides DevTools pide elegir una carpeta local. Esa carpeta almacena las respuestas falsificadas. Elegí una carpeta vacía, permití el acceso al navegador y ya tenía mi sandbox listo para pruebas rápidas.

Paso 3 Capturar una respuesta Fui a la pestaña Network, refresqué la página y localicé la petición objetivo por ejemplo /api/config. Hice clic derecho y elegí Save for overrides. DevTools copió la respuesta real a la carpeta local para poder editarla.

Paso 4 Editar la respuesta Abriendo el archivo en Sources Overrides modifiqué valores, por ejemplo cambiar featureEnabled false por featureEnabled true para forzar comportamientos del frontend sin tocar el backend.

Paso 5 Refrescar y comprobar Tras refrescar la app empezó a comportarse como si el servidor hubiera devuelto la respuesta modificada. En Network aparece un icono junto a la petición indicando que fue sobrescrita.

Paso 6 Desactivar las sobrescrituras Para volver al comportamiento normal solo hay que desmarcar Enable Local Overrides en el panel Overrides y las respuestas vuelven a provenir del servidor real.

Consejos avanzados Mockear errores Edita el archivo de override y sustituye el cuerpo por un JSON de error por ejemplo { error : Internal Server Error } y en las cabeceras cambia 200 OK por 500 Internal Server Error para comprobar gestión de errores. Simular timeouts En Network haz clic derecho sobre la petición y elige Block request URL para que la app se comporte como si el servidor no respondiera, ideal para probar loaders y reintentos.

Ventajas Esta técnica acelera pruebas de frontend, facilita QA y reduce dependencias con backend. Para equipos que desarrollan aplicaciones complejas con aplicaciones a medida y software a medida es una herramienta imprescindible para iterar rápidamente.

Sobre Q2BSTUDIO En Q2BSTUDIO somos una empresa de desarrollo de software y aplicaciones a medida especialistas en inteligencia artificial, ciberseguridad y servicios cloud aws y azure. Ofrecemos soluciones integrales que incluyen servicios de inteligencia artificial, ia para empresas, agentes IA y servicios inteligencia de negocio como Power BI para transformar datos en decisiones. Si necesitas potenciar tu producto con software personalizado visita nuestra página de desarrollo de aplicaciones y software multiplataforma o conoce cómo aplicamos IA empresarial en nuestros servicios de inteligencia artificial.

Conclusión Network Overrides convierte tu navegador en un entorno de pruebas rápido y flexible. La próxima vez que esperes un cambio en una API prueba las sobrescrituras de Chromium y ahorra horas en el ciclo de desarrollo mientras tu equipo de backend sigue trabajando en sus entregables.

Fin del artículo, inicio de la diversión
Construyendo software juntos

Dando vida a tus ideas desde 2008

Diseñamos aplicaciones móviles y de escritorio innovadoras que cumplen con tus requisitos específicos y mejoran la eficiencia operativa.
Más info
Cuéntanos tu visión
Sea cual sea el alcance, podemos convertir tu idea en realidad. Envíanosla y charlemos sobre tu proyecto o una colaboración futura.
Contáctanos
artículos destacados
Live Chat
Enviado correctamente.

Gracias por confiar en Q2BStudio