Explorar los elementos de una p\u00e1gina web en una Mac no es precisamente una ciencia exacta, pero es curioso cu\u00e1ntos pasos sutiles hay que seguir para que todo funcione correctamente, sobre todo si eres nuevo en esto. Ya sea que intentes solucionar alg\u00fan problema de dise\u00f1o, probar ajustes de dise\u00f1o o simplemente satisfacer tu curiosidad sobre c\u00f3mo est\u00e1 dise\u00f1ado un sitio web, saber c\u00f3mo acceder y usar correctamente las herramientas de desarrollo del navegador marca una gran diferencia. Y como las Mac tienen algunas peculiaridades en su gesti\u00f3n de este aspecto, especialmente con Safari, vale la pena seguir el proceso con cuidado para no pasar nada por alto. Despu\u00e9s de hacerlo varias veces, es sorprendentemente sencillo.<\/p>\n
Si Safari es tu navegador preferido, primero debes activar el men\u00fa de desarrollador. Est\u00e1 un poco oculto de f\u00e1brica, lo cual es extra\u00f1o, pero t\u00edpico de Apple. Aqu\u00ed te explicamos c\u00f3mo:<\/p>\n
Ahora, aparece el men\u00fa “Desarrollo”<\/strong> en la parte superior. Este men\u00fa te da acceso a todas las funciones \u00fatiles, incluyendo “Inspeccionar elemento”.A veces, esto no parece funcionar de inmediato y, en algunas configuraciones, el men\u00fa puede requerir recargar o reiniciar Safari para mostrarse correctamente. Simplemente desact\u00edvalo y act\u00edvalo si es necesario.<\/p>\n Una vez configurado, simplemente abre la p\u00e1gina web que quieras explorar. Es curioso: la configuraci\u00f3n de privacidad de Safari a veces dificulta un poco inspeccionar ciertas p\u00e1ginas, pero en general, una vez all\u00ed, todo bien. Chrome y Firefox son m\u00e1s sencillos al principio, pero Safari ofrece un paso adicional para desarrolladores.<\/p>\n 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\u00e1s frustrantes.<\/p>\n La pesta\u00f1a Elementos<\/strong> revela la estructura del marcado, y al pasar el cursor sobre el HTML se resalta la parte relevante de la p\u00e1gina. El panel Estilos<\/strong>, a la derecha, muestra las reglas CSS aplicadas. Incluso puedes ajustar esos estilos en tiempo real para ver c\u00f3mo se ven los cambios; \u00a1es m\u00e1gico, \u00bfverdad?! Esto es muy \u00fatil si un modal o una superposici\u00f3n bloquea la interacci\u00f3n o si quieres experimentar con colores y fuentes sin modificar los archivos de c\u00f3digo.<\/p>\n A veces, los errores de dise\u00f1o se deben a scripts o recursos bloqueados, as\u00ed que conviene revisar la pesta\u00f1a Red si algo falla. Adem\u00e1s, habilitar los permisos de ventanas emergentes en Mac a veces ayuda si las superposiciones funcionan de forma extra\u00f1a o no responden.<\/p>\n S\u00ed, si quieres usar esa opci\u00f3n, simplemente conecta tu iPhone o iPad por USB, luego, en Safari (Mac), ve a Desarrollo<\/strong> y selecciona tu dispositivo. Es sorprendentemente pr\u00e1ctico, aunque la configuraci\u00f3n sea un poco complicada al principio.<\/p>\n Un poco raro, pero\u2026 no. Las ediciones son solo temporales. Recargar la p\u00e1gina lo reinicia todo. As\u00ed que no te encari\u00f1es demasiado con los cambios, pero son perfectos para probar antes de editar los archivos de c\u00f3digo.<\/p>\n En Chrome\/Firefox, Comando + Opci\u00f3n + I<\/strong> funciona de maravilla. Safari tambi\u00e9n usa el mismo atajo, pero primero debes activar el men\u00fa de Desarrollo.<\/p>\n En realidad no. Las herramientas de inspecci\u00f3n son espec\u00edficas del navegador. Para las aplicaciones nativas de macOS, necesitar\u00e1s Xcode u otras herramientas de desarrollo, as\u00ed que no esperes poder depurar las aplicaciones de Mac con solo hacer clic derecho, como ocurre con los sitios web.<\/p>\n Probablemente se deba a que el men\u00fa de desarrollador no est\u00e1 habilitado (principalmente en Safari).En Chrome o Firefox, al hacer clic derecho siempre deber\u00eda aparecer la opci\u00f3n de inspeccionar, a menos que la p\u00e1gina la bloquee o ocurra algo extra\u00f1o.<\/p>\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\u00f3mo se crean los sitios web o intentar solucionar problemas de dise\u00f1o sin esperar, es una excelente opci\u00f3n. Una vez que domines el manejo de men\u00fas, la edici\u00f3n CSS en vivo y la comprobaci\u00f3n de solicitudes de red, empezar\u00e1s a ver patrones y quiz\u00e1s incluso a empezar tu aventura en la programaci\u00f3n. La configuraci\u00f3n de Mac es bastante consistente en todos los navegadores una vez que sabes d\u00f3nde buscar, as\u00ed que vale la pena familiarizarse con ella. Ah, y si quieres ir m\u00e1s all\u00e1, incluso puedes cambiar el fondo de Safari en tu Mac para personalizar tu espacio de trabajo mientras inspeccionas y aprendes.<\/p>\n","protected":false},"excerpt":{"rendered":" Explorar los elementos de una p\u00e1gina web en una Mac no es precisamente una ciencia exacta, pero es curioso cu\u00e1ntos pasos sutiles hay que seguir para que todo funcione correctamente, sobre todo si eres nuevo en esto. Ya sea que intentes solucionar alg\u00fan problema de dise\u00f1o, probar ajustes de dise\u00f1o o simplemente satisfacer tu curiosidad […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-8135","post","type-post","status-publish","format-standard","hentry","category-how-to"],"acf":[],"_links":{"self":[{"href":"https:\/\/howtogeek.blog\/es\/wp-json\/wp\/v2\/posts\/8135","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/howtogeek.blog\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/howtogeek.blog\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/es\/wp-json\/wp\/v2\/comments?post=8135"}],"version-history":[{"count":1,"href":"https:\/\/howtogeek.blog\/es\/wp-json\/wp\/v2\/posts\/8135\/revisions"}],"predecessor-version":[{"id":8136,"href":"https:\/\/howtogeek.blog\/es\/wp-json\/wp\/v2\/posts\/8135\/revisions\/8136"}],"wp:attachment":[{"href":"https:\/\/howtogeek.blog\/es\/wp-json\/wp\/v2\/media?parent=8135"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/howtogeek.blog\/es\/wp-json\/wp\/v2\/categories?post=8135"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/howtogeek.blog\/es\/wp-json\/wp\/v2\/tags?post=8135"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Navegar a su p\u00e1gina<\/h3>\n
C\u00f3mo llegar a Inspeccionar Elemento<\/h3>\n
\n
Eche un vistazo al HTML y los estilos<\/h3>\n
M\u00e1s pesta\u00f1as para informaci\u00f3n m\u00e1s detallada<\/h3>\n
\n
C\u00f3mo aprovechar al m\u00e1ximo la inspecci\u00f3n<\/h2>\n