En caso de que no lo sepas, una página web se compone de una serie de elementos formateados para que aparezcan como una sola entidad. Los desarrolladores web deben comprender cada uno de estos elementos, cómo se presentan en una página web y ver cómo funciona cada uno de ellos por sí solo.
Los usuarios de Windows y Mac estarían familiarizados con la opción “Inspeccionar” o “Inspeccionar elemento” que está disponible al hacer clic derecho en cualquier página web. Lo que ofrece esta opción es una forma de ver el código fuente de un sitio web, ver todos sus elementos, la línea de código detrás de cada uno de ellos y editar su Javascript, HTML, CSS y todos los demás archivos multimedia que contiene. De esta manera, no sólo podrá aprender cómo funciona un sitio web en particular, sino que también podrá realizar modificaciones en su propio navegador sin que afecten a la página web real.
Aunque se sabe que la opción de inspección es una herramienta para “desarrolladores”, no sólo los desarrolladores se benefician de ella. Incluso los principiantes y los no desarrolladores pueden utilizar esta herramienta para aprender cómo se construye un sitio web y cómo funciona cada uno de sus elementos en conjunto. Si desea utilizar la opción inspeccionar elemento cuando navega por la web en un iPhone, esta publicación debería ayudarle a encontrar una manera de hacerlo.
Relacionado: Cómo inspeccionar elementos en Android
¿Puedes inspeccionar elementos web directamente en Safari?
La respuesta simple es no. Safari en iOS, como muchos otros navegadores móviles, no le ofrece una herramienta de inspección nativa para ver el desarrollo de una página web. Apple no proporciona una razón de por qué no existe esa opción, pero creemos que tiene que ver con lo pequeñas que son las pantallas de los teléfonos inteligentes. Un tamaño de visualización más pequeño puede dificultar que los usuarios naveguen por los cuadros que se están inspeccionando, ya que es posible que deba colocar el cursor con cuidado cuando desee editar el código de una página web o incluso ubicar una.
Otra razón podría ser la falta de potencia informática de los teléfonos inteligentes. Aunque los iPhone modernos tienen suficiente potencia para ejecutar juegos con muchos gráficos, puede resultar complicado ver la información de la página de un sitio web, ya que no todos los sitios web se crean de la misma manera. Algunos sitios web pueden tener una gran cantidad de recursos y capas cuidadosamente diseñadas para que parezcan perfectas, pero los mismos recursos pueden tardar algún tiempo en cargarse cuando se inspeccionan.
Relacionado: Reproducir un vídeo en iPhone [Guide]
Inspeccionar Element en iPhone: ¿Qué otras opciones tienes?
Si bien no puede utilizar de forma nativa la herramienta ‘Inspeccionar elemento’ en la aplicación Safari en iOS, todavía hay formas de solucionar esta limitación. A continuación se proporcionan tres formas de inspeccionar elementos de las páginas web que visita en Safari en su iPhone.
Método n.° 01: usar Safari en tu Mac
Si posee un dispositivo macOS además de su iPhone, aún puede inspeccionar páginas web directamente desde la aplicación Safari, pero en Mac. Apple te permite depurar páginas web desde Safari en iOS como lo harías en Mac usando sus herramientas de “Desarrollar”. Si bien el proceso de depuración de un sitio es relativamente simple, su configuración inicial puede ser más larga de lo esperado. Pero no se preocupe, le explicaremos el proceso de configuración de la forma más sencilla posible y le ayudaremos a inspeccionar las páginas con facilidad después de la primera vez.
Habilitar Web Inspector en iOS
Para poder depurar elementos web, primero debe habilitar Web Inspector para la aplicación Safari en iOS. Para hacer esto, abra la aplicación Configuración y seleccione ‘Safari’.
Dentro de Safari, desplácese hacia abajo y toque “Avanzado”.
En la siguiente pantalla, toque el botón adyacente a ‘Web Inspector’ hasta que se ponga verde.
Configuración inicial en Mac
Una vez que haya habilitado con éxito Web Inspector para Safari en iOS, es el momento de realizar la configuración en su Mac. En Mac, abra la aplicación Safari, haga clic en la opción ‘Safari’ de la barra de menú y seleccione ‘Preferencias’.
En la ventana que aparece, seleccione la pestaña “Avanzado” en la parte superior y marque la casilla “Mostrar menú de desarrollo en la barra de menú”.
Ahora deberías ver aparecer la opción “Desarrollar” en la barra de menú en la parte superior.
Ahora, usando el cable USB que viene con tu iPhone, establece una conexión entre el iPhone y Mac. Cuando su iPhone se conecta a la Mac, puede hacer clic en “Desarrollar” en la barra de menú y ver si su iPhone aparece en la lista de dispositivos. En caso afirmativo, haga clic en el nombre del dispositivo de esta lista.
Para asegurarse de que puede inspeccionar páginas web de forma inalámbrica sin necesidad de un cable USB como lo hizo hace un momento, haga clic en la opción “Conectar a través de la red” cuando se abra el menú del iPhone.
Ahora puedes desconectar tu iPhone de la Mac y aún podrás inspeccionar páginas web sin conectar un cable entre ellas.
Inspeccionar páginas web desde iOS en una Mac
Ahora que ha habilitado ‘Conectar a través de la red’ en el menú ‘Desarrollar’, puede inspeccionar páginas web desde Safari en iOS directamente en su Mac. Sólo necesitas asegurarte de que tanto el iPhone como el Mac estén conectados a la misma red inalámbrica para poder depurar páginas web de forma inalámbrica.
Para ello, abra la aplicación Safari en su iPhone y vaya a la página web que desea inspeccionar.
Con su iPhone desbloqueado y la página web seleccionada abierta, vaya a su Mac y abra la aplicación Safari allí. Aquí, haga clic en ‘Desarrollar’ en la barra de menú y vaya a ‘iPhone’.
Cuando pasas el cursor sobre tu ‘iPhone’, deberías ver una lista de páginas web que están abiertas en iOS. Haga clic en la página web que desea inspeccionar de esta lista.
Se cargará una nueva ventana en la Mac que muestra toda la información que se puede inspeccionar desde la página web seleccionada.
En cualquier momento durante su inspección, podrá ver a qué parte de la página apunta una línea de código buscando un área azul en su iPhone.
Esta área azul indica que el código sobre el que estás pasando el cursor en Mac es lo que constituye el elemento resaltado para esta página web en particular. Al moverse entre diferentes líneas de código, este resaltado azul se moverá por diferentes partes de la página de su iPhone en tiempo real.
Relacionado: Cómo mantener los efectos en FaceTime
Método #02: Usar atajos en iOS
Si no posee una Mac o desea echar un vistazo a un sitio web directamente desde su iPhone, le alegrará saber que la aplicación iOS Shortcuts es para esto. La aplicación Atajos en iOS ofrece un montón de selecciones prediseñadas que le permiten ver el código fuente de una página, editar una página web, capturar imágenes de un sitio web y buscar versiones anteriores de una página web desde la aplicación Safari. Desafortunadamente, no existe un atajo único que ofrezca depuración web completa en iOS, por lo que deberá agregar un atajo para cada uno de estos propósitos.
Encontramos los siguientes atajos que puede utilizar para realizar la depuración en sitios web directamente desde iOS. Estos son:
Ver fuente – Este acceso directo le permite ver el código fuente de una página web en formato básico.
Editar página web – Este acceso directo le permite editar el contenido de una página web localmente para que pueda probar un nuevo diseño o formato y cómo se verá en su iPhone.
Obtener imágenes de la página – Una razón principal para inspeccionar una página puede ser mirar imágenes o guardar aquellas que de otro modo no serían interactivas. Este acceso directo toma todas las imágenes de una determinada página web y luego las previsualiza colectivamente. Como indica la captura de pantalla a continuación, puede ver cada una de las 24 imágenes alojadas en la página web seleccionada.
Máquina Wayback – Este acceso directo te lleva a Wayback Machine de una página web donde puedes ver sus versiones anteriores que permanecen guardadas en Internet Archive.
Dependiendo de cómo desee inspeccionar las páginas web en iOS, puede agregar cualquiera de estos accesos directos a su iPhone haciendo clic en los enlaces relevantes de arriba o buscándolos dentro de Accesos directos > Galería.
En los resultados de la búsqueda, toque el acceso directo que desea agregar al iPhone.
Cuando se abra una pantalla de vista previa, toque la opción “Agregar widget” en la parte inferior.
Los atajos que todos ustedes aparecerán dentro de la pantalla Mis atajos > Todos los atajos y también serán accesibles dentro de la hoja Compartir de Safari.
Para inspeccionar una página web, ábrela en Safari y toca el botón “Compartir” en la parte inferior.
En la hoja Compartir que aparece, desplácese hacia abajo y busque los accesos directos que agregó a su iPhone.
Seleccionar ‘Editar página web’ le permitirá editar directamente partes de la página web. Cuando seleccione cualquiera de las otras tres opciones, se le preguntará si desea que el acceso directo acceda a la página web. Aquí, toque ‘Permitir una vez’.
Relacionado: Cómo agregar WidgetSmith a la pantalla de inicio
Método n.° 03: usar aplicaciones de terceros
Si no está satisfecho con los resultados anteriores, tendrá que explorar aplicaciones de terceros para poder inspeccionar elementos de una página web. Al igual que en Safari, no encontrará una manera de inspeccionar una página web dentro de los navegadores web más populares (Chrome, Firefox, Brave, etc.). En su lugar, tendrás que confiar en una aplicación creada para realizar esta tarea específica y aplicaciones como estas pueden ser difíciles de encontrar.
Si bien una simple búsqueda en la App Store le arrojará varios resultados para inspeccionar elementos web, no encontrará tantas aplicaciones que estén disponibles de forma gratuita y tengan una alta calificación. Según los comentarios de los usuarios, le recomendamos instalar Inspeccionar el navegador o Navegador de engranajes aplicaciones de la App Store, que proporcionan inspección y edición de elementos en JavaScript, CSS y HTML.
Eso es todo lo que necesitas saber sobre la inspección de elementos en un iPhone.
RELACIONADO
