Qué saber
-
En Safari: haga clic derecho en una página web y seleccione Inspeccionar elemento.
- En Chrome, puede hacer clic derecho y hacer clic en Inspeccionar.
- Para activar la función en Safari: Safari > Preferencias > Avanzado > Mostrar el menú Desarrollar en la barra de menús cuadro.
Este artículo le enseña cómo inspeccionar el elemento de un sitio web en Mac. Examina cómo hacerlo a través de Safari y Google Chrome.
¿Cómo se usa la función de inspección de elementos en una Mac?
Antes de inspeccionar elementos en Mac al usar Safari, debe habilitar el menú de desarrollador dentro del navegador. He aquí un vistazo a cómo encenderlo y qué hacer para inspeccionar un elemento.
Si puede ver Desarrollar entre Marcadores y Ventana, el menú Desarrollador ya se ha habilitado y puede pasar al paso 4.
Uso de la función de inspección de elementos en Safari
Aquí se explica cómo usar Inspect Element en Safari, el navegador predeterminado en las computadoras Mac.
-
En Safari, haga clic en Safari > Preferencias.
Image -
Haga clic en Avanzado.
Image -
Haga clic en Mostrar el menú Desarrollo en la barra de menús y luego cierre la ventana.
Image - Al navegar por un sitio web, haga clic derecho en el elemento que desea inspeccionar.
-
Haga clic en Inspeccionar elemento.
Image -
Ahora puede ver el código detrás del sitio web que ha inspeccionado.
Image
Uso de la función de inspección de elementos en Chrome en una Mac
Si usa Chrome en lugar de Safari en su Mac, es aún más fácil ver un elemento ya que no es necesario habilitar la función. Esto es lo que debe hacer.
- En Chrome, navega a un sitio web.
- Haga clic derecho en el elemento que desea inspeccionar.
-
Haga clic en Inspeccionar.
Image -
Ahora puede ver el código en una ventana lateral en Chrome.
Image
¿Por qué no puedo inspeccionar en mi Mac?
Es posible que no pueda inspeccionar un elemento en su Mac si no ha habilitado el menú Desarrollador en Safari. Aquí tienes un recordatorio de cómo hacerlo.
-
En Safari, haga clic en Safari > Preferencias.
Image -
Haga clic en Avanzado.
Image -
Haga clic en Mostrar el menú Desarrollo en la barra de menús y luego cierre la ventana.
Image
Cómo realizar cambios en el sitio web inspeccionando el elemento
Además de permitirle ver el código en un sitio web, también es posible cambiar temporalmente cualquier elemento del sitio web a través de Inspeccionar elemento. Aquí se explica cómo hacerlo a través de Safari.
El proceso es muy similar en otros navegadores.
- Al navegar por un sitio web, haga clic derecho en el elemento que desea inspeccionar.
- Haga clic en Inspeccionar elemento.
- Haz doble clic en el texto del código para que sea editable.
- Elimínelo o ingrese una nueva cadena de texto.
- Toque Intro.
- El código ahora se ha cambiado temporalmente solo para su beneficio.
¿Por qué desea utilizar la función de inspección de elementos?
Poder inspeccionar un elemento es útil por muchas razones.
- Para cambiar el código sobre la marcha. Los diseñadores de sitios web pueden cambiar temporalmente las cosas en un sitio web para ver cómo los cambios afectan las cosas.
- Para comprobar el código. Tanto los diseñadores como el personal de marketing pueden verificar el código para confirmar que elementos como los detalles de Google Analytics están allí.
- Para ver imágenes por separado de un sitio. Si un sitio no le permite abrir una imagen en una nueva pestaña o ventana, ver el elemento lo hace posible.
-
Tinker. Ver el código de una página web puede ayudarlo a comprender lo que ve, eliminando el misterio de qué y por qué del sitio en el que se encuentra. Es como desmontar un electrodoméstico para ver cómo funciona, pero en este caso no hay tornillos que perder.
Preguntas Frecuentes
¿Es legal inspeccionar un sitio web?
Sí. Sin embargo, si planea usar cualquier código o activos de un sitio web, asegúrese de consultar con el propietario y agregue una nota de derechos de autor.
¿Cómo copio HTML de un sitio web con el elemento de inspección?
En Chrome, haga clic derecho en la página y seleccione Inspeccionar, luego vaya a la sección superior y haga clic derecho en la etiqueta (p. ej.). Seleccione Copiar > Copiar HTML externo, luego pegue el código en un archivo de texto o HTML.
¿Puedo copiar CSS de un sitio web con elemento de inspección?
Sí. Haga clic con el botón derecho en el elemento que desea copiar y elija Inspeccionar. Haga clic derecho en el código res altado y seleccione Copiar > Copiar estilos.
¿Cómo veo mis contraseñas guardadas usando el elemento de inspección?
Para revelar contraseñas ocultas, haga clic derecho en el cuadro de texto de la contraseña y seleccione Inspeccionar. En la sección res altada, busque type=”password” y reemplace password con text. Hay formas más fáciles de mostrar todas sus contraseñas en Chrome.
