4 formas fáciles de inspeccionar elementos en un iPhone

PDF download Descargar el PDF
Una guía simple para inspeccionar elementos web en iOS
Coescrito por Luigi Oppido

PDF download Descargar el PDF

¿Necesitas depurar un sitio web en tu iPhone pero no puedes encontrar "Inspeccionar elemento"? Esta característica común del navegador no está incorporada a Safari en iPhone, pero de todos modos hay formas de inspeccionar elementos de sitios web sin pagar por una aplicación. La forma oficial es usar las herramientas para desarrolladores de Safari, para lo cual debes conectar tu iPhone a una Mac. Si no estás cerca de una computadora, puedes instalar una aplicación gratuita llamada Web Inspector o crear un marcador de JavaScript (que también funciona en Chrome). Como otra opción, si no vas a depurar una aplicación web y tan solo quieres cambiar el aspecto de un sitio web, puedes usar un atajo de iPhone llamado "Editar página web".

Cosas que debes saber

  • Usa las herramientas para desarrolladores de Safari para inspeccionar elementos conectando tu iPhone a tu Mac.
  • Si quieres inspeccionar un elemento sin una computadora, instala la aplicación Web Inspector o utiliza un marcador de JavaScript.
  • Si quieres editar texto o eliminar imágenes de un sitio web, prueba con el atajo "Editar página web" en la aplicación "Atajos".
Método 1
Método 1 de 4:

Usar las herramientas para desarrolladores de Safari

PDF download Descargar el PDF
  1. Si quieres usar la función para inspeccionar elementos en Safari en tu iPhone sin una herramienta externa, puedes hacerlo mediante las herramientas para desarrolladores de Safari. El único problema es que las herramientas para desarrolladores solo están disponibles en macOS, por lo que deberás estar cerca de tu computadora para usar este método.
  2. Así es como puedes hacerlo:
    • Abre la Configuración de tu iPhone.
    • Desplázate hacia abajo y toca Safari .
    • Desplázate hacia abajo y toca Avanzado .
    • Toca el interruptor "Web Inspector" para activarlo (verde).
  3. Si de por sí ves un menú llamado Desarrollo cuando Safari esté abierto en tu Mac, puedes omitir este paso. De lo contrario, así es como puedes habilitarlo:
    • Haz clic en el menú Safari .
    • Haz clic en Configuración .
    • Haz clic en Avanzado .
    • Selecciona "Mostrar menú Desarrollo en la barra de menús". [1]
  4. Dirígete al sitio web en donde quieras inspeccionar un elemento usando Safari en tu iPhone.
  5. Verás que allí aparece tu iPhone.
  6. Con esto se abre el panel "Inspeccionar elemento" en tu Mac para el sitio web que esté abierto en tu iPhone.
    • Al seleccionar ítems en la pestaña Elementos en tu Mac, verás el elemento seleccionado resaltado en tu iPhone. [2]
    • Si quieres seguir usando la función "Inspeccionar elemento" sin dejar tu iPhone conectado a tu Mac, vuelve a hacer clic en el menú Desarrollo y selecciona Conectar a través de red .
    Anuncio
Método 2
Método 2 de 4:

Usar la extensión Web Inspector

PDF download Descargar el PDF
  1. Esta extensión gratuita de Safari para iPhone y iPad permite que inspecciones elementos sin una computadora. Busca "Web Inspector" de "And a Dinosaur" en la App Store o descárgala directamente aquí .
    • Web Inspector es útil para inspeccionar elementos en Safari debido a que no se necesita que conectes tu iPhone a una Mac. Si quieres depurar en Chrome, entonces tendrás que usar un marcador de JavaScript .
    • Esta extensión tiene el mismo nombre que "Web Inspector" de Safari, pero no es una herramienta oficial de Apple.
  2. Así es como puedes hacerlo:
    • Abre Safari y dirígete a cualquier sitio web.
    • Toca Aa en la barra de direcciones.
    • Toca Administrar extensiones . [3]
    • Toca el interruptor junto a "Web Inspector" para habilitarlo.
    • Toca Finalizar .
  3. Ahora que has habilitado Web Inspector, podrás inspeccionar un elemento directamente desde Safari.
  4. Para ello, vuelve a tocar Aa y selecciona Web Inspector .
    • Para que Web Inspector inspeccione elementos en este sitio web solo por un día, selecciona Permitir por un día .
    • Si quieres usar Web Inspector por más de un día o para muchos sitios web, selecciona en cambio Permitir siempre . Luego, puedes elegir Permitir siempre en este sitio web o Permitir siempre en todos los sitios web .
      • Si eliges esta última opción, no tendrás que volver a darle permiso a Web Inspector en el futuro para acceder a sitios web.
  5. Con esto se expande la herramienta conocida "Inspeccionar elemento" en la parte inferior de Safari.
    • Al terminar, toca dos veces Aa para cerrar Web Inspector.
    Anuncio
Método 3
Método 3 de 4:

Usar un marcador de JavaScript

PDF download Descargar el PDF
  1. 1
    Dirígete al sitio web que quieras inspeccionar. Para este truco, debes crear un marcador que contenga una serie de código de JavaScript para incluir "Inspeccionar elemento" en cualquier navegador web de iPhone. Este truco funcionará tanto en Safari como en Chrome, aunque el proceso de crear el marcador diferirá un poco.
  2. Crea un marcador o favorito .
    • Chrome: toca el menú de los tres puntos y selecciona Añadir a marcadores .
    • Safari: toca el ícono de compartir en la parte inferior y luego toca Añadir a favoritos .
  3. Ahora que tienes un marcador, deberás editarlo.
    • Chrome: toca el menú de los tres puntos y selecciona Marcadores en la parte superior. Mantén presionado el nuevo marcador y luego toca Editar marcador.
    • Safari: toca el ícono del libro abierto en la parte inferior y luego toca Favoritos . Mantén presionado el marcador que acabas de crear y luego toca Editar .
  5. Cambia el nombre del marcador a "Inspeccionar", pega el siguiente código en el campo "URL" o "Enlace" exactamente como está y luego guarda el marcador. 
     javascript 
 : 
 ( 
 function 
 () 
 { 
 var 
 script 
 = 
 document 
 . 
 createElement 
 ( 
 'script' 
 ); 
 script 
 . 
 src 
 = 
 "//cdn.jsdelivr.net/npm/eruda" 
 ; 
 document 
 . 
 body 
 . 
 appendChild 
 ( 
 script 
 ); 
 script 
 . 
 onload 
 = 
 function 
 () 
 { 
 eruda 
 . 
 init 
 () 
 } 
 })();
  6. Para abrirlo en Chrome, tan solo toca los tres puntos, selecciona Marcadores y toca Inspeccionar . En Safari, encontrarás el marcador Inspeccionar en tus favoritos. En unos momentos, verás que aparece el ícono de una tuerca en la página que quieres inspeccionar.
  7. Ahora, puedes usar la pestaña Elementos en la parte superior del panel para inspeccionar elementos en la página actual.
    Anuncio
Método 4
Método 4 de 4:

Usar el atajo "Editar página web"

PDF download Descargar el PDF
  1. Si tu objetivo es editar el aspecto de un sitio web con "Inspeccionar elemento", puedes lograr el mismo efecto mediante el atajo de iPhone llamado "Editar página web". Este atajo no abrirá la pantalla tradicional de "Inspeccionar elemento", pero podrás hacer cambios en vivo a cualquier sitio web para ver cómo se ve.
    • Encontrarás la aplicación "Atajos" en tu biblioteca de aplicaciones.
    • Esto es útil si quieres editar texto o eliminar imágenes y otros objectos de un sitio web que estés visualizando.
  2. Lo verás en la esquina inferior derecha de la página.
  3. Escribe editar página web en la barra de búsqueda y luego toca Editar página web en la parte superior de los resultados de la búsqueda.
  4. Es el botón azul en la parte inferior de la página.
  5. Deberás hacer un cambio rápido en la configuración de "Atajos" para permitir que "Editar página web" funcione:
    • Abre los Ajustes de tu iPhone.
    • Desplázate hacia abajo y toca Atajos .
    • Toca Avanzado .
    • Habilita "Permitir ejecución de secuencia de comandos".
  6. Puede ser cualquier sitio web que quieras modificar.
  7. El ícono "Compartir" es el recuadro azul con una flecha hacia arriba en la parte inferior de la pantalla.
  8. Esto le da permiso al atajo para "editar" el sitio web en la ventana de tu navegador.
  9. Regresarás al sitio web, el cual ahora puedes editar visualmente.
    • Toca cualquier elemento para editarlo. Ahora, puedes editar texto e imágenes en el sitio web sin tener una característica oficial de "Inspeccionar elemento" incorporada en Safari.
    Anuncio

Consejos

  • Asimismo, hay varias aplicaciones compradas con las que podrás inspeccionar elementos web en tu iPhone, entre ellas Achoo HTML Viewer & Inspector e Inspect Browser.
  • Adobe Edge Inspect era una herramienta popular para inspeccionar elementos en sitios web, pero ya no está en desarrollo ni recibe actualizaciones. [4]
Anuncio

wikiHows relacionados

Cómo
instalar archivos DEB en Linux: Gdebi, Apt, Dpkg y más
Cómo
abrir archivos DLL
Cómo
ejecutar un archivo EXE desde la línea de comandos en una PC o Mac
Cómo
abrir un archivo .Dat
Cómo
abrir un archivo XML
Cómo
hacer un archivo zip
Cómo
abrir archivos XPS
Cómo
escanear en PDF
Cómo
abrir archivos JPEG
Cómo
abrir una carpeta en la ventana de comandos
Cómo
descomprimir un archivo
Cómo
extraer un archivo JAR
Cómo
buscar una palabra o frase en un documento PDF
Cómo
ejecutar un archivo HTML
Anuncio

Referencias

  1. ↑ https://support.apple.com/guide/safari/use-the-developer-tools-in-the-develop-menu-sfri20948/mac
  2. ↑ https://support.apple.com/guide/safari-developer/inspecting-overview-dev1a8227029/mac
  3. ↑ https://support.apple.com/guide/iphone/get-extensions-iphab0432bf6/ios
  4. ↑ https://helpx.adobe.com/edge-inspect/system-requirements.html

Acerca de este wikiHow

En otros idiomas
Esta página ha recibido 7379 visitas.

¿Te ayudó este artículo?

Anuncio