Contenido
- Acceda a las herramientas de desarrollador en el navegador web de Apple
- Cómo habilitar el modo de diseño receptivo en Safari
- Safari Developer Tools
Acceda a las herramientas de desarrollador en el navegador web de Apple
Asegurarse de que los sitios web y las aplicaciones web admitan una gran cantidad de dispositivos y plataformas es una tarea esencial para los desarrolladores web. El navegador web Safari de Apple incluye un modo de diseño receptivo que le permite obtener una vista previa de cómo se representará su sitio en varias resoluciones de pantalla y en diferentes versiones de iPad, iPhone e iPod touch.
Las instrucciones de este artículo se aplican a Safari 13 para macOS. El modo de diseño receptivo no está disponible en la versión de Windows.
Cómo habilitar el modo de diseño receptivo en Safari
Para habilitar las herramientas de desarrollador de Safari y el modo de diseño receptivo:
-
Seleccione Safari > Preferencias en la barra de herramientas de Safari.
También puedes usar el atajo de teclado Mando+Coma (,) para acceder al menú de Preferencias.
-
En el menú Preferencias, seleccione el Avanzado pestaña y marque la casilla al lado Mostrar menú de desarrollo en la barra de menú. Ahora debería estar disponible una nueva opción en la barra de herramientas de Safari en la parte superior de la pantalla.
-
Seleccione Desarrollar > Ingrese al modo de diseño receptivo en la barra de herramientas de Safari.
También puedes usar el atajo de teclado Opción+Mando+R para ingresar al modo de diseño receptivo.
-
La página web activa ahora debería mostrarse en modo Diseño receptivo. En la parte superior de la página, elija un dispositivo iOS o una resolución de pantalla para ver cómo se representará la página.
También puede indicarle a Safari que simule diferentes agentes de usuario utilizando el menú desplegable directamente encima de los iconos de resolución.
Safari Developer Tools
Además del modo de diseño receptivo, el menú Desarrollar de Safari ofrece muchas otras opciones útiles que incluyen:
- Abrir página con: Abra la página web activa en cualquier otro navegador actualmente instalado en su Mac.
- Agente de usuario: Cambiar el agente de usuario hace que los servidores web identifiquen su navegador como algo distinto de Safari.
- Connect Web Inspector: Muestra todos los recursos de una página web, incluida la información CSS y las métricas DOM.
- Mostrar consola de error: Muestra errores y advertencias de JavaScript, HTML y XML.
- Mostrar fuente de página: Vea y busque el código fuente de la página web activa.
- Mostrar recursos de la página: Muestra documentos, scripts, CSS y otros recursos de la página actual.
- Mostrar editor de fragmentos: Edita y ejecuta fragmentos de código. Esta característica es muy útil desde una perspectiva de prueba.
- Mostrar generador de extensiones: Cree sus propias extensiones de Safari empaquetando su código en consecuencia y agregando metadatos.
- Iniciar grabación de línea de tiempo: Registre solicitudes de red, ejecución de JavaScript, representación de página y otros eventos dentro del WebKit Inspector.
- Caches Vacíos: Elimine todas las cachés almacenadas en Safari, no solo los archivos de caché estándar del sitio web.
- Deshabilitar cachés: Con el almacenamiento en caché deshabilitado, los recursos se descargan de un sitio web cada vez que se realiza una solicitud de acceso en lugar de utilizar el caché local.
- Permitir JavaScript desde el campo de búsqueda inteligente: Deshabilitada de forma predeterminada por razones de seguridad, esta función le permite ingresar URL que contienen JavaScript en la barra de direcciones de Safari.
- Tratar los certificados SHA-1 como inseguros: Abreviatura de Algoritmo de hash seguro, se ha demostrado que la función de hash SHA-1 es menos segura de lo que se pensaba originalmente, de ahí la incorporación de esta opción en Safari.
