Cómo inspeccionar elementos en Mac, Windows, iPhone y iPad

Los desarrolladores y diseñadores de UI utilizan la función Inspeccionar elemento para modificar sitios web en línea sin cambiar el código fuente. Pero, ¿cómo inspeccionar elementos sin realizar un curso de desarrollo web?

Inspect Element es una práctica herramienta para desarrolladores que viene lista para usar con los navegadores web populares. Solo necesita saber cómo implementar la herramienta con unos pocos clics mientras navega por sitios web.

Puede hacer muchos trucos mágicos, como cambiar el diseño del sitio web, tomar capturas de pantalla sin texto, cambiar fuentes, modificar números y más.

Encuentre a continuación una guía concisa paso a paso para aprender a inspeccionar elementos sin esfuerzo.

¿Qué es el elemento de inspección?

Inspect Element es una herramienta de desarrollo web disponible en la mayoría de los navegadores web. Puede usarlo para editar el código fuente del front-end de cualquier sitio web que esté visitando.

Los cambios que realiza ocurren dentro de una caja de arena dentro de su navegador web. Por lo tanto, no está realizando ningún cambio en el sitio web real. Además, los cambios superficiales que hagas desaparecerán cuando actualices la página.

Aquí hay algunas formas creativas de usarlo:

• Necesitas tomar una captura de pantalla de un sitio web y los textos de la imagen te preocupan. Use la herramienta Inspeccionar elemento para eliminar esos textos.
• Quiere bromear con sus amigos mostrándoles su nombre en el New York Times o el Washington Post. Inspeccionar Elemento es la mejor manera de hacer esto.
• Pruebe los códigos de depuración en sitios web aplicándolos en tiempo real con la herramienta Inspeccionar elemento. Si funciona, puede cambiar el código fuente del backend.
• Como especialista en marketing digital, puede revelar las palabras clave de la competencia, los títulos de SEO, las metaetiquetas, etc., utilizando esta poderosa herramienta de desarrollo web.

Cómo inspeccionar elementos en Windows

Usar la herramienta Inspeccionar elemento en Windows es ridículamente fácil. Encuentre a continuación una guía paso a paso para inspeccionar elementos utilizando varios navegadores web en Windows:

Herramienta de inspección de Google Chrome

Cómo inspeccionar elementos en el navegador Chrome de Windows

• Cuando utilice Google Chrome , haga clic con el botón derecho en cualquier parte de un sitio web.
• Aparecerá el menú contextual del botón derecho.
• En la parte inferior, verá Inspeccionar .
• Haga clic en Inspeccionar para ver los códigos HTML y CSS en un panel del lado derecho .

¿Cómo abro Inspeccionar elemento en Chrome sin hacer clic derecho?

Hay algunos atajos útiles para abrir la herramienta Inspeccionar elemento en Google Chrome para Windows. Estas teclas de acceso rápido son las siguientes:

• Ctrl + Mayús + C
• La tecla de función F12

Las teclas de acceso rápido anteriores también funcionan en el navegador Mozilla para Windows.

Herramienta de inspección de Mozilla

Cómo inspeccionar elementos en el navegador Windows Mozilla

En el navegador Mozilla, el proceso es el mismo que en Google Chrome. Sin embargo, la ventana del Inspector aparecerá en la parte inferior del navegador en lugar del lado derecho, como en Google Chrome.

Herramienta de inspección de Microsoft Edge

Cómo inspeccionar elementos en el navegador Windows Edge

Sorprendentemente, Inspect Element de Microsoft Edge funciona de manera similar al navegador Google Chrome. La herramienta Inspeccionar está disponible al hacer clic derecho. Además, los códigos HTML y CSS aparecen en el lado derecho, similar a Google Chrome.

Cómo inspeccionar elementos en Mac

¿Está utilizando Google Chrome, Mozilla Firefox o Microsoft Edge en las computadoras Mac de Apple? En caso afirmativo, puede implementar la herramienta Inspeccionar elemento siguiendo los pasos mencionados anteriormente en la sección de Windows.

Pero, si está utilizando el navegador web predeterminado de macOS, Safari, entonces usar la herramienta Inspeccionar elemento es un juego complicado. De forma predeterminada, Safari no muestra Inspeccionar elemento en una Mac. Esto es lo que debe hacer:

Cómo abrir Inspeccionar elemento en Mac

En primer lugar, debe activar las herramientas de desarrollo en Safari en una Mac. Así es cómo:

• Ejecute el navegador Safari .
• Visite un sitio web en el que desee inspeccionar elementos web.
• Seleccione Safari en la barra de menú superior del navegador Safari.
• Haga clic en Preferencias en el menú contextual que se abre.
• En la pantalla Preferencias , seleccione Avanzado .
• Marque el menú Mostrar desarrollo en la parte inferior de la pantalla de Preferencias avanzadas .

Has habilitado con éxito las herramientas de desarrollador en Safari para Mac. Ahora, siga estos pasos para usar Inspeccionar elemento:

• En cualquier elemento de un sitio web como un texto o una imagen, haga clic con el botón derecho en .
• Aparecerá un menú contextual. En la parte inferior, verá Inspeccionar elemento .
• Haga clic en eso para abrir una sección de depuración debajo del sitio web que muestra los códigos HTML y CSS .

What Are the Keys for Inspect Element?

Es posible que esté buscando accesos directos para Inspeccionar elemento en Mac. Puedes usar lo siguiente:

• Comando + Mayús + C
• Presione la tecla Control y luego seleccione cualquier elemento.
• Haz clic en el trackpad con dos dedos

Cómo inspeccionar elementos en Chromebooks

Chromebook utiliza Google Chrome como navegador predeterminado. Por lo tanto, después de abrir cualquier sitio web, simplemente haga clic derecho para encontrar la opción Inspeccionar elemento en el menú contextual que sigue.

Si usa un Chromebook del trabajo o la escuela, es posible que se esté haciendo esta pregunta:

Why Can’t I Inspect on My School Chromebook?

La mayoría de los administradores de escuelas y empresas desactivan las funciones avanzadas en el Chromebook que le proporcionan para trabajar o estudiar. Dado que las herramientas para desarrolladores son funciones avanzadas, es probable que el Chromebook de su escuela o trabajo no muestre la herramienta Inspeccionar elemento.

Cómo inspeccionar elementos en iPad/iPhone

Desafortunadamente, no puede usar la herramienta Inspeccionar elemento en un iPhone o iPad sin una Mac.

iOS y iPadOS tienen Web Inspector para la aplicación Safari. Sin embargo, solo funciona si conecta el dispositivo móvil a una Mac en la que ya haya activado las herramientas de desarrollo para Safari. A continuación se muestran los pasos que puede probar:

• Abra la aplicación de configuración de iPad/iPhone .
• Haga clic en Safari en el panel de navegación del lado izquierdo.

Abrir la configuración de Safari en iPad o iPhone

• Luego, desplácese hacia abajo en el lado derecho para buscar y seleccionar Avanzado .

Activar Web Inspector en iPad y iPhone

• Active la palanca para Web Inspector .
• Ahora, conecte el dispositivo móvil a Mac mediante USB .
• Autorice el iPhone/iPad en Mac.
• Abra cualquier sitio web en un dispositivo móvil en Safari.
• Ahora, ejecute Safari en la Mac y seleccione Desarrollar en la barra de menú superior.
• En el menú contextual que se abre, busque el nombre de su dispositivo móvil.
• Pase el cursor sobre el dispositivo móvil para ver todos los sitios web abiertos.
• Ahora, seleccione cualquier sitio web para ver el código fuente HTML y CSS en el navegador Safari de Mac.

Conclusión

Ha explorado todas las formas posibles de utilizar la herramienta Inspeccionar elemento para la edición temporal de páginas web. También aprendió cómo inspeccionar elementos para varios dispositivos como Mac, Windows, Chromebook, iPad y iPhone.

La próxima vez que necesite modificar una página web por diversión o por necesidades profesionales, pruebe estos métodos. Definitivamente te encantarán estos sencillos pasos sobre otros métodos complicados que se explican en otra parte.

No olvide dejar comentarios a continuación si los pasos anteriores lo ayudaron, cualquier método que encuentre desafiante o algún consejo secreto sobre la herramienta Inspeccionar elemento.

¿Necesita una página web como referencia impresa? ¡ Aprenda cómo guardar rápidamente una página web como PDF ahora!