El «secreto» de DevTools para los desarrolladores de la web móvil

Adil Aliyev

Sigue

29 de noviembre, 2018 – 3 min read

¡Un post especial de un miembro del equipo de ingeniería de Samsung Internet, Adil!

Las herramientas de desarrollo proporcionadas por los navegadores son el compañero constante de muchos desarrolladores web. Podemos utilizarlas para inspeccionar nuestro código, informarnos de los errores y ejecutar diversas auditorías. DevTools en Chrome también puede proporcionar una manera de ajustar el tamaño de la pantalla para que coincida con su dispositivo móvil. Esta característica es utilizada por muchos desarrolladores con frecuencia. Uno de los puntos útiles de esta característica es que puedes elegir entre los dispositivos móviles más populares, y DevTools ajustará el tamaño de la pantalla exactamente igual al de ese dispositivo. Así podemos probar y depurar páginas web con el tamaño del dispositivo móvil.

Chrome DevTools en modo de dispositivo móvil

Chrome DevTools no sólo sirve para inspeccionar elementos DOM y atributos CSS. Podemos utilizarlo para examinar las solicitudes de red y acceder a los parámetros relacionados con el almacenamiento también. Además, se puede ejecutar código JavaScript directamente y ver los mensajes de la consola. ¿No es asombroso?

Ahora, suponga que tiene un teléfono móvil en la mano, y que ocurren problemas específicos, particularmente en este dispositivo, y que no puede reproducir el problema utilizando DevTools y el método ilustrado anteriormente. O bien, imagina una situación en la que el navegador de tu móvil tiene APIs específicas, y quieres depurarlas. En este caso, necesitas DevTools en tu teléfono móvil.

Lo que quizás no sepas es que puedes usar DevTools de escritorio para depurar navegadores basados en Blink (como Samsung Internet) en tus dispositivos Android también.

Para ello, primero, habilita la «Depuración USB» en tu dispositivo Android y conéctalo a tu ordenador.

Ahora viene la parte emocionante. Accede a la URL «chrome://inspect» y luego haz clic en «Dispositivos». ¡Hurra! Verás la lista de sesiones activas del navegador de tu dispositivo móvil.

Pulsa en «Inspeccionar», y verás la vista del navegador en tu ordenador. Ahora puedes hacer cualquier manipulación usando DevTools.

También puedes acceder a la lista de dispositivos móviles usando Dispositivos Remotos desde el menú de DevTools.

¡Espero que disfrutes usando esta técnica para hacer la depuración en tu móvil más sencilla!