Si trabaja con varios sitios web, probablemente siempre esté buscando formas más rápidas y eficientes de hacer las cosas. Si es así, la herramienta Verificar artículo, disponible en la mayoría de los principales navegadores, puede 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 la página, simular el 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. A continuación, 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 sumergirnos!
Cómo acceder a la herramienta de inspección de artículos en los principales navegadores
La herramienta Inspeccionar elemento es una herramienta que le permite ver el código fuente base de cualquier sitio web. Además, puede usarlo para realizar cambios temporales y ver los resultados en tiempo real, dejando intacto el código fuente original. Esto es extremadamente útil si desea 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 acerca de 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 auditoría en Google Chrome
Hay tres formas de acceder a la herramienta Verificar artículo en Chrome:
- Haga clic con el botón derecho en un elemento de la página y seleccione Controlar.
- Haga clic en el menú de tres puntos en la esquina superior derecha de la ventana y seleccione Más herramientas > Herramientas de desarrollo.
- Prensa Ctrl + Mayús + C en tu teclado (Cmd + Opción + C en una Mac).
Cuando se abra la herramienta, mostrará una vista dividida. Por un lado, tiene una vista previa del sitio web que está viendo, junto con algunos controles para personalizar su vista y simular diferentes resoluciones de pantalla:
Por otro lado, hay algunos cuadros de información. El panel superior es el HTML de la página. Al pasar el cursor sobre algún código, se resaltará el área apropiada de la página a la derecha:
A continuación se muestra una página con información sobre la página. Los detalles que se muestran aquí varían según las tarjetas seleccionadas. En las capturas de pantalla anteriores, muestra los estilos CSS de la página.
El panel inferior es básicamente noticias y actualizaciones de Chrome Developer Tools. Puede cerrar esto de forma segura para reducir el desorden haciendo clic en 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.
Acceso al elemento de auditoría en Mozilla Firefox
La herramienta Inspeccionar elemento en Firefox es bastante similar a la herramienta 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 Verifique el artículo.
- Haga clic en el menú de hamburguesas en la esquina superior derecha de la ventana de Firefox y seleccione Desarrollador web> Inspector.
- Prensa Ctrl + Mayús + C en tu teclado (Cmd + Opción + C en una Mac).
Firefox coloca paneles de información en la parte inferior de la pantalla de forma predeterminada:
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, Safari también ofrece la herramienta Verificar elemento. Sin embargo, hay un paso adicional para acceder a él: deberá habilitar las herramientas de desarrollo de Safari.
Para hacer esto, vaya a la barra de menú en la parte superior de la pantalla y vaya a Safari > Preferencias > Avanzado. Luego puede marcar la casilla correspondiente para habilitar las herramientas de desarrollador:
Una vez habilitada, puede acceder a la función Verificar artículo de forma similar a otros navegadores:
- Haga clic derecho en el elemento y seleccione Verifique el artículo.
- En la barra de menú superior, vaya a Desarrollo > Mostrar Web Inspector.
- Prensa Cmd + Opción + I en el teclado
El diseño inicial de la herramienta Safari es ligeramente diferente al 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.
Los 5 usos más comunes de la herramienta de inspección de componentes
Ahora que sabe cómo acceder a la herramienta Examinar elemento, echemos un vistazo a algunas cosas útiles que puede hacer con ella. Hay toneladas de posibilidades, pero los siguientes usos son algunos de los más comunes. Tenga en cuenta que vamos a usar Chrome para estos ejemplos, pero las funciones deberían funcionar de manera similar en otros navegadores.
1. Encuentra clases de CSS en el sitio web
Una de las formas más útiles de usar la función Inspeccionar elemento es encontrar detalles en las hojas de estilo en cascada (CSS) de una página. Esto es útil por varias razones. En primer lugar, si solo está navegando por Internet y se encuentra con una página cuyo estilo realmente le gusta, puede buscar en CSS para recopilar algunas ideas para el diseño de su propio sitio web.
También es útil en su propio sitio. Por ejemplo, si un elemento no se ve del todo bien, puede verificarlo rápidamente para asegurarse de que esté usando el CSS correcto.
Hay dos formas básicas de comprobar los estilos con la inspección de elementos. 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 la combinación de colores, la fuente, los márgenes y otros elementos de 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á sucediendo. 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 un elemento parece no hacer nada, asegúrese de que el icono del cursor en el panel de inspección esté resaltado en azul:
Si conoce una clase o estilo CSS específico que está buscando y desea ver todos los elementos que lo utilizan, también puede utilizar la función de búsqueda. Con el inspector abierto, presiona Ctrl + Mayús + F en tu teclado (Cmd + Mayús + F en una Mac). Esto abrirá un cuadro de búsqueda donde puede buscar el código de la página.. Los resultados relevantes se resaltarán como en el caso de una búsqueda de documentos.
2. Solucionar problemas del sitio
La herramienta Comprobar 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 con la herramienta que describimos en la sección anterior.
También puede editar el HTML de la página directamente con la herramienta Verificar elemento. Simplemente haga doble clic en el código que desea cambiar para editarlo.
Recuerda que el código no es Realmente cambiado en la página: si actualiza la página, volverá a su forma original. Sin embargo, esta función es extremadamente útil para realizar pruebas rápidas y solucionar problemas.
Finalmente depurador incorporado es una herramienta más avanzada que puede usar para ver los mensajes de error que aparecen 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 para ver las fuentes, la actividad de la 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 la 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 Controlar. Esto abrirá la herramienta con el foco en el código para ese elemento. Si ya tiene abierta la Inspección de artículos, también puede hacer clic en el artículo en el panel de vista previa para resaltar el código apropiado.
Luego simplemente haga doble clic en el código para hacerlo editable. Por ejemplo, aquí cambiamos el título de nuestro blog:
También puedes cambiar los colores. Simplemente seleccione un elemento y desplácese por Estilos el cuadro para encontrar la sección que desea. Puede hacer clic en los cuadrados de colores para ver el selector de color:
También puedes editar el código hexadecimal de un color directamente si sabes cuál quieres usar.
4. Vista previa de los cambios de imagen
El elemento de inspección también facilita la vista previa de los cambios en la imagen. Esta es también una excelente manera de probar diferentes tamaños de imagen.
Simplemente seleccione la imagen que desea cambiar en el panel de vista previa y luego haga doble clic en su URL en el panel HTML:
Luego puedes pegar la URL de otra imagen para probarla. Si la imagen está en su biblioteca de medios de WordPress, puede encontrar rápidamente la URL en los detalles del archivo adjunto:
Incluso hay un botón útil para copiar la URL al portapapeles. De nuevo, recuerda que cualquier cambio que hagas en el inspector es solo temporal y solo tú lo puedes ver, así que puedes divertirte un poco.
5. Pruebe el sitio con emulación de dispositivo
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 su sitio web y ver exactamente cómo se verá con diferentes formatos 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. Use los controladores alrededor de la página para cambiar el tamaño de la vista previa o haga clic en las listas desplegables en la parte superior del panel de vista previa para seleccionar diferentes dispositivos:
También puede ingresar una relación de aspecto específica e incluso ver cómo se ve la página cuando gira su dispositivo móvil haciendo clic en el ícono «girar» en la parte superior del panel de vista previa. Para emular diferentes 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.
Solicitud
Ya sea que sea nuevo en el desarrollo web o un profesional experimentado, Inspect Element es una herramienta poderosa que definitivamente debería estar en su arsenal. Es de fácil acceso, casi universalmente disponible y hace que varias operaciones sean rápidas y fáciles.
En este artículo, le mostramos 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 su sitio, cambiar temporalmente texto e imágenes y emular dispositivos móviles. Con este kit de herramientas, tiene todo lo que necesita para que Inspeccionar elemento forme parte de su flujo de trabajo.
¿Tiene preguntas sobre el uso de Inspect Element? ¡Háganos saber en la sección de comentarios!
Imagen destacada a través de Kinjugraphics / shutterstock.com.
