Explorar los elementos de una página web en una Mac no es precisamente una ciencia exacta, pero es curioso cuántos pasos sutiles hay que seguir para que todo funcione correctamente, sobre todo si eres nuevo en esto. Ya sea que intentes solucionar algún problema de diseño, probar ajustes de diseño o simplemente satisfacer tu curiosidad sobre cómo está diseñado un sitio web, saber cómo acceder y usar correctamente las herramientas de desarrollo del navegador marca una gran diferencia. Y como las Mac tienen algunas peculiaridades en su gestión de este aspecto, especialmente con Safari, vale la pena seguir el proceso con cuidado para no pasar nada por alto. Después de hacerlo varias veces, es sorprendentemente sencillo.
Cómo inspeccionar elementos en una Mac en Safari, Chrome o Firefox
Método 1: Activar las herramientas para desarrolladores en Safari (porque Safari no muestra ese menú de forma predeterminada)
Si Safari es tu navegador preferido, primero debes activar el menú de desarrollador. Está un poco oculto de fábrica, lo cual es extraño, pero típico de Apple. Aquí te explicamos cómo:
- Abre Safari, luego ve a Safari > Configuración (o Preferencias :: también puedes presionar Cmd +, )
- Haga clic en la pestaña Avanzado en el extremo derecho
- Marque la casilla que dice Mostrar menú Desarrollo en la barra de menú
Ahora, aparece el menú «Desarrollo» en la parte superior. Este menú te da acceso a todas las funciones útiles, incluyendo «Inspeccionar elemento».A veces, esto no parece funcionar de inmediato y, en algunas configuraciones, el menú puede requerir recargar o reiniciar Safari para mostrarse correctamente. Simplemente desactívalo y actívalo si es necesario.
Navegar a su página
Una vez configurado, simplemente abre la página web que quieras explorar. Es curioso: la configuración de privacidad de Safari a veces dificulta un poco inspeccionar ciertas páginas, pero en general, una vez allí, todo bien. Chrome y Firefox son más sencillos al principio, pero Safari ofrece un paso adicional para desarrolladores.
Cómo llegar a Inspeccionar Elemento
- En Safari: haga clic derecho (o Control + clic) en el elemento, luego elija Inspeccionar elemento.
- En Chrome/Firefox: lo mismo: haga clic derecho y seleccione Inspeccionar o Inspeccionar elemento.
Eso abre el panel del desarrollador, que suele estar en la parte inferior o lateral. Sinceramente, en algunas configuraciones, es un poco lento o no se abre inmediatamente, porque, claro, las Mac y los navegadores siempre hacen las cosas un poco más frustrantes.
Eche un vistazo al HTML y los estilos
La pestaña Elementos revela la estructura del marcado, y al pasar el cursor sobre el HTML se resalta la parte relevante de la página. El panel Estilos, a la derecha, muestra las reglas CSS aplicadas. Incluso puedes ajustar esos estilos en tiempo real para ver cómo se ven los cambios; ¡es mágico, ¿verdad?! Esto es muy útil si un modal o una superposición bloquea la interacción o si quieres experimentar con colores y fuentes sin modificar los archivos de código.
Más pestañas para información más detallada
- Consola : vea errores o ejecute comandos rápidos de JavaScript.
- Red : realice un seguimiento de las solicitudes, vea qué es lento y diagnostique problemas de carga.
- Fuentes : Profundice en los scripts y recursos.
- Accesibilidad : Verifique las relaciones de contraste o las etiquetas ARIA.
A veces, los errores de diseño se deben a scripts o recursos bloqueados, así que conviene revisar la pestaña Red si algo falla. Además, habilitar los permisos de ventanas emergentes en Mac a veces ayuda si las superposiciones funcionan de forma extraña o no responden.
Sí, si quieres usar esa opción, simplemente conecta tu iPhone o iPad por USB, luego, en Safari (Mac), ve a Desarrollo y selecciona tu dispositivo. Es sorprendentemente práctico, aunque la configuración sea un poco complicada al principio.
Un poco raro, pero… no. Las ediciones son solo temporales. Recargar la página lo reinicia todo. Así que no te encariñes demasiado con los cambios, pero son perfectos para probar antes de editar los archivos de código.
En Chrome/Firefox, Comando + Opción + I funciona de maravilla. Safari también usa el mismo atajo, pero primero debes activar el menú de Desarrollo.
En realidad no. Las herramientas de inspección son específicas del navegador. Para las aplicaciones nativas de macOS, necesitarás Xcode u otras herramientas de desarrollo, así que no esperes poder depurar las aplicaciones de Mac con solo hacer clic derecho, como ocurre con los sitios web.
Probablemente se deba a que el menú de desarrollador no está habilitado (principalmente en Safari).En Chrome o Firefox, al hacer clic derecho siempre debería aparecer la opción de inspeccionar, a menos que la página la bloquee o ocurra algo extraño.
Cómo aprovechar al máximo la inspección
Sinceramente, explorar las herramientas de desarrollo en una Mac es solo una forma de echar un vistazo tras la cortina de la web. No es solo para desarrolladores: si te interesa saber cómo se crean los sitios web o intentar solucionar problemas de diseño sin esperar, es una excelente opción. Una vez que domines el manejo de menús, la edición CSS en vivo y la comprobación de solicitudes de red, empezarás a ver patrones y quizás incluso a empezar tu aventura en la programación. La configuración de Mac es bastante consistente en todos los navegadores una vez que sabes dónde buscar, así que vale la pena familiarizarse con ella. Ah, y si quieres ir más allá, incluso puedes cambiar el fondo de Safari en tu Mac para personalizar tu espacio de trabajo mientras inspeccionas y aprendes.