Artículo basado en uno propiedad de Elegant Themes

Si trabajas con muchos sitios web, probablemente siempre estés buscando formas más rápidas y eficientes de hacer las cosas. Si es así, la herramienta Inspect Element, disponible en la mayoría de los navegadores, puede ser un recurso muy útil para tener a mano. Con ella, puedes identificar rápidamente las clases CSS, previsualizar los cambios en los elementos de una página, simular un sitio en dispositivos móviles y mucho más.En este artículo, presentaremos la herramienta Inspeccionar elemento y te mostraremos cómo acceder a ella en los navegadores web más populares. A continuación, te mostraremos algunos ejemplos de cómo puedes utilizarla como parte de tu flujo de trabajo de desarrollo web.

¡Vamos a profundizar!

Cómo acceder a la herramienta de inspección de elementos en los principales navegadores

La herramienta Inspeccionar Elemento es una utilidad que te permite ver el código fuente subyacente de cualquier página web. Además, puedes usarla para hacer cambios temporales y ver los resultados en tiempo real mientras dejas el código fuente original intacto. Esto es increíblemente útil si necesitas probar un cambio o diagnosticar un problema. También puede ser útil si encuentras un sitio con una característica que te gusta y tienes curiosidad por saber cómo se implementó.

La mayoría de los navegadores, como Chrome, Firefox y Safari, ofrecen una variación de esta herramienta. Veamos cómo acceder a ella en cada uno de ellos.

Acceso al elemento de inspección en Google Chrome

Hay tres maneras de acceder a la herramienta de inspección de elementos en Chrome:

  • Haz clic con el botón derecho del ratón en un elemento de la página y selecciona Inspeccionar.
  • Haz clic en el menú de tres puntos situado en la esquina superior derecha de la ventana y selecciona Más herramientas > Herramientas de desarrollo.
  • Pulsa Ctrl + Shift + C en tu teclado (Cmd + Option + C en Mac).

Cuando la herramienta se abra, te presentará una vista dividida. Por un lado, tienes una vista previa del sitio web que estás inspeccionando, junto con algunos controles para ajustar la vista y simular diferentes resoluciones de pantalla:

En el otro, hay varios paneles con información. El panel superior es el HTML de la página. Al pasar el ratón por encima de una parte del código, se resalta el área correspondiente de la página a la derecha.

Debajo hay un panel que muestra información sobre la página. Los detalles que se muestran aquí varían en función de la pestaña que se seleccione. En las capturas de pantalla anteriores, se muestran los estilos CSS de la página.

El panel inferior es simplemente noticias y actualizaciones sobre las Herramientas para desarrolladores de Chrome. Puedes cerrarlo con seguridad para reducir el desorden haciendo clic en la X.

Por último, puedes cambiar la ubicación de estos paneles haciendo clic en el menú de tres puntos situado en la esquina superior derecha del panel HTML y seleccionando una de las opciones del muelle.

Acceso a la herramienta de inspección de elementos en Mozilla Firefox

La herramienta Inspeccionar elemento en Firefox es bastante similar a la de Chrome y se puede acceder a ella de forma similar:

  • Haga clic con el botón derecho en un elemento de la página y seleccione Inspeccionar elemento.
  • Haz clic en el menú hamburguesa de la esquina superior derecha de la ventana de Firefox y selecciona Desarrollador web > Inspector.
  • Pulsa Ctrl + Shift + C en tu teclado (Cmd + Option + C en Mac).

Firefox coloca por defecto los paneles de información en la parte inferior de la pantalla:

Sin embargo, puedes moverlos fácilmente haciendo clic en el menú de tres puntos y seleccionando una opción diferente.

Acceso al elemento de inspección en Safari

En los ordenadores Mac, el navegador web Safari también ofrece una herramienta de inspección de elementos. Sin embargo, hay un paso adicional para acceder a ella: tendrás que habilitar las herramientas para desarrolladores de Safari.

Para ello, dirígete a la barra de menú de la parte superior de la pantalla y ve a Safari > Preferencias > Avanzadas. A continuación, puedes marcar la casilla correspondiente para activar las herramientas de desarrollo:

Una vez habilitadas, puedes acceder a la función de inspección de elementos de forma similar a la de otros navegadores:

  • Haz clic con el botón derecho del ratón en un elemento y selecciona Inspeccionar elemento.
  • En la barra de menús superior, ve a Desarrollo > Mostrar Inspector Web.
  • Presiona Cmd + Opción + I en tu teclado.

La disposición inicial de la herramienta de Safari difiere un poco de la de los navegadores:

Sin embargo, al igual que con Chrome y Firefox, puedes personalizarlo fácilmente haciendo clic en los iconos de la esquina superior izquierda de la ventana del inspector.

5 usos comunes de la herramienta de inspección de elementos

Ahora que sabes cómo acceder a la herramienta Inspeccionar elemento, veamos algunas de las cosas útiles que puedes hacer con ella. Hay un montón de posibilidades, pero los usos siguientes son algunos de los más comunes. Ten en cuenta que usaremos Chrome para estos ejemplos, pero las características deberían funcionar de manera similar en otros navegadores.

1. Encontrar clases CSS en un sitio web

Una de las formas más útiles de aprovechar Inspect Element es encontrar detalles en las hojas de estilo en cascada (CSS) de una página. Esto es útil por un par de razones. En primer lugar, si estás navegando por Internet y te encuentras con un sitio cuyo estilo te encanta, puedes echar un vistazo al CSS para recoger algunas ideas para tu propio diseño web.

También es útil en tu propio sitio. Por ejemplo, si un elemento no se ve del todo bien, puedes inspeccionarlo rápidamente para asegurarte de que utiliza el CSS correcto.

Hay dos formas básicas de comprobar los estilos utilizando Inspect Element. Si quieres ver rápidamente un solo elemento, puedes pasar el ratón sobre él en el panel de vista previa para ver alguna información básica sobre él:

Aquí puedes ver la combinación de colores, el tipo de letra, los márgenes y mucho más para la cabecera de nuestro blog. En los paneles detallados, la herramienta también resalta el código relevante para que puedas ver exactamente lo que está pasando. Al hacer clic en un elemento de la vista previa, se actualiza el panel de estilos para mostrar también su CSS:

Si al pasar el ratón por encima del elemento no parece hacer nada, asegúrate de que el icono del cursor en el panel del inspector está resaltado en azul:

En el caso de que conozcas la clase o estilo CSS específico que estás buscando y quieras ver todos los elementos que lo utilizan, también puedes utilizar la función de búsqueda. Con el inspector abierto, pulsa Ctrl + Shift + F en tu teclado (Cmd + Shift + F en Mac). Esto abre un cuadro de búsqueda en el que puedes buscar en el código de la página. Los resultados relevantes aparecerán resaltados, como si estuvieras buscando en un documento.

2. Solucionar problemas de un sitio

La herramienta de inspección de elementos es muy útil para solucionar problemas. Por ejemplo, si el color o el tipo de letra de un elemento no se ve del todo bien, puede comprobarlo rápidamente utilizando la herramienta como hemos descrito en la sección anterior.

También puede editar directamente el HTML de una página desde la herramienta Inspeccionar elemento. Simplemente haz doble clic en el código que quieres cambiar para editarlo.

Tenga en cuenta que el código no se modifica realmente en el sitio web: si actualiza la página, volverá a su forma original. Sin embargo, esta funcionalidad es extremadamente útil para realizar pruebas rápidas y solucionar problemas.

Por último, el depurador incorporado es una herramienta más avanzada que puedes utilizar para ver cualquier mensaje de error que se produzca entre bastidores. Para acceder a él, haz clic en Consola en la parte superior de la ventana del Inspector.

También hay otras pestañas disponibles para ver las fuentes, la actividad de la red, etc. Para acceder a la lista completa, haz clic en el icono de la doble flecha en la parte superior del inspector.

3. Editar el texto para previsualizar los cambios

Uno de los mejores usos del Elemento de Inspección es previsualizar rápidamente los cambios en el texto, la fuente o el color de una página. De esta manera, puede ver exactamente cómo se ve su idea sin siquiera entrar en su tablero de WordPress.

Para editar un elemento, haz clic con el botón derecho del ratón sobre él y elige Inspeccionar. Esto abre la herramienta con el código de ese elemento en el foco. Si ya tienes abierto Inspeccionar elemento, también puedes hacer clic en el elemento en el panel de vista previa para resaltar el código correspondiente.

A continuación, haz doble clic en el código para hacerlo editable. 

También puedes cambiar los colores. Sólo tienes que seleccionar el elemento y desplazarte por el panel de Estilos para encontrar la sección correspondiente. Puedes hacer clic en los cuadros de color para que aparezca un selector de color:

También puedes editar directamente el código hexadecimal del color si conoces el que quieres utilizar.

4. Vista previa de los cambios en la imagen

Inspect Element también facilita la vista previa de los cambios de imagen. Esta es una excelente manera de probar diferentes tamaños de imágenes.

Simplemente selecciona la imagen que quieres cambiar en el panel de vista previa, luego haz doble clic en su URL en el panel HTML.

A continuación, puede pegar la URL de una imagen diferente para probarla. Si la imagen está en la biblioteca multimedia de WordPress, puedes encontrar rápidamente la URL en los detalles del archivo adjunto.

Incluso hay un práctico botón para copiar la URL en el portapapeles. De nuevo, recuerda que cualquier cambio que hagas en el inspector es temporal y sólo visible para ti, así que no dudes en jugar.

5. Probar un sitio mediante la emulación de dispositivos

Por último, otra característica útil de Inspect Element es la capacidad de emular diferentes tamaños de pantalla e incluso dispositivos específicos. Esto te permite probar la capacidad de respuesta de un sitio y ver exactamente cómo aparecerá con varios factores de forma móvil.

Con el Inspector abierto, haz clic en el icono que parece un teléfono y una tableta apilados.

Esto activa la emulación de dispositivos. Tenga en cuenta que puede estar activada por defecto al abrir el inspector. Cambie el tamaño de la vista previa de la página utilizando los tiradores que la rodean, o haga clic en los desplegables de la parte superior del panel de vista previa para elegir varios dispositivos:.

También puedes introducir una relación de aspecto específica o incluso comprobar cómo se ve la página cuando se gira el dispositivo móvil haciendo clic en el icono «girar» de la parte superior del panel de vista previa. Para emular varios sensores, como el de ubicación y el táctil, haz clic en el menú de tres puntos del panel de inspección y selecciona Más herramientas > Sensores.

Conclusión

Tanto si eres nuevo en el desarrollo web como si eres un profesional experimentado, la herramienta Inspect Element es una potente utilidad que debería estar en tu arsenal. Es de fácil acceso, casi universalmente disponible, y hace una variedad de operaciones rápidas y fáciles.

En este artículo, demostramos cómo acceder a Inspect Element en Chrome, Firefox y Safari. También te mostramos cómo utilizarlo para localizar clases CSS, solucionar problemas de un sitio web, cambiar temporalmente el texto y las imágenes, y emular dispositivos móviles. Con este kit de herramientas, tienes todo lo que necesitas para hacer de Inspect Element una parte de tu flujo de trabajo.