Introducción al Safari Web Inspector en iOS y Mac

Introducción al Safari Web Inspector en iOS y Mac
4.8 (95%) 12 votos

Si eres un desarrollador web, es probable que ya conozcas el inspector web de Safari. Pero si está empezando a utilizar Safari para el desarrollo o recién ha comenzado su carrera de Desarrollo Web, esta guía le mostrará los conceptos básicos para comenzar a usar Safari Web Inspector en iOS y Mac.

¬ŅQu√© es el inspector web de safari?

Para aquellos que a√ļn no est√°n familiarizados con la herramienta, puede usar Safari Web Inspector para obtener ayuda con su desarrollo web. Le permite revisar los elementos de la p√°gina, realizar cambios, solucionar problemas y revisar el rendimiento de la p√°gina. Apple lo resume con:

Web Inspector es la principal herramienta de desarrollo web en Safari. Web Inspector le permite inspeccionar, ajustar, depurar y analizar el rendimiento de su contenido web en una pesta√Īa de Safari.

Habilitar y abrir Safari Web Inspector

Puede utilizar Safari Web Inspector para el desarrollo en su iPhone, iPad o Mac. A continuación le indicamos cómo habilitarlo y abrirlo en iOS y macOS para que esté listo para usarlo cuando lo necesite.

Habilitar y abrir el Inspector Web en Mac

Si va a utilizar el Inspector web con frecuencia, ya sea para iOS o Mac, tambi√©n puede agregar el Desarrollar pesta√Īa a la barra de men√ļ para que pueda acceder a ella f√°cilmente.

Recomendamos:
Cómo encontrar el modelo de CPU exacto de tu Mac

1) Abierto Safari y haga clic Safari > Preferencias desde la barra de men√ļ.

2) Elegir la Avanzado leng√ľeta.

3) Marque la casilla en la parte inferior para Mostrar el men√ļ de desarrollo en la barra de men√ļ.

Mostrar men√ļ de desarrollo en Safari en Mac

Ahora, cuando desee habilitar el Inspector web, haga clic en Desarrollar > Mostrar inspector web desde la barra de men√ļ.

Si prefiere renunciar a agregar el bot√≥n Desarrollar a la barra de men√ļ, puede acceder al Inspector web en Mac con un acceso directo. Vaya a la p√°gina que desea inspeccionar, haga clic con el bot√≥n derecho en ella y elija Inspeccionar elemento desde el men√ļ contextual.

Inspeccionar elemento de acceso directo en Safari en Mac

Solo tenga en cuenta que si planea usar Web Inspector for Safari en su dispositivo iOS, necesitar√° la Desarrollar Bot√≥n en la barra de men√ļ.

Habilitar y abrir el Inspector Web para iPhone y iPad.

Para usar el Web Inspector para iOS en su Mac, tome su cable y conecte su iPhone o iPad. Luego, siga estos pasos para habilitar la herramienta.

1) Abierto Ajustes > Safari en iPhone o iPad.

2) Despl√°zate hasta la parte inferior y toca Avanzado.

3) Habilitar el conmutador para Inspector web.

Habilitar Safari Web Inspector en iPhone

A continuaci√≥n, aseg√ļrese Safari est√° abierto en su dispositivo iOS y su Mac.

1) Hacer clic Desarrollar en la barra de men√ļ y ver√°s tu iPhone o iPad en la lista.

2) Pase el mouse sobre el dispositivo y ver√° los sitios web abiertos en Safari en su dispositivo.

3) Seleccione el que desee y el Inspector web se abrir√° en una nueva ventana para que lo use.

Desarrollar men√ļ para iPhone en Safari en Mac

Posicionar el inspector web de Safari

Si est√° utilizando el Inspector Web para iOS, permanecer√° en su propia ventana flotante.

Recomendamos:
Cómo cambiar entre las aplicaciones Slide Over en iPad

Si lo está utilizando para Safari en su Mac, puede cambiar su posición. De forma predeterminada, el Inspector web se muestra en la parte inferior de la ventana de Safari. Para separarlo y colocarlo en una ventana separada o acoplarlo al lado derecho de Safari, seleccione uno de los botones en la parte superior izquierda de la ventana del Inspector.

Posicionar el Inspector Web en Safari en Mac

Conoce al inspector web

Safari Web Inspector tiene una √ļtil barra de herramientas y pesta√Īas con algunas opciones que puede ajustar para que se ajusten a sus necesidades.

Barra de herramientas del inspector web

"X" para cerrar el Inspector. Botones de posicionamiento. Bot√≥n de carga. Descargar bot√≥n de archivo web. Visor de actividad (recuento de recursos, tama√Īo de recursos, tiempo de carga, registros, errores, advertencias). Bot√≥n selector de elementos. Cuadro de b√ļsqueda

Pesta√Īas del inspector web

Puedes usar todas las pesta√Īas o solo algunas. Haga clic en el Signo de m√°s en la pesta√Īa derecha m√°s alejada para ver las pesta√Īas disponibles y agregar una. Usted puede bot√≥n derecho del rat√≥n o sostener Control y click las pesta√Īas y luego marque y desmarque las que quiera ver. Reorganice las pesta√Īas presion√°ndolas y arrastr√°ndolas a sus nuevas posiciones.

Elementos: Estado actual del modelo de objeto de documento de la páginaRed: Recursos cargados por la página actualDepurador: Ver la ejecución de JavaScript, las variables y el flujo de control.Recursos: Recursos utilizados por el contenido de la página actual.Líneas de tiempo: Una vista de lo que está haciendo el contenido de la páginaAlmacenamiento: Estado que está disponible para el contenido de la página.Lona: Contextos creados desde CSSConsola: Muestra los mensajes registrados y le permite evaluar el código JavaScript

Recomendamos:
9 Las mejores aplicaciones de juegos de palabras para 2019 para jugar en Android e iOS

Safari Web Inspector Tabs en Mac

Para obtener ayuda detallada sobre una pesta√Īa espec√≠fica, puede dirigirse al sitio de Soporte para desarrolladores de Apple. Seleccionar Tabla de contenidos> Comenzar en Safari Developer Tools > Inspector web.

Sitio del desarrollador de Safari Web Inspector

A la derecha de la barra de pesta√Īas, ver√° un Ajustes bot√≥n. Esto le permite ajustar la configuraci√≥n de las pesta√Īas, guiones, mapas de origen, zoom y m√°s.

Configuración de Safari Web Inspector en Mac

Buena suerte con tu inspección!

Esperamos que esta guía lo ayude a comenzar a trabajar con Safari Web Inspector para el desarrollo web de su iPhone, iPad o Mac.

Si actualmente utiliza el Inspector web y tiene consejos y trucos que le gustaría compartir con otras personas que recién están comenzando, no dude en comentar a continuación.


La noticia fue creada por el AUTOR ORIGINAL del link de arriba, auspiciamos al desarrollador original de la noticia sin perjudicar su reputación ni posicionamiento web.