Usar las DevTools dentro del panel
La atención se la lleva la vista multidispositivo. La razón para dejar de saltar al navegador son las DevTools que hay debajo.
Simulator Panel trae consola, red y almacenamiento integrados, junto con perfilado de rendimiento y accesibilidad. Casi todo el mundo usa la vista previa de dispositivos y no abre nunca estas herramientas, lo cual es una pena, porque responden justo a las preguntas que plantea la vista previa.
La red primero, siempre
Cuando una página se porta mal a un ancho y no a otro, la pestaña de red lo resuelve en segundos. Buscas dos cosas: una petición que falló en silencio y una petición que se disparó dos veces.
La segunda es la que sorprende. Un componente que se vuelve a renderizar al redimensionar suele volver a pedir, y el único sitio donde se ve es un panel de red con dos filas idénticas. La página sigue funcionando, así que nadie lo nota hasta que llega la factura o el límite de tasa.
La consola a cada ancho, no solo a uno
Los errores no son independientes del ancho. Un diseño que se desmonta en un punto de ruptura pequeño puede lanzar donde el de escritorio no: una medición que devuelve cero, un elemento que aún no está en el DOM a ese tamaño.
Así que lee la consola concretamente en la vista del móvil pequeño. Es la que se salta la gente y donde se acumulan los errores.
Almacenamiento, para el fallo que solo te pasa a ti
La herramienta de almacenamiento zanja el «a mí me funciona». La mitad de esos casos es un valor rancio en el almacenamiento local de una compilación anterior: un flag de funcionalidad, un token en caché, un aviso descartado que no volverá jamás.
Bórralo y recarga antes de dedicar una hora a un fallo que ningún visitante nuevo verá.
El perfilado que conviene hacer una vez
Antes de lanzar, ejecuta el perfilado de rendimiento y accesibilidad al ancho más pequeño que soportes. No en escritorio: el móvil pequeño es donde una página pesada se vuelve realmente lenta y donde fallan las áreas táctiles.
Una salvedad que conviene decir claro: esto mide la página en tu navegador y en tu máquina. Te habla de la página, no de un Android de hace cuatro años en un tren. Toma una buena puntuación como necesaria, no como suficiente.
Preguntas que la gente hace
¿Por qué revisar la consola a más de un ancho?
Los errores no son independientes del ancho. Un diseño que se desmonta en un punto de ruptura pequeño puede lanzar donde escritorio no: una medición que devuelve cero, un elemento que aún no está en el DOM a ese tamaño.
¿Cómo detecto una petición duplicada?
La pestaña de red muestra dos filas idénticas. Los componentes que se re-renderizan al redimensionar suelen volver a pedir; la página sigue funcionando y nadie lo nota hasta que llega un límite de tasa o una factura.
¿Basta una buena puntuación de perfilado antes de lanzar?
No. Mide la página en tu navegador y tu máquina. Es necesaria pero no suficiente: un móvil barato real en una red real es la prueba que no puede sustituir.
