Google Chrome no solo es un navegador de consumo rápido, sino que también esconde una serie de funciones para desarrolladores bajo su capó. Puede revelar algo de este poder con la herramienta “Inspeccionar”. Si bien inicialmente es abrumadora, la herramienta le brinda información sobre cómo se construyen los sitios web y puede ayudarlo a depurar sus propios sitios.
Acceder a la herramienta de inspección
Índice
La herramienta Inspeccionar se puede encontrar en el menú contextual de Chrome.
Haga clic 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 como se ve a continuación. A esto se le llama el panel DevTools. Si alguna vez usaste Firebug en Firefox, es posible que reconozcas algunas partes.
Hay mucho aquí, así que examinemos las piezas individuales.
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 predeterminada.
Hay dos botones útiles junto a estas pestañas. La primera es la herramienta Inspeccionar elemento.
Esta herramienta le permite pasar el mouse y seleccionar diferentes elementos DOM para inspeccionar.
El segundo botón activa el modo Vista previa del dispositivo. En este modo, puede ver cómo se ve su página web en diferentes resoluciones y tamaños de pantalla.
Si hace clic en ese botón, verá su página web en una nueva vista.
Luego, puede usar el menú desplegable que se encuentra sobre la vista previa de la página o las manijas a 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 una “Ver código fuente” superpoderosa. 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 esperaba, 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 desplegable al lado de <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.
A esto se le llama ruta de navegación y le muestra todos los elementos principales del elemento seleccionado. Para navegar a uno de esos elementos, simplemente haga clic en él.
Estilos
Debajo de la vista HTML también vemos un panel que muestra las reglas CSS que se aplican a nuestro elemento. Esto se denomina panel Estilos y, en este caso, vemos todas las reglas que se aplican a la etiqueta de ancla que inspeccioné anteriormente.
Puede activar y desactivar una regla colocando el cursor sobre ella y haciendo clic en la casilla de verificación junto a ella.
Verá este cambio reflejado en la vista previa de la página de inmediato. Y si hace clic directamente en una regla, puede cambiar su nombre y valor.
También puede buscar reglas particulares utilizando el cuadro de búsqueda Filtro.
Sin embargo, el panel Estilos es capaz de mucho más que eso. Consulte la documentación de Google para obtener una explicación completa de las muchas funciones del panel Estilo.
Modelo de caja y estilo calculado
Junto a la vista de estilo está el modelo de caja para mi elemento seleccionado. Si no está familiarizado, el modelo de caja es una representación abstracta del margen, borde, relleno y tamaño del contenido aplicado a un elemento en particular.
En este caso, puedo ver que mi elemento tiene un tamaño principal de 461 x 209 píxeles. No contiene reglas de margen, borde o relleno, por lo que esos cuadros están en blanco.
Si elige un elemento con alguna posición, margen, borde o reglas de relleno, su modelo de caja podría verse más como esto.
También puede ver un modelo de caja in situ si pasa el mouse sobre los elementos 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 Estilos. No muestra las líneas reales de CSS, solo los efectos de esas reglas. Esto se llama el “estilo calculado” del objeto y es el resultado combinado de su CSS.
Finalmente, puede buscar reglas particulares escribiendo en el cuadro Filtro.
Conclusión
Si trabaja con páginas web con frecuencia, vale la pena explorar la herramienta Inspeccionar de Chrome. Y las otras pestañas de DevTools, como Consola y Red, pueden ser invaluables para los desarrolladores. Hay más de eso de lo que podemos cubrir en este momento, pero la propia documentación de Google es completa y útil.
