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.
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ú.
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.
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.
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.
Posicionar el inspector web de Safari
Si está utilizando el Inspector Web para iOS, permanecerá en su propia ventana flotante.
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.
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
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.
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.
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.
Resumen del Contenido
