Cómo inspeccionar un elemento en Chrome

Coescrito por Luigi Oppido

Este wikiHow te enseñará cómo inspeccionar el código fuente HTML de un elemento visual de cualquier página web en Google Chrome, usando una computadora.

Pasos

Descargar el PDF

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/bf\/Inspect-Element-on-Chrome-Step-1-Version-2.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-1-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/bf\/Inspect-Element-on-Chrome-Step-1-Version-2.jpg\/v4-728px-Inspect-Element-on-Chrome-Step-1-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

El icono de Chrome se ve como una bola de colores con un punto azul en el centro. Puedes encontrarlo en la carpeta “Aplicaciones” en una Mac, o en el menú “Inicio” en Windows.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b1\/Inspect-Element-on-Chrome-Step-2-Version-2.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-2-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b1\/Inspect-Element-on-Chrome-Step-2-Version-2.jpg\/v4-728px-Inspect-Element-on-Chrome-Step-2-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Este botón está ubicado al lado de la barra de direcciones, en la esquina superior derecha de la ventana del navegador. Se abrirá un menú desplegable.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/05\/Inspect-Element-on-Chrome-Step-3-Version-2.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-3-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/05\/Inspect-Element-on-Chrome-Step-3-Version-2.jpg\/v4-728px-Inspect-Element-on-Chrome-Step-3-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Aparecerá un submenú.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/24\/Inspect-Element-on-Chrome-Step-4-Version-2.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-4-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/24\/Inspect-Element-on-Chrome-Step-4-Version-2.jpg\/v4-728px-Inspect-Element-on-Chrome-Step-4-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

4
Haz clic en Herramientas para desarrolladores en el submenú “Más herramientas”. Esto abrirá la columna del Inspector en el lado derecho de la ventana del navegador.
- Como alternativa, puedes abrir el Inspector con un atajo de teclado. Este atajo es Opción + ⌘ Cmd + I en Mac y Ctrl + Alt + I en Windows.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0f\/Inspect-Element-on-Chrome-Step-5-Version-2.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-5-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0f\/Inspect-Element-on-Chrome-Step-5-Version-2.jpg\/v4-728px-Inspect-Element-on-Chrome-Step-5-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Al mover el ratón hacia un elemento o una línea en el Inspector, se resaltará el elemento seleccionado en la página web.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/ad\/Inspect-Element-on-Chrome-Step-6-Version-2.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-6-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/ad\/Inspect-Element-on-Chrome-Step-6-Version-2.jpg\/v4-728px-Inspect-Element-on-Chrome-Step-6-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

El menú de clic derecho aparecerá en un cuadro desplegable.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/20\/Inspect-Element-on-Chrome-Step-7-Version-2.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-7-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/20\/Inspect-Element-on-Chrome-Step-7-Version-2.jpg\/v4-728px-Inspect-Element-on-Chrome-Step-7-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

7
Selecciona Inspeccionar en el menú desplegable. Esto desplazará la columna del Inspector hacia arriba o hacia abajo al elemento seleccionado y resaltará su código fuente.
- No tienes que abrir manualmente la columna del Inspector para hacerlo. Al seleccionar Inspeccionar en el menú de clic derecho, el Inspector se abrirá automáticamente.
Anuncio

Iniciar sesión

Cómo inspeccionar un elemento en Chrome

Pasos

wikiHows relacionados

Acerca de este wikiHow

¿Te ayudó este artículo?

Artículos relacionados

¡Suscríbete al boletín gratuito de wikiHow!

Síguenos

Compartir

Explore Categories