Para el usuario promedio, una página web está creada a partir de imágenes, texto y vídeos. Pero detrás de todo eso hay una gran cantidad de líneas de código que hacen que todo funcione bien y que la página esté organizada justo como lo desea el desarrollador. Si quieres, tú mismo puedes ver todo el código que hay detrás de un sitio web específico haciendo clic derecho sobre un espacio «en blanco» (sin botones, imágenes, vídeo o texto) del mismo y seleccionando la opción «Inspeccionar elemento». Ahora bien, este truco lo puedes hacer en prácticamente cualquier navegador para PC, pero ¿qué hay de los navegadores para móviles?
Lastimosamente, los navegadores para móviles no ofrecen esta opción, ya que las pantallas de los smartphones son muy pequeñas para desplegar todo el código de una web e indicar qué elemento se está inspeccionando, al mismo tiempo. Sin embargo, nosotros hemos encontrado dos métodos muy sencillos de inspeccionar un elemento desde tu dispositivo Android. A continuación, te los presentamos, no sin antes explicarte algunas nociones básicas sobre la inspección de elementos, por si te interesa saber un poco más sobre el tema.
¿Qué es la inspección de elementos y para qué sirve?
La inspección de elementos es la herramienta que ofrecen los navegadores para ver el código fuente (HTML y CSS) de una página web, así como los diferentes elementos que la conforman. En concreto, con la inspección de elementos también puedes encontrar los permisos que tiene una web, los certificados de seguridad de la misma, imágenes, fuentes, etc. Además de inspeccionar, esta herramienta también sirve para modificar el diseño de una página web e incluso copiar su contenido.
Eso sí, si bien la inspección de elementos te permite agregar texto, cambiar colores, modificar la fuente, variar el tamaño de una imagen o mover la posición de algunos iconos, todos estos cambios se pierden al refrescar el sitio. Por ello, si estás aprendiendo a desarrollar páginas web, es una herramienta muy útil para practicar y adquirir nuevos conocimientos. Podrás hacer las modificaciones de código que quieras, viendo los resultados en tiempo real, sin riesgo de dañar tu web o la de otro.
Ahora bien, dado que en la actualidad el diseño de una web en PC es diferente al diseño en móviles, quizás te interese inspeccionar los elementos de una página web en tu móvil. De ahí la importancia de aprender a inspeccionar elementos desde Android. Y es que, si bien hay formas de abrir páginas web en «modo móvil» desde el ordenador, no está demás saber cómo usar la herramienta de inspección de elementos en tu teléfono, sobre todo cuando no tienes un PC cerca.
Cómo inspeccionar un elemento desde Android
A continuación, te presentamos dos métodos que te permitirán inspeccionar elementos desde tu móvil. El primero de ellos requiere que instales una app de terceros, mientras que el segundo lo puedes llevar a cabo con el navegador para Android de tu preferencia, sin descargar nada, aunque con una desventaja importante.
Inspecciona un elemento en Android con la app Inspeccione e Edite HTML
Inspeccione e Edite HTML es una aplicación muy sencilla, cuyo único propósito es dejarte ver el código fuente de las páginas que quieras y editarlo. Para usarla, sigue estos pasos:
- Instala Inspeccione e Edite HTML desde Google Play Store.
- Abre la app instalada y, cuando te solicite permisos, puedes no otorgárselos, pues no son necesarios.
- En la barra de dirección ubicada en la parte superior, introduce la URL del sitio web que quieres inspeccionar (también puedes acceder a la página usando el buscador de Google).
- Luego, pulsa el botón Enter en el teclado para acceder al sitio.
- Busca en la página el elemento en particular que quieres inspeccionar. Una vez encontrado, pulsa el botón de Modo inspector (el de la mano apuntando, que está al lado derecho de la barra de dirección).
- El botón tocado se pondrá de color amarillo, indicando que el Modo inspector está activado. Ahora, toca el elemento que quieres inspeccionar y de inmediato te aparecerá todo el código del mismo en pantalla.
- Si quieres encontrar una parte específica del código, usa el buscador que tienes en la parte superior.
¡Listo! Cuando quieras salir del Modo inspector, simplemente toca el botón Volver de tu Android o pulsa el icono de ventana que muestra la app en la parte superior.
Usando Chrome, Opera, Edge, Firefox, Brave o cualquier otro navegador de tu preferencia también puedes inspeccionar elementos desde Android sin instalar ninguna app adicional. El problema de este método es que te muestra absolutamente todo el código de la página web que inspeccionas y no solo el de los elementos que selecciones. Por ello, puede ser muy tedioso usar este método para inspeccionar un elemento en concreto. De todas formas, aquí te explicamos en qué consiste:
- Abre el navegador que prefieras en tu móvil.
- Accede a la página web cuyos elementos quieres inspeccionar.
- Ahora, toca la barra de dirección e introduce «view-source:» (sin comillas) delante de la dirección de la página. Por ejemplo: view-source:https://androidphoria.com.
- Pulsa la tecla Enter en el teclado para acceder a la dirección.
¡Eso es todo! De esa forma, se abrirá todo el código de la página web para que inspecciones sus elementos. Para facilitar la búsqueda de una parte del código que estás buscando, te recomendamos usar la herramienta de búsqueda del navegador que estés usando. Si no te quedó claro algo y necesitas ayuda, coméntanoslo y con gusto te ayudaremos.
