¿Cómo inspeccionar elementos en Chrome, Safari y Firefox?

¿Alguna vez te has preguntado qué hace que las páginas web luzcan tan impresionantes, con tantas características y funcionalidades? ¿Cómo se combinan todos los códigos para crear un sitio web atractivo e impresionante?

Todos los secretos se pueden revelar fácilmente simplemente inspeccionando los elementos del sitio web utilizando la herramienta Inspeccionar en su navegador.

Con la ayuda de esta herramienta incorporada, puede quitar fácilmente la capa del sitio web y ver cómo los códigos están conectados a cada elemento, creando un sitio web completamente funcional. Le dará una idea de cómo funcionan las cosas desde el principio y también lo inspirará a recrearlas en sus proyectos.

En esta publicación, le mostraremos cómo inspeccionar elementos del sitio web en navegadores populares y le brindaremos métodos breves para usarlos directamente.

¿Cómo inspeccionar elementos de un sitio web en cualquier navegador?

Puede inspeccionar fácilmente elementos de un sitio web en cualquier navegador simplemente siguiendo estos atajos de Inspeccionar elementos.

1. Inspeccionar los accesos directos de Elements para el navegador Google Chrome

Puede acceder a los elementos del sitio web iniciando herramientas de desarrollo o herramientas de inspección de elementos simplemente presionando la combinación de teclas Ctrl+Shift+I en su teclado.

Sin embargo, otro atajo y método sencillo que puedes probar es simplemente hacer clic derecho en un área vacía del sitio web o en cualquier elemento y seleccionar "Inspeccionar". Después de eso, puede usar la pestaña "Elementos" para ver toda la estructura del sitio web o usar la pestaña "Consola" para cualquier tipo de advertencia o error.

Sin embargo, la tercera pero más larga manera de obtener acceso a las herramientas de desarrollo es haciendo clic en los tres puntos verticales o en el menú de hamburguesas (el ícono con tres puntos apilados) ubicado en la esquina superior derecha del navegador Chrome, luego haciendo clic en Más herramientas y luego seleccionando Herramientas de desarrollo .

2. Inspeccionar los accesos directos de Elements para el navegador Firefox

Si es usuario del navegador Firefox, puede probar una combinación de teclas de acceso directo Ctrl+Shift+C para utilizar herramientas de desarrollo para detectar elementos del sitio web. O también puedes incluso hacer clic derecho en un área vacía del sitio web o en cualquier elemento y seleccionar "Inspeccionar".

3. Inspeccionar los accesos directos de Elements para el navegador Opera

Para los usuarios de Opera, presione Ctrl+Shift+I en su teclado para acceder directamente a las herramientas de desarrollo para inspeccionar los elementos del sitio web. De manera similar, al igual que otros navegadores, también puede hacer clic derecho directamente en un área vacía del sitio web o en cualquier elemento y seleccionar "Inspeccionar".

4. Inspeccionar los accesos directos de Elements para el navegador Edge

En caso de que Edge sea el navegador predeterminado que está utilizando; puede presionar F12 en su teclado para abrir las herramientas de desarrollo. O simplemente haga clic derecho en un área vacía del sitio web o en cualquier elemento y seleccione "Inspeccionar".

5. Inspeccionar elementos en el navegador Safari

El navegador Safari no tiene ningún método abreviado para inspeccionar elementos de un sitio web, pero debe seguir los pasos que se detallan a continuación:

Para utilizar Inspeccionar elemento en Safari, primero debe habilitar las herramientas de desarrollador. Así es cómo:

• Haga clic en "Safari" en el menú superior y seleccione "Configuración".

• Vaya a la pestaña "Avanzado" y marque la casilla que dice "Mostrar menú Desarrollar en la barra de menú".

• Cierra la ventana de Preferencias.

Ahora, puede hacer clic derecho en cualquier lugar de una página web y seleccionar "Inspeccionar elemento" para abrir el panel Elementos.

El panel se abrirá inmediatamente en la parte inferior de la ventana, lo que puede no verse muy bien y también crear dificultades para ver los códigos.

Para su comodidad, muévalo hacia un lado haciendo clic en el icono en la esquina superior izquierda del panel (al lado de la "X") y seleccione "Acoplar a la derecha de la ventana" o "Acoplar a la izquierda de la ventana". .” ( Aplica para todos los Navegadores)

Además, puedes incluso separar el panel de la ventana si lo deseas. Para cambiar el tamaño del panel, mueva el cursor al borde del panel hasta que se convierta en una flecha doble, luego haga clic y arrastre para cambiar el tamaño.

Ahora quizás te preguntes qué hacer después de abrir el panel o cuáles son los elementos principales que puedes consultar sobre el sitio web.

Bueno, para ello consulte las secciones siguientes.

Cosas que puede hacer con las herramientas de desarrollo de Inspeccionar elementos del sitio web

Ahora que accedió exitosamente a la herramienta Elementos y abrió el panel, verá una variedad de herramientas integradas disponibles para ayudarlo a jugar fácilmente con el sitio web, personalizarlo y editarlo según sus requisitos.

Usaremos Chrome con fines de demostración para su comodidad, pero todas las funciones, configuraciones, opciones e instrucciones serán las mismas en todos los navegadores.

1. Encuentre cualquier cosa en un sitio con la ayuda de la herramienta Inspeccionar búsqueda de elementos.

Puede resultar abrumador buscar cualquier cosa en todo el código fuente, que es complejo y, a veces, enorme. Por ese motivo, DevTools tiene una herramienta de búsqueda incorporada.

Para utilizarlo, abra el panel Elementos predeterminado y presione Ctrl + F o Comando + F para buscar en el código fuente. Inmediatamente aparecerá una pestaña de búsqueda en la parte inferior del panel de DevTools.

En el campo de búsqueda, puede buscar cualquier cosa, ya sean CSS, archivos JavaScript o elementos específicos dentro del código fuente.

Por ejemplo, si escribe "meta nombre" en el campo de búsqueda y presiona Enter, encontrará y mostrará todas las apariciones de "meta nombre" en el código. Esto le ayuda a comprobar el metadato de su página web, las palabras clave SEO y el estado de indexación.

De manera similar, si es diseñador web, puede buscar colores ingresando el código hexadecimal del color, como #98fb98db, en el campo de búsqueda y presionando Enter. Esto mostrará cada instancia de ese color en los archivos CSS y HTML del sitio.

Comunicación y correcciones:

• La herramienta de búsqueda ayuda a comunicarse con los desarrolladores mostrando exactamente dónde están los errores o qué es necesario cambiar.
• Informe a los desarrolladores el número de línea con el problema para solucionarlo más rápidamente.
• También puedes cambiar la página web tú mismo usando Elements, la parte principal de las herramientas para desarrolladores de Chrome.

2. Seleccionar e inspeccionar elementos individuales/específicos de la página web.

También puede ver el código HTML de un elemento específico de una página haciendo clic directamente en el icono del cursor en la esquina superior izquierda del panel.

Ahora puede hacer clic en cualquier elemento de la página para revelar su código fuente en el panel de inspección.

3. Edita o modifica cualquier cosa con elementos.

Si le gusta experimentar y jugar con el diseño de sitios web y le gusta dar vida a ideas instantáneas, la herramienta Inspeccionar elemento puede ayudarle a hacerlo.

Con esta herramienta, puedes realizar cambios temporales en la apariencia del sitio web modificando o editando los archivos CSS y HTML y viendo los resultados en tiempo real.

Sin embargo, los cambios no son permanentes. Después de recargar la página, los cambios desaparecerán. De esta manera, puedes experimentar todo lo que quieras sin interferir con el código fuente del sitio web.

Si en algún momento encuentra atractivos los cambios, simplemente puede copiarlos y guardarlos en otro lugar para usarlos más adelante.

Veamos algunos ejemplos como referencia.

Pero antes de eso, dejemos nuestro patio de recreo listo y limpio. Para ello, haga clic en la pestaña Elementos en el panel Herramientas de desarrollador. Para obtener más espacio, presione la tecla Esc para cerrar el cuadro de búsqueda.

Ahora estás listo con el código fuente completo en tu pantalla.

• En la esquina superior izquierda del panel Desarrollador, haga clic en el icono de un mouse encima de un cuadrado.
• Seleccione cualquier elemento de la página para cambiarlo.

Cambiar texto en una página web:

• Haga clic en el cursor del mouse/icono cuadrado.
• Haga clic en cualquier texto de la página.
• En el panel Herramientas de desarrollador, haga doble clic en el texto resaltado para hacerlo editable.

• Escriba su nuevo texto, como "Más rápido" en lugar de "Premium", como se muestra en la imagen a continuación y presione Entrar .
• El cambio de texto es temporal y se revertirá cuando actualice la página.

Elementos de edición:

• Cierre el panel Desarrollador, resalte cualquier parte de la página web, haga clic derecho y seleccione Inspeccionar .
• El panel Herramientas de desarrollo resaltará la oración seleccionada.

Cambiar el color y el tamaño de fuente de los elementos:

• En el panel Herramientas de desarrollador, vaya a la pestaña Estilos .

• Haga clic en el campo "tamaño de fuente" y cambie el valor a 22px.

• Desplácese hasta "color" y cámbielo a #ff0000.

• Ajuste la "familia de fuentes" a "Arial".

Ahora las fuentes se veían así antes de los cambios que hicimos:

Después de los cambios, queda así:

Cambio de estados de elementos:

Si desea que su sitio web sea más atractivo visualmente para sus visitantes cuando se desplazan sobre botones o enlaces o interactúan con ellos, puede utilizar la opción Estados de elementos.

• Haga clic en el icono del cuadro/cursor del mouse y seleccione el elemento.
• En el panel Herramientas de desarrollo, haga clic derecho en el código, coloque el cursor sobre Estado de fuerza y ​​haga clic en :activo:
• Repita y haga clic en :hover:

• Cambie el valor de "color de fondo" a #003b59 para ver el nuevo color al pasar el cursor.

Cambiar imágenes de fondo:

• Simplemente copie el enlace de la dirección de la imagen, es decir (donde se ha alojado la imagen).

• Abra el elemento Inspeccionar en el botón "Impulsa tu automatización con IA".
• Busque el código "color de fondo" y reemplace el color con URL ("enlace de imagen") .

Experimente con más cambios:

• Puede cambiar texto, intercambiar imágenes y alterar colores y estilos.
• Pruebe diferentes cambios para ver cómo podría verse su sitio.

4. Pruebe el sitio web en cualquier tamaño de pantalla o dispositivo

Hoy en día, incluso Google recomienda encarecidamente que los sitios web sean responsivos y fácilmente accesibles en cualquier dispositivo y tamaño de pantalla. La mayoría de los usuarios de Internet prefieren acceder a sitios web desde sus teléfonos inteligentes en lugar de desde sus computadoras portátiles y de escritorio.

Por lo tanto, se ha vuelto fundamental para los administradores web hacer que sus sitios web sean responsivos y optimizados para dispositivos móviles mientras los crean.

Sin embargo, puede que no sea factible para ningún desarrollador o diseñador web consultar el sitio web en cada tipo de dispositivo o tamaño de pantalla a la vez. Para resolver este problema, la herramienta Emulación le permite ver y comprobar cómo podría aparecer su sitio web para diferentes usuarios que utilizan varios dispositivos.

Esto no significa que debas omitir las pruebas reales en diferentes dispositivos, pero puede darte una buena idea.

Así es como puedes realizar:

• En el panel Herramientas para desarrolladores, haga clic en el pequeño ícono de teléfono en la esquina superior izquierda.
• La página cambiará a una vista estilo teléfono con un menú en la parte superior para cambiar el tamaño.
• Cambie el tamaño del navegador pequeño para ver cómo se ve la página en diferentes dispositivos, como una tableta, un teléfono o una pantalla más pequeña.

• Haga clic en el menú en la parte superior para seleccionar tamaños de dispositivo predeterminados, como Surface Duo o iPhone 12 Pro.
• La página web se ajustará al tamaño del dispositivo seleccionado. Utilice el menú desplegable de porcentaje junto a las dimensiones para acercar.
• Seleccione "Responsive" en el ajuste preestablecido del dispositivo para ajustar la vista arrastrando el borde derecho de la página web.
• Cambie entre vistas vertical y horizontal haciendo clic en el icono de rotación al final del menú superior.
• Explore diferentes dispositivos para ver cómo cambian la página web y la resolución de la pantalla.
• Todas las demás herramientas de desarrollador también reaccionarán a la vista del dispositivo.

5. Pruebe el rendimiento de la página web en redes móviles emuladas

Además de todas las pruebas visuales, también puedes ver el rendimiento de tu sitio web en diferentes redes móviles como 5G, 4G, 3G o redes más lentas.

Para demostrar esto,

• Haga clic en el menú de hamburguesas en la esquina superior derecha del panel.
• Pase el cursor sobre Más herramientas y seleccione Condiciones de red .

Condiciones de la red:

• Elija cualquiera de las condiciones de la red, como 4G rápido, 4G lento o sin conexión para ver cómo funciona la página sin Internet.

• Haga clic en Agregar... para incluir la velocidad de prueba (por ejemplo, 56 Kbps para probar Internet por acceso telefónico).
• Vuelva a cargar la página para ver cuánto tiempo tarda en cargarse en una conexión lenta y cómo se ve mientras se carga.
• Esto le ayuda a comprender la importancia de mejorar el tiempo de carga de su sitio para conexiones lentas.

Cambio de agente de usuario:

• En el campo Agente de usuario, desmarque Usar navegador predeterminado .
• Seleccione un agente de usuario diferente (por ejemplo, Firefox, Mac) para ver si el sitio cambia su representación para otros navegadores.
• Esta característica le permite ver cómo funciona la web. carga de páginas incluso si afirman que funcionan sólo en un navegador diferente.

Conclusión

Después de obtener tanta información detallada sobre Dev Tools o Inspect Elements, debes haberte dado cuenta de que hay mucha información disponible sobre cualquiera de tus sitios web favoritos en el dominio público.

Con solo unos pocos clics, puede desmenuzar completamente cualquier sitio web, revelando todos sus secretos de características y funcionalidades visualmente impresionantes sin necesidad de verificar los archivos originales.

Ahora puede analizar y ver qué estilos CSS se utilizan, la lógica detrás de la funcionalidad compleja, cómo se realiza la optimización de motores de búsqueda a nivel de código y mucho más.

Raúl

Rahul Kumar es un entusiasta de la web y estratega de contenidos especializado en WordPress y alojamiento web. Con años de experiencia y el compromiso de mantenerse actualizado con las tendencias de la industria, crea estrategias en línea efectivas que generan tráfico, aumentan la participación y aumentan las conversiones. La atención de Rahul al detalle y su capacidad para crear contenido atractivo lo convierten en un activo valioso para cualquier marca que busque mejorar su presencia en línea.