Cómo inspeccionar elementos de página web

Qué saber

• En Chrome, Firefox o Safari: haga clic con el botón derecho en un elemento y seleccione Inspeccionar .
• En Internet Explorer o Edge, habilite las inspecciones, haga clic con el botón derecho en un elemento y seleccione Inspect Element .

Este artículo explica cómo inspeccionar elementos en Chrome, Firefox, Safari, Internet Explorer y Microsoft Edge, incluida la forma de habilitar las inspecciones en IE y Edge.

Cómo inspeccionar elementos web con su navegador

Los sitios web se crean a partir de líneas de código, pero los resultados son páginas con imágenes, videos, fuentes y otras características. Para cambiar uno de esos elementos o ver en qué consiste, encuentre la línea de código que lo controla. Para hacer eso, use una herramienta de inspección de elementos. Usted no tiene que descargar una herramienta de inspección o instalar un complemento para su navegador web favorito. En su lugar, haga clic con el botón derecho en el elemento de página, luego seleccione Inspeccionar o Inspeccionar elemento . Sin embargo, la forma en que accede a esta herramienta varía según el navegador.

Este artículo usa derecho – clic para referirse a la acción del dispositivo del mouse en una PC con Windows y el control + haga clic acción en una Mac.

Inspeccione elementos en Google Chrome

En Google Chrome, hay dos formas de inspeccionar una página web utilizando Chrome DevTools incorporado de navegador y amp; apos; s:

• Haga clic derecho en un elemento en la página o en un área en blanco, luego seleccione Inspeccionar .
• Vaya al menú Chrome , luego seleccione Más herramientas & amp; gt; Herramientas para desarrolladores .

Video destacado


& lt; / img & gt ;

Use Chrome DevTools para copiar o editar el marcado del lenguaje de marcado de hipertexto (HTML) y ocultar o eliminar elementos hasta que la página se vuelva a cargar.

Cuando Chrome DevTools se abra al costado de la página, cambie su posición, sáquela de la página, busque archivos de página, seleccione elementos de la página para ver más de cerca, copie archivos y URL, y personalice la configuración.

Inspeccione elementos en Mozilla Firefox

Mozilla Firefox tiene dos formas de abrir su herramienta de inspección, llamada Inspector:

• Haga clic derecho en un elemento en la página web, luego seleccione Inspeccionar elemento .
• En la barra de menú de Firefox, seleccione Herramientas & amp; gt; Desarrollador web & amp; gt; Inspector & amp; # x200B ;.

& lt; / img & gt ;

A medida que mueve el puntero sobre elementos en Firefox, Inspector encuentra automáticamente la información del código fuente del elemento & amp; apos; s. Cuando selecciona un elemento, la búsqueda sobre la marcha se detiene y puede examinar el elemento desde la ventana Inspector.

Haga clic derecho en un elemento para encontrar los controles compatibles. Use los controles para editar la página como marcado HTML, copie o pegue el marcado HTML interno o externo, muestre las propiedades del Modelo de objetos de documento (DOM), tome una captura de pantalla o elimine el nodo, aplique nuevos atributos, consulte las Hojas de estilos en cascada (CSS) y más.

Inspeccionar elementos en Safari

Hay un par de formas de examinar elementos web en Safari:

• Haga clic con el botón derecho en cualquier elemento o espacio en una página web, luego seleccione Inspeccionar elemento .
• Vaya al menú Desarrollar , luego seleccione Mostrar inspector web .

& lt; / img & gt ;

Si no ve el menú Desarrollar, vaya al menú Safari y seleccione Preferencias . En la pestaña Avanzado , seleccione la casilla de verificación Mostrar menú Desarrollar en la barra de menú .

Seleccione elementos individuales en la página web para ver el marcado dedicado a esa sección.

Inspeccione elementos en Internet Explorer

Una herramienta de elementos de inspección similar, a la que se accede habilitando las Herramientas para desarrolladores, está disponible en Internet Explorer. Para habilitar las Herramientas del desarrollador, presione F12 . O vaya al menú Herramientas y seleccione Herramientas para desarrolladores .

Para mostrar el menú Herramientas, presione Alt + X .

Para inspeccionar elementos en una página web, haga clic con el botón derecho en la página, luego seleccione Inspeccionar elemento . Desde la herramienta de elementos de Internet Explorer Select, seleccione cualquier elemento de página para ver el marcado HTML o CSS. También puede deshabilitar o habilitar el resaltado de elementos mientras navega por el Explorador DOM.

& lt; / img & gt ;

Al igual que las otras herramientas de inspección de elementos, use Internet Explorer para cortar, copiar y pegar elementos y editar el marcado HTML, agregar atributos, copiar elementos con estilos adjuntos y más.

Inspeccionar elementos en Microsoft Edge

Antes de poder inspeccionar elementos en Microsoft Edge, debe habilitar la inspección. Hay dos formas de permitir la inspección:

• Vaya a la barra de direcciones e ingrese sobre: banderas . En el cuadro de diálogo, seleccione la casilla de verificación Mostrar vista Fuente e inspeccionar elemento en el menú contextual .
• Presione F12 , luego seleccione DOM Explorer .

Para inspeccionar un elemento, haga clic con el botón derecho en un elemento en una página web, luego seleccione Inspeccionar elemento .

& lt; / img & gt ;
& amp; # x203A; Informática