Google Chrome no sólo es un navegador de consumo rápido, sino que también oculta una gran cantidad de funciones para desarrolladores. Puede revelar parte de esta potencia con la herramienta «Inspeccionar». Aunque inicialmente abrumadora, la herramienta le ofrece una visión de cómo se construyen los sitios web, y puede ayudarle a depurar sus propios sitios.
Acceso a la herramienta Inspeccionar
La herramienta Inspeccionar se encuentra en el menú contextual de Chrome.
Haga clic con el botón derecho en cualquier elemento de su navegador y haga clic en «Inspeccionar» en el menú contextual.
Aparecerá una ventana en el lateral del navegador Chrome, tal y como se muestra a continuación. Esto se llama el panel DevTools. Si alguna vez has usado Firebug en Firefox, es posible que reconozcas algunas partes de él.
Hay mucho aquí, así que examinemos las partes de manera individual.
Inspección del 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 Elementos por defecto.
Hay dos botones útiles junto a estas pestañas. La primera es la herramienta Inspeccionar elemento.
Esta herramienta le permite pasar el ratón por encima y seleccionar los diferentes elementos DOM a inspeccionar.
El segundo botón activa el modo Vista previa del dispositivo. En este modo puede ver el aspecto de su página web en diferentes resoluciones y tamaños de pantalla.
Si hace clic en ese botón, verá que su página web se ajusta a una nueva vista.
A continuación, puede utilizar el menú desplegable situado encima de la vista previa de la página o los controles de los lados de la vista previa de la página para cambiar el tamaño de la ventana de vista previa del dispositivo.
Vista HTML
La mayor parte de la pestaña DevTools está ocupada por el panel HTML.
Este panel es como un «View Source» súper potente. Está estructurado según el DOM, con elementos anidados dentro de sus elementos padres.
Verá que el elemento que «inspeccionó» al principio se resalta automáticamente 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 DOM anidado en la etiqueta de anclaje haciendo clic en el triángulo de revelación junto a <a>. En este caso la flecha revela la etiqueta <img> que esperaba encontrar.
También notará una pequeña barra de menú en la parte inferior del panel HTML.
Esto se llama el camino de la miga de pan, y muestra todos los elementos de nivel superior del elemento seleccionado. Para navegar a uno de estos elementos, simplemente haga clic en él.
Estilos
Debajo de la vista HTML también vemos un panel que muestra las reglas anyCSS que se aplican a nuestro elemento. Esto se llama el panel Estilos, y en este caso vemos todas las reglas que se aplican a la etiqueta de anclaje que inspeccioné anteriormente.
Puede activar y desactivar una regla al pasar el puntero del ratón sobre ella y hacer clic en la casilla de verificación situada junto a ella.
Verá este cambio reflejado en la vista previa de la página inmediatamente. Y si hace clic directamente en una regla, puede cambiar su nombre y valor.
También puede buscar reglas concretas utilizando el cuadro de búsqueda Filtro.
Consulte la documentación de Google para obtener una explicación completa de las numerosas funciones del panel Styles.
Modelo de caja y estilo calculado
Junto a la vista de estilo se encuentra el modelo box de mi elemento seleccionado. Si no está familiarizado, el modelo de caja es una representación abstracta del margen, el borde, el relleno y el tamaño del contenido aplicado a un elemento en 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 casillas están en blanco.
Si elige un elemento con algunas reglas de posición, margen, borde o relleno, el modelo de la caja podría parecerse más a esto.
También puede ver un modelo de caja in situ si pasa el ratón por encima de los elementos DOM con la herramienta Inspeccionar elemento activada.
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 Estilos. No muestra las líneas reales de CSS – sólo los efectos de esas reglas. Esto se llama el «estilo calculado» del objeto, y es el resultado combinado de su CSS.
Por último, puede buscar reglas concretas escribiendo en el cuadro Filtro.
Conclusión
Si trabajas con páginas web con frecuencia, vale la pena explorar la herramienta Inspeccionar de Chrome. Y las otras pestañas de DevTools, como Console y Network, pueden ser de gran valor para los desarrolladores. Hay más de lo que podemos cubrir ahora mismo, pero la propia documentación de Google es exhaustiva y útil.
