Uso de la herramienta "Inspeccionar" de Google Chrome para diagnósticos de sitios web
Google Chrome no solo es un navegador rápido para consumidores, sino que también oculta una serie de características para desarrolladores bajo su capó. Puedes revelar parte de este poder con la herramienta “Inspeccionar”. Aunque inicialmente puede ser abrumadora, la herramienta te brinda información sobre cómo se construyen los sitios web y puede ayudarte a depurar tus propios sitios.
Accediendo a la herramienta Inspeccionar
La herramienta Inspeccionar se puede encontrar en el menú contextual de Chrome.
Haz clic derecho en cualquier elemento de tu navegador y selecciona “Inspeccionar” en el menú contextual.
Una ventana aparecerá en el lado del navegador Chrome, como se ve a continuación. Esto se llama el panel de DevTools. Si alguna vez has usado Firebug en Firefox, podrías reconocer algunas partes de él.
Hay mucho aquí, así que examinemos las piezas individuales.
Inspeccionando el Inspector
El panel de inspección está dividido en varias pestañas diferentes que son visibles en la parte superior de la ventana. Nos centraremos en la pestaña predeterminada de Elementos.
Hay dos botones útiles junto a estas pestañas. El primero es la herramienta Inspeccionar Elemento.
Esta herramienta te permite pasar el mouse sobre y seleccionar diferentes elementos del DOM para inspeccionarlos.
El segundo botón activa el modo de vista previa de dispositivo. En este modo, puedes ver cómo se ve tu página web en diferentes resoluciones y tamaños de pantalla.
Si haces clic en ese botón, verás cómo tu página web se ajusta a una nueva vista.
Luego puedes usar el menú desplegable sobre la vista previa de la página o los controladores en los lados de la vista previa de la página para redimensionar la ventana de vista previa del dispositivo.
Vista HTML
La mayor parte de la pestaña de DevTools está ocupada por el panel HTML.
Este panel es como un “Ver fuente” superpotente. Está estructurado de acuerdo con el DOM, con elementos anidados dentro de sus elementos padre.
Verás que el elemento que “inspeccionaste” al principio está automáticamente resaltado con un fondo gris o azul. Aquí, he inspeccionado una imagen que está contenida en un enlace. Como era de esperar, veo una etiqueta de ancla resaltada.
Pero, ¿dónde está mi imagen? Puedo revelar cualquier elemento del DOM anidado en la etiqueta de ancla haciendo clic en el triángulo de divulgación al lado de la. En este caso, la flecha revela la etiqueta que esperaba encontrar.
También notarás una pequeña barra de menú en la parte inferior del panel HTML.
Esto se llama la ruta de migas, y te muestra todos los elementos padre del elemento seleccionado. Para navegar a uno de esos elementos, simplemente haz clic en él.
Estilos
Debajo de la vista HTML también vemos un panel que muestra cualquier regla CSS que se aplique a nuestro elemento. Esto se llama el panel de Estilos, y en este caso vemos todas las reglas que se aplican a la etiqueta de ancla que inspeccioné anteriormente.
Puedes activar o desactivar una regla pasando el mouse sobre ella y haciendo clic en la casilla de verificación junto a ella.
Verás este cambio reflejado en la vista previa de la página de inmediato. Y si haces clic directamente en una regla, puedes cambiar su nombre y valor.
También puedes buscar reglas particulares usando el cuadro de búsqueda de Filtro.
Sin embargo, el panel de Estilos es capaz de mucho más que eso. Consulta la documentación de Google para una explicación completa de las muchas funciones del panel de Estilos.
Modelo de Caja y Estilo Computado
Junto a la vista de estilos está el modelo de caja para mi elemento seleccionado. Si no estás familiarizado, el modelo de caja es una representación abstracta del margen, borde, relleno y tamaño del contenido aplicado a un elemento particular.
En este caso, puedo ver que mi elemento tiene un tamaño primario de 461 x 209 píxeles. No contiene reglas de margen, borde o relleno, por lo que esas cajas están en blanco.
Si eliges un elemento con algunas reglas de posición, margen, borde o relleno, tu modelo de caja podría verse más así.
También puedes ver un modelo de caja in situ si pasas el mouse sobre los elementos del DOM con la herramienta Inspeccionar Elemento habilitada.
Debajo del modelo de caja hay una lista de todas las reglas de estilo que se aplican a este elemento en particular. Esto es ligeramente diferente del panel de Estilos. No muestra las líneas reales de CSS, solo los efectos de esas reglas. Esto se llama el “estilo computado” del objeto, y es el resultado combinado de tu CSS.
Finalmente, puedes buscar reglas particulares escribiendo en el cuadro de Filtro.
Conclusión
Si trabajas con páginas web con frecuencia, la herramienta Inspeccionar de Chrome vale la pena explorar. Y las otras pestañas en DevTools, como Consola y Red, pueden ser invaluables para los desarrolladores. Hay más de lo que podemos cubrir en este momento, pero la documentación de Google es completa y útil.
