Chrome DevTools 151: usa la IA para revisar una web antes de entregarla
Chrome DevTools 151 añade ayuda de IA y herramientas para agentes: ejemplos prácticos para revisar CSS, consola, accesibilidad y formularios antes de entregar una web.
Chrome DevTools 151 trae una novedad interesante para quien entrega webs reales: más ayuda de IA dentro de las herramientas del navegador y mejoras en el servidor MCP de DevTools. Dicho en sencillo: el navegador empieza a ser un entorno donde un agente puede mirar la página, leer errores, capturar pantalla y ayudarte a revisar cosas concretas.
La parte útil no es pedirle “optimiza mi web” y esperar magia. La parte útil es darle tareas pequeñas, comprobables y ligadas a problemas habituales antes de publicar.
Primer ejemplo: una landing que en móvil tiene el botón principal demasiado bajo o con poco contraste. Puedes pedir algo así:
Revisa esta página como si fueras un usuario en móvil.
Mira si el CTA principal se ve sin hacer scroll, si tiene contraste suficiente y si algún bloque tapa el botón.
Devuélveme solo tres cambios concretos con el selector CSS afectado.Ahí DevTools puede ayudar porque no se queda en una opinión sobre una captura. Puede inspeccionar estilos, ver qué regla está ganando por especificidad y señalar si el problema viene de un padding, un z-index, un color o una media query.
Segundo ejemplo: errores de consola antes de entregar. En una web pequeña es fácil ignorar un aviso porque “todo se ve bien”. Pero un formulario que falla en Safari, una imagen que no carga o un script de analítica roto pueden afectar a contactos y medición. Una petición práctica sería:
Abre la página de contacto, envía el formulario con campos vacíos y después con datos de prueba.
Revisa errores de consola, peticiones fallidas y mensajes visibles para el usuario.
No propongas rediseños: dime qué falla, en qué paso y cómo reproducirlo.Tercer ejemplo: accesibilidad básica. No hace falta convertir esto en una auditoría infinita. Para una web corporativa, yo empezaría por etiquetas de formularios, orden de encabezados, foco visible, textos alternativos e interacción con teclado.
Comprueba navegación con teclado en menú, formulario y botones.
Marca elementos sin etiqueta, foco invisible o enlaces cuyo texto no explique el destino.
Prioriza lo que puede impedir enviar un formulario o entender una página de servicio.El valor está en convertir la IA en una segunda revisión técnica, no en una autoridad final. Si propone tocar CSS, se revisa el cambio. Si detecta un error, se reproduce. Si sugiere una mejora de accesibilidad, se comprueba con el navegador y, cuando proceda, con Lighthouse o una revisión manual.
Para una web de negocio, mi checklist sería corta: home, una página de servicio, contacto, un formulario real y móvil. Si es tienda, añade ficha de producto, carrito y checkout en modo prueba. DevTools con IA puede acelerar esa revisión, pero el criterio sigue siendo humano: que la web cargue, se entienda, se pueda usar y no pierda contactos por fallos evitables.
Fuentes