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 los competidores, 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
- Cuando usas Google Chrome, botón derecho del ratón en cualquier lugar de un sitio web.
- Aparecerá el menú contextual del botón derecho.
- En la parte inferior, verás Inspeccionar.
- Hacer clic 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:
- Control + Cambio + 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
En el navegador Mozilla, el proceso es el mismo que en Google Chrome. sin embargo, el Inspector La ventana aparecerá en la parte inferior del navegador en lugar del lado derecho, como en Google Chrome.
Herramienta de inspección de Microsoft 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:
- Correr el navegador Safari.
- Visite un sitio web en el que desee inspeccionar elementos web.
- Seleccionar Safari desde la barra de menú superior del navegador Safari.
- Hacer clic preferencias del menú contextual que se abre.
- Sobre el pantalla de preferencias, seleccionar Avanzado.
- Marque la Mostrar Desarrollar menú en la parte inferior de la Preferencias avanzadas pantalla.
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, botón derecho del ratón.
- Aparecerá un menú contextual. En la parte inferior, verás Inspeccionar elemento.
- Haga clic en eso para abrir una sección de depuración debajo del sitio web que muestra HTML y CSS códigos.
¿Cuáles son las claves para el elemento de inspección?
Es posible que esté buscando accesos directos para Inspeccionar elemento en Mac. Puedes usar lo siguiente:
- Dominio + Cambio + C
- presione el 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:
¿Por qué no puedo inspeccionar en el Chromebook de mi escuela?
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:
- Abre el iPad/iPhone Ajustes aplicación
- Hacer clic Safari en el panel de navegación del lado izquierdo.
- Luego, desplácese hacia abajo en el lado derecho para buscar y seleccionar Avanzado.
- Active la palanca para inspector web.
- Ahora, conecte el dispositivo móvil a Mac usando 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 pasos sencillos 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? Aprender como guardar rápidamente una página web como PDF ¡ahora!