Cómo usar la herramienta de inspección de elementos de su navegador

Si trabaja con muchos sitios web, probablemente siempre esté buscando formas más rápidas y eficientes de hacer las cosas. Si es así, la herramienta Inspeccionar elemento, disponible en la mayoría de los principales navegadores, podría ser un recurso útil para tener a mano. Con él, puede identificar rápidamente las clases de CSS, obtener una vista previa de 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 le mostraremos cómo acceder a ella en los navegadores web más populares. Luego, lo guiaremos a través de algunos ejemplos de cómo puede usarlo como parte de su flujo de trabajo de desarrollo web.

¡Vamos a profundizar en!

Cómo acceder a la herramienta Inspeccionar elemento en los principales navegadores

La herramienta Inspeccionar elemento es una utilidad que le permite ver el código fuente subyacente de cualquier página web. Además, puede usarlo para realizar cambios temporales y ver los resultados en tiempo real mientras deja intacto el código fuente original. Esto es increíblemente útil si necesita probar un cambio o diagnosticar un problema. También puede ser útil si encuentra un sitio con una característica que le gusta y tiene curiosidad por saber cómo se implementó.

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

Acceso al elemento de inspección en Google Chrome

Hay tres formas de acceder a la herramienta Inspeccionar elemento en Chrome:

  • Haga clic con el botón derecho en un elemento de la página y seleccione Inspeccionar .
  • Haga clic en el menú de tres puntos en la esquina superior derecha de la ventana y seleccione Más herramientas > Herramientas para desarrolladores.
  • Presione  Ctrl + Shift + C  en su teclado ( Cmd + Option + C  en Mac).

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

Por otro lado, hay varios paneles que contienen información. El panel superior es el HTML de la página. Al pasar el cursor sobre parte del código, se resaltará el área relevante 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 según la pestaña que seleccione. En las capturas de pantalla anteriores, muestra los estilos CSS de la página.

El panel inferior es simplemente noticias y actualizaciones sobre las herramientas para desarrolladores de Chrome . Puede cerrar esto de forma segura para reducir el desorden haciendo clic en la X .

Finalmente, puede cambiar la ubicación de estos paneles haciendo clic en el menú de tres puntos en la esquina superior derecha del panel HTML y seleccionando una de las opciones de acoplamiento.

Accediendo al Elemento Inspeccionar en Mozilla Firefox

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

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

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

Sin embargo, puede 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 las computadoras Mac, el navegador web Safari también ofrece una herramienta Inspeccionar elemento. Sin embargo, hay un paso adicional para acceder a él: deberá habilitar las herramientas de desarrollo de Safari.

Para hacer esto, dirígete a la barra de menú en la parte superior de tu pantalla y navega a Safari > Preferencias > Avanzado . A continuación, puede marcar la casilla correspondiente para habilitar las herramientas de desarrollo:

Una vez habilitada, puede acceder a la función Inspeccionar elemento como en otros navegadores:

  • Haga clic con el botón derecho en un elemento y seleccione Inspeccionar elemento .
  • En la barra de menú superior, vaya a  Desarrollar > Mostrar inspector web.
  • Presiona  Cmd + Opción + I en tu teclado.

El diseño inicial de la herramienta de Safari difiere un poco de los navegadores:

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

5 usos comunes de la herramienta Inspeccionar elemento

Ahora que sabe cómo acceder a la herramienta Inspeccionar elemento, veamos algunas de las cosas útiles que puede hacer con ella. Hay toneladas de posibilidades, pero los usos a continuación son algunos de los más comunes. Tenga en cuenta que usaremos Chrome para estos ejemplos, pero las funciones deberían funcionar de manera similar en otros navegadores.

1. Encuentra clases de CSS en un sitio web

Una de las formas más útiles de aprovechar Inspeccionar elemento es buscar 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 solo está navegando por Internet y se encuentra con un sitio que realmente le encanta el estilo, puede echar un vistazo al CSS para recopilar algunas ideas para su propio diseño web .

También es útil en su propio sitio. Por ejemplo, si un elemento no se ve del todo bien, puede inspeccionarlo rápidamente para asegurarse de que esté usando el CSS correcto.

Hay dos formas básicas de verificar estilos usando Inspeccionar elemento. Si desea ver rápidamente un solo elemento, puede pasar el cursor sobre él en el panel de vista previa para ver información básica sobre él:

Aquí puede ver el esquema de color , la fuente , los márgenes y más para el encabezado de nuestro blog. En los paneles detallados, la herramienta también resalta el código relevante para que pueda ver exactamente lo que está pasando. Al hacer clic en un elemento en la vista previa, se actualizará el panel de estilos para mostrar también su CSS:

Si pasar el cursor sobre el elemento no parece estar haciendo nada, asegúrese de que el ícono del cursor en el panel del inspector esté resaltado en azul:

En el caso de que conozca la clase o el estilo CSS específico que está buscando y desee ver todos los elementos que lo utilizan, también puede utilizar la función de búsqueda. Con el inspector abierto, presione Ctrl + Shift + F  en su teclado ( Cmd + Shift + F  en Mac). Esto abre un cuadro de búsqueda donde puede buscar el código de la página Los resultados relevantes se resaltarán, como si estuviera buscando un documento.

2. Solucionar problemas de un sitio

La herramienta Inspeccionar elemento es extremadamente útil para solucionar problemas. Por ejemplo, si el color o la fuente de un elemento no se ve bien, puede verificarlo rápidamente usando la herramienta como describimos en la sección anterior.

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

Tenga en cuenta que el código en realidad  no se cambia 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.

Finalmente, el depurador incorporado es una herramienta más avanzada que puede usar para ver los mensajes de error que se generan detrás de escena. Para acceder a él, haga clic en  Consola en la parte superior de la ventana del Inspector:

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

3. Edite el texto para obtener una vista previa de los cambios

Uno de los mejores usos de Inspeccionar elemento es obtener una vista previa rápida de 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 iniciar sesión en su panel de control de WordPress.

Para editar un elemento, haga clic derecho sobre él y seleccione Inspeccionar. Esto abre la herramienta con el código de ese elemento enfocado. Si ya tiene Inspeccionar elemento abierto, también puede hacer clic en el elemento en el panel de vista previa para resaltar el código relevante.

A continuación, simplemente haga doble clic en el código para hacerlo editable. Por ejemplo, aquí hemos cambiado el título de nuestro blog:

También puedes cambiar los colores. Simplemente seleccione el elemento y desplácese por el  panel Estilos para encontrar la sección correspondiente. Puede hacer clic en los cuadrados de color para abrir un selector de color:

También puedes editar el código hexadecimal del color directamente si sabes cuál quieres usar.

4. Vista previa de los cambios de 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 imagen también.

Simplemente seleccione la imagen que desea cambiar en el panel de vista previa, luego haga doble clic en su URL en el panel HTML:

Luego puede pegar la URL de una imagen diferente para probarla. Si la imagen está en su biblioteca multimedia de WordPress , puede encontrar rápidamente la URL en los detalles del archivo adjunto:

Incluso hay un botón útil para copiar la URL a su portapapeles. De nuevo, recuerda que cualquier cambio que hagas en el inspector es solo temporal y solo tú lo puedes ver, así que siéntete libre de experimentar.

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

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

Con el Inspector abierto, haz clic en el ícono que parece un teléfono y una tableta apilados:

Esto permite la emulación de dispositivos. Tenga en cuenta que puede estar habilitado de forma predeterminada cuando abre el inspector. Cambie el tamaño de la vista previa de la página usando los controladores que la rodean, o haga clic en los menús desplegables en la parte superior del panel de vista previa para elegir varios dispositivos :

También puede ingresar una relación de aspecto específica o incluso verificar cómo se ve la página cuando se gira el dispositivo móvil haciendo clic en el ícono «girar» en la parte superior del panel de vista previa. Para emular varios sensores, como la ubicación y el tacto, haga clic en el menú de tres puntos en el panel de inspección y seleccione Más herramientas > Sensores .

Conclusión

Ya sea que sea nuevo en el desarrollo web o un profesional experimentado, la herramienta Inspeccionar elemento es una poderosa utilidad que definitivamente debería estar en su arsenal. Es de fácil acceso, casi universalmente disponible y hace que una variedad de operaciones sean rápidas y fáciles.

En este artículo, demostramos cómo acceder a Inspect Element en Chrome, Firefox y Safari. También le mostramos cómo usarlo para ubicar clases de CSS, solucionar problemas de un sitio web, cambiar temporalmente texto e imágenes y emular dispositivos móviles. Con este kit de herramientas, tiene todo lo que necesita para hacer de Inspect Element una parte de su flujo de trabajo.

¿Tiene alguna pregunta sobre el uso de Inspect Element? ¡Háganos saber en la sección de comentarios!

Imagen destacada a través de Kinjugraphics / shutterstock.com.