Cómo utilizar la herramienta Inspeccionar elemento de su navegador para editar páginas web
Existen numerosos recursos valiosos de desarrollo web, ya sean libros, videos, cursos en línea y más. Aprender a usar la herramienta Inspeccionar elemento de un navegador es una habilidad tan poderosa. Es una herramienta de aprendizaje invaluable, una que está al alcance de su mano y siempre accesible.
Con la función Inspeccionar elemento, puede ver el funcionamiento interno del sitio web. Aunque solo puede ver el marcado de la interfaz, como HTML, CSS y, a veces, JavaScript, le brinda una forma de ver con precisión cómo los desarrolladores construyeron un sitio web.
En esta publicación, le mostraremos cómo usar la herramienta Inspeccionar elemento y algunas de las tecnologías, características y funcionalidades relacionadas con las que se encontrará. Primero, vamos a darle una introducción formal a la propia herramienta Inspeccionar elemento.
Presentación de la herramienta Inspeccionar elemento
En los primeros días de la web, solo había una forma de ver el código de un sitio web: el Ver fuente característica.
La página «Ver código fuente» de Kinsta.com.
Esta situación prevalecía en los días anteriores a que tuviéramos hojas de estilo en cascada (CSS) y JavaScript en abundancia. Los desarrolladores web usaban HTML para todos los elementos del sitio, incluido el contenido, el diseño y… bueno, todo.
Una vez que la web comenzó a evolucionar y las tecnologías subyacentes aumentaron en poder, fue necesario desarrollar mejores herramientas. Firebug de Firefox fue una de las primeras soluciones para descubrir cómo funcionaba y funcionaba un sitio web bajo el capó:
Los logotipos de Firefox y Firebug.
Después de un tiempo, esa funcionalidad llegó a casi todos los navegadores. Hoy, conocemos esa función como la herramienta Inspeccionar elemento:
La herramienta Inspeccionar elemento en el sitio web de Kinsta.
Es una forma poderosa de ver la tecnología y el código subyacentes de un sitio web. Como tal, puede encontrarlo en algunos lugares diferentes, a menudo a través de un menú de la barra de herramientas, haciendo clic con el botón derecho en una página y seleccionando la opción, o con un atajo de teclado.
Si bien el enfoque principal de la herramienta Inspeccionar elemento está en el HTML y CSS de una página, hay más que puede hacer con ella.
Recorrido por el panel Inspeccionar elemento
DevTools de Brave.
La herramienta Inspeccionar elemento es mucho más que una forma de mostrar código. A menudo hay varios paneles a los que acceder:
- Inspector – Se llama Elementos en algunos navegadores. Es la pantalla principal de la herramienta Inspeccionar elemento y muestra el código de la página, junto con el CSS específico del elemento. También encontrará más detalles sobre el «sistema de cuadrícula» de un sitio y otros aspectos.
- Consola – Este es un registro de advertencia de interfaz para un sitio, y es un lugar donde también puede ingresar fragmentos de código para realizar una prueba rápida de una idea.
- La red – Aquí, verá las solicitudes realizadas desde y hacia un servidor, como todas las solicitudes POST y GET.
- Rendimiento – Por supuesto, un sitio tiene que ser eficaz. Como tal, hay una herramienta dedicada para ayudarlo a medir algunas métricas esenciales del sitio. Algunos navegadores funcionan mejor que otros aquí.
- Memoria – Este panel le permite ver cómo un sitio usa la memoria y, nuevamente, algunos navegadores ofrecen métricas extensas.
- Solicitud – Dentro de este panel, puede ver una amplia gama de información sobre el caché del sitio, los servicios en segundo plano y más.
Además de esto, hay más paneles que puede agregar:
Una lista de otros paneles dentro de DevTools de Brave.
Hay paneles simples, como Medios de comunicación, y otros más complejos como el Generador de perfiles de JavaScript y el Monitor de rendimiento. En pocas palabras, el nombre de la herramienta Inspeccionar elemento está haciendo un flaco favor a todas las funciones bajo el capó. Tiene un poder inmenso y debería ser fundamental para el flujo de trabajo de cualquier desarrollador web.
Por qué querría utilizar Inspect Element
La herramienta Inspeccionar elemento es casi la única solución “clavada” que necesitará tener a su lado durante el desarrollo. Entraremos en los detalles técnicos de por qué a lo largo del resto del artículo. Primero, sin embargo, vale la pena hablar sobre su motivación para usar Inspect Element.
Hay algunas razones por las que querría utilizar la herramienta:
- Puede navegar por otros sitios web en busca de inspiración sobre cómo trabajar en el suyo.
- Aprenderá cómo otros sitios o desarrolladores logran técnicas específicas.
- Te da una licencia para experimentar en tu sitio sin consecuencias.
- En la mayoría de las herramientas de Inspect Element, tiene la oportunidad de depurar los sitios.
- Es bueno saber más sobre el sitio web en cuestión.
En resumen, aprender sobre desarrollo web implica mirar buenos ejemplos de sitios web y descubrir qué los motiva.
La herramienta Inspeccionar elemento le permite verificar el HTML y CSS exactos que se utilizan en un sitio, lo que le brinda una gran oportunidad de implementar esos aspectos y técnicas en su trabajo.
Cómo encontrar la herramienta Inspeccionar elemento de su navegador
La buena noticia es que encontrar la herramienta Inspeccionar elemento es sencillo. En la mayoría de los casos, hará clic con el botón derecho en una página y seleccionará Inspeccionar o Inspeccionar elemento:
Elección de la herramienta Inspeccionar elemento.
De forma predeterminada, abrirá la herramienta en una ventana dividida. A menudo se coloca por defecto en el lado derecho. Pero puede personalizar esto a su gusto e incluso abrir la herramienta en su ventana:
La herramienta Inspeccionar elemento en su ventana.
Por supuesto, también puede acceder a Inspeccionar elemento desde la barra de herramientas del navegador o mediante un atajo de teclado. La ubicación exacta variará según el navegador. Por ejemplo, en Firefox, encontrará el Herramientas de desarrollo web en el Herramientas> Herramientas del navegador menú. Por el contrario, Brave (y otros navegadores basados en Chromium) tienen la Herramientas de desarrollo opción en el Ver> Desarrollador menú:
Menú de la barra de herramientas de Brave, que muestra sus herramientas de desarrollo.
Los atajos de teclado suelen ser similares en todos los navegadores: Comando + Mayús + C (Control + Mayús + C para ventanas). Este atajo agiliza la visualización de las herramientas con las que necesita trabajar de inmediato.
Si nunca antes ha abierto la herramienta Inspeccionar elemento, a menudo se muestra en el lado derecho de su menú, como mencionamos anteriormente. Para cambiar esto, haga clic en el menú del semáforo en la barra de herramientas de Inspeccionar elemento. Aquí, puede cambiar el lado en el que se muestra el «muelle»:
Las opciones de «Lado del muelle» en la herramienta Inspeccionar elemento.
Tenga en cuenta que Firefox también utiliza una vista de «panel triple» de forma predeterminada, que le ayuda a obtener la mayor cantidad de información posible en la herramienta Inspeccionar elemento:
Vista del “panel triple” de Firefox.
Ahora que tiene la herramienta abierta, es una buena idea averiguar qué puede hacer con ella. Hablaremos de esto a continuación.
3 situaciones para el uso de la herramienta Inspeccionar elemento
Hemos mencionado algunas formas en las que usará la herramienta Inspeccionar elemento, pero podemos ir más allá para ofrecer algunos casos de uso. Analicemos estos brevemente.
1. Búsqueda de elementos específicos en una página web
El objetivo principal de la herramienta Inspeccionar elemento está en su nombre: inspeccionar los elementos del sitio web. Para hacer esto, irá a la página web deseada y luego elegirá su método para abrir las herramientas de desarrollo.
Una vez que el panel esté abierto, haga clic en la flecha que actúa como selector para el elemento deseado:
El icono de la flecha del inspector.
Desde aquí, puede colocar el cursor sobre cualquier elemento de la página y lo verá resaltado en el Inspector / Elementos ventana:
Destacando un elemento en el panel de herramientas de desarrollo.
Es un proceso simple: una de las razones por las que la herramienta Inspeccionar elemento es tan valiosa y popular entre los desarrolladores web.
2. Emulación de un dispositivo, una pantalla y un navegador de destino
El elemento de inspección también funciona como una especie de emulador de dispositivo. En otras palabras, puede ver cómo se ve un sitio web en un dispositivo específico. Las opciones son numerosas:
Una lista de dispositivos emulados que se muestran en Brave.
Este emulador será excelente para juzgar si su estrategia para dispositivos móviles o su diseño receptivo son precisos y funcionan. Es invaluable y también más rentable que tener 200 dispositivos flotando alrededor de su escritorio.
A menudo accederá a la emulación del dispositivo desde un pequeño icono en algún lugar del panel Inspeccionar elemento:
Emulando un dispositivo con la herramienta Inspeccionar elemento.
Al hacer clic en este icono, se mostrará su sitio como se ve en el dispositivo que ha seleccionado:
Elegir un dispositivo para emular desde la herramienta Inspeccionar elemento.
Analizaremos esto con más detalle más adelante, pero es una forma sólida de hacer que sus diseños sean consistentes en todos los dispositivos.
3. Determinación del rendimiento de la página web
La herramienta Inspeccionar elemento también puede ayudarlo a juzgar la velocidad y el rendimiento de un sitio web a través de la Rendimiento panel:
El panel Inspeccionar rendimiento del elemento.
Esta característica funciona «registrando» los tiempos de carga de elementos y scripts específicos. Los navegadores basados en cromo funcionan de manera brillante al ofrecer esta información. Grabará la página mientras se carga y luego verá los resultados en un formato de línea de tiempo.
Es una forma excelente de determinar si una página tiene un rendimiento general. A partir de ahí, querrá utilizar una herramienta como Google PageSpeed Insights o Lighthouse para trabajar más en el rendimiento de su sitio. Los navegadores basados en Chromium tendrán un generador de informes Lighthouse integrado:
Un informe integrado de Google Lighthouse.
También puede ver un resumen de las pruebas de rendimiento en algunas otras pestañas. Por ejemplo, puede ver un Árbol de llamadas, un resumen general y un Registro de eventos:
El registro de eventos del elemento de inspección.
Es concebible que no necesite ninguna otra herramienta para juzgar cómo funciona o funciona su sitio web. Aprender cómo funciona en la práctica es algo que discutiremos a continuación.
Trucos y consejos para usar la herramienta Inspeccionar elemento
Ya hemos hablado de cómo la herramienta Inspeccionar elemento es más poderosa de lo que parece a primera vista. Echemos un vistazo a algunos trucos y consejos para aprovechar al máximo su conjunto de funciones, comenzando por lo básico.
Cambio de propiedades, valores y estados de elementos
Hasta ahora, solo hemos abordado el concepto de utilizar la herramienta Inspeccionar elemento para realizar cambios temporales en un sitio. Analicemos cómo hacer esto con más detalle.
Los pasos son sencillos. Primero, use el ícono de flecha para seleccionar su elemento elegido. Verá una superposición que resalta los distintos componentes al pasar el cursor sobre ellos:
Seleccionar elementos en la herramienta Inspeccionar elemento.
Una vez que llegue al elemento deseado, puede hacer doble clic en casi cualquier lugar donde vea una etiqueta dentro del Elementos panel y escriba un cambio. Por ejemplo, queremos cambiar el texto del héroe original en la página de inicio de Kinsta a algo diferente:
Cambio de texto en la página de inicio de Kinsta.
También puede trabajar con CSS de la misma forma que HTML. Por ejemplo, tome los botones de llamada a la acción (CTA) en la página de inicio de Kinsta:
Seleccionando un botón en la página de inicio de Kinsta.
Si selecciona el botón con el puntero, puede ver su CSS relacionado en el lado derecho Estilos panel:
El panel Estilo dentro de la herramienta Inspeccionar elemento.
Al igual que con los elementos HTML, puede cambiar los valores y agregar su CSS también:
Cambiar el color del botón en el panel Estilos.
Por supuesto, para elementos como botones, es posible que desee trabajar con sus diversos estados. En este caso, el :flotar También vale la pena cambiar el estado. Para hacer esto, haga clic en el : hov enlace en el panel Estilo. Al elegir esto, aparecerá una lista de estados de elementos, y puede seleccionar aquellos para los que desea ver el CSS de estado flotante:
Apareciendo las opciones de «Estados» en el panel Estilos.
La página web mostrará cómo se ve el estado sin que tenga que actuar. Aquí, hemos cambiado los colores de desplazamiento para diferenciarlo del estado del botón predeterminado:
Cambiar los colores del estado de desplazamiento en el panel Estilos.
Incluso puede tomar URL de imágenes e intercambiarlas por otras. En la página de inicio de Kinsta, mostramos una captura de pantalla del panel de MyKinsta:
El panel de MyKinsta en la página de inicio de Kinsta.
Al ubicar el elemento y cambiar la URL de origen de la imagen, puede probar otras imágenes en su lugar:
En este caso, el cambio se puso en marcha en cuestión de minutos (Fuente de la imagen: Pixabay).
Como era de esperar, estos cambios no son permanentes y, con una actualización rápida de la página, puede volver a la normalidad. Como alternativa, también puede copiar el HTML y CSS a su editor e incluirlos en su código para que esos cambios sean permanentes.
Buscando elementos
Podría ser que antes de poder alterar un elemento, necesite encontrarlo. La herramienta Inspeccionar elemento tiene una funcionalidad de búsqueda sencilla que puede ayudarlo a encontrar cualquier aspecto de una página web.
Dicho esto, es difícil de encontrar si no sabe dónde buscar. La forma «oficial» en los navegadores basados en Chromium es dirigirse al menú «semáforo» en el lado derecho de la página y seleccionar el Buscar opción:
La opción «Buscar» en DevTools de Brave.
Usar esto abrirá el Consola panel, junto con un Buscar pestaña. Desde aquí, escriba la etiqueta que desee en el cuadro de texto y verá una lista de elementos asociados en la página:
Buscando elementos en las DevTools de Brave.
Tenga en cuenta que en otros navegadores, puede encontrar la funcionalidad en otro lugar. Por ejemplo, Firefox incluye un cuadro de búsqueda en la parte superior de su Inspector panel:
Buscando elementos en el panel del inspector de Firefox.
Aquí hay otro consejo rápido: puede llevar a cabo una expansión recursiva de los distintos nodos y elementos haciendo clic con el botón derecho dentro del Elementos panel y elegir Expandir recursivamente:
La opción Expandir recursivamente en el panel Elementos.
Si echa un vistazo a la Estilos panel, también verá un Filtrar caja de texto. Este campo le permite filtrar por propiedades CSS, lo que lo convierte en un gran compañero para la funcionalidad de búsqueda global:
Filtrado por propiedades en el panel Estilos.
En general, no debería ser difícil encontrar lo que necesita con dos filtros dedicados y herramientas de búsqueda.
Una introducción rápida al modelo de caja
Una de las mejores formas en que la herramienta Inspeccionar elemento puede ayudarlo a aprender más sobre cómo actúan las propiedades CSS sobre los elementos es el panel visual de «modelo de caja».
El modelo de caja.
Esta descripción general le brinda una representación de cómo un cuadro específico (como «elemento» o «div») aparece en la pantalla. En otras palabras, es una descripción general de cómo los márgenes, el relleno, el borde y el contenido se combinan para convertirse en la sección que ve en la pantalla.
Explicar el modelo de caja CSS completo y cómo interactúa con el HTML de una página web está más allá del alcance de este artículo, aunque Mozilla tiene una guía fantástica de los entresijos del concepto.
A menudo encontrarás el Modelo de caja panel dentro del Diseño o Computado secciones del panel de la derecha de la herramienta Inspeccionar elemento:
El panel «Modelo de caja» dentro de la herramienta Inspeccionar elemento.
Al igual que con cualquier elemento y propiedad, también puede cambiar los valores y la configuración de un cuadro en particular. También habrá una lista de otras propiedades para ayudarlo a colocar el cuadro, establecer un índice Z, aplicar configuraciones de flotación y visualización, y mucho más.
Mientras trabaja con el modelo de caja, también puede beneficiarse de ver el sistema de cuadrícula en juego en la página. Para hacer esto, eche un vistazo a la Diseño panel: las opciones que necesita estarán debajo del Red menú:
El menú de configuración de la cuadrícula.
Al hacer clic en la configuración de pantalla deseada y luego elegir una superposición relevante, se mostrará en la pantalla, lo que le permitirá tomar decisiones más precisas utilizando el modelo de caja para manipular los elementos del sitio.
Emulando dispositivos usando Inspect Element
Han pasado de ser palabras de moda a términos léxicos integrados, pero la «capacidad de respuesta» y la «compatibilidad con dispositivos móviles» son factores clave del desarrollo web. Como tal, la herramienta Inspeccionar elemento aborda esta faceta a través de un par de funciones.
En la mayoría de los navegadores, la herramienta Inspeccionar elemento tendrá un icono de dispositivo móvil en la barra de herramientas superior:
Alternar la visualización de respuesta móvil dentro de Brave.
Safari, sin embargo, es diferente. En cambio, hay un Entrar / salir del modo de diseño adaptable alternar en el Desarrollar menú:
La opción «Salir del modo de diseño adaptable» en Safari.
Independientemente de cómo llegue allí, una vez que elija la opción, la página web se mostrará como si la estuviera viendo en un dispositivo más pequeño:
Una vista de diseño de dispositivo móvil en Firefox.
Si bien Safari solo le brinda la opción de elegir entre diferentes dispositivos Apple, otros navegadores se esfuerzan por brindarle las herramientas que necesita para diseñar con principios de dispositivos móviles. Por ejemplo, puede elegir la orientación de la ventana gráfica, así como el dispositivo que le gustaría emular:
La lista «Emulación de dispositivo» en Brave.
Hay otras dos características interesantes aquí. Primero, puede elegir una velocidad de red emulada. Safari no incluye ninguna opción para esto, y los navegadores basados en Chromium ofrecen una pequeña opción general de limitación de la red:
Las opciones de aceleración en Brave.
Firefox hace lo mejor aquí, con una selección decente de opciones de red para elegir:
Opciones de aceleración de Firefox.
Para redondear las cosas, también puede simular la retroalimentación háptica y el reconocimiento del sensor. Es el predeterminado en los navegadores basados en Chromium, y en Firefox, debe activarlo:
La opción de retroalimentación háptica en Firefox.
Firefox se queda atrás aquí, ya que Chrome, Brave y otros muestran su cursor como una pequeña superposición «similar a la punta de un dedo». La funcionalidad no es perfecta para ningún navegador, aunque es una forma confiable de determinar cómo podría actuar su sitio en otros dispositivos.
Este tipo de pruebas a menudo se quedan en el camino para muchos desarrolladores web. Dicho esto, ahora no hay excusa cuando los navegadores ofrecen soluciones integrales como esta.
Atajos de teclado al usar la herramienta Inspeccionar elemento
La mayoría de los métodos abreviados de teclado del navegador suelen ser los mismos en todos los navegadores. Es una buena noticia si navega entre varias herramientas para probar sus sitios.
Aquí hay una lista rápida de algunos de los atajos más populares (y valiosos):
| Abra la herramienta Inspeccionar elemento | Comando + Mayús + C para Mac, Control + Mayús + C para ventanas |
| Moverse entre nodos | Hasta y Abajo flechas |
| Expandir el nodo seleccionado | Derecha flecha |
| Contraer el nodo seleccionado | Izquierda flecha |
| Expandir y colapsar de forma recursiva los nodos | Opción + clic para Mac, Alt + clic para ventanas |
| Moverse dentro de un nodo para trabajar con atributos | Ingresar o Regreso |
| Avanza a través de los atributos de un nodo | Pestaña |
| Retroceda a través de los atributos de un nodo | Mayús + Tabulador |
| Ocultar o mostrar el nodo seleccionado | H |
| Edite y deje de editar un nodo como HTML | F2 |
| Cuando se selecciona una propiedad CSS, incrementa el valor en uno | Hasta flecha |
| Cuando se selecciona una propiedad CSS, disminuya el valor en uno | Abajo flecha |
| Cuando se selecciona una propiedad CSS, incrementa el valor en diez | Mayús + Arriba flecha |
| Cuando se selecciona una propiedad CSS, disminuya el valor en uno | Mayús + Abajo flecha |
| Cuando se selecciona una propiedad CSS, incremente el valor en 0.1 | Opción + Arriba flecha para Mac, Alt + Arriba flecha para Windows |
| Cuando se selecciona una propiedad CSS, disminuya el valor en 0,1 | Opción + Abajo flecha para Mac, Alt + Abajo flecha para Windows |
Por supuesto, hay muchos más atajos disponibles. Mozilla tiene documentación excepcional para Firefox, mientras que Chrome, Brave, Edge y otros comparten atajos. Apple es menos útil con los accesos directos para desarrolladores de Safari, ya que no hay una lista definida en sus páginas de ayuda. En su lugar, sugerimos leer la documentación oficial de las herramientas de desarrollo de Safari.
Resumen
El desarrollo web ya no es solo HTML. Hay muchas tecnologías involucradas. Incluso si se apega a la santa trinidad de HTML, CSS y JavaScript, aún necesitará ver cómo un sitio web reúne todos estos componentes.
La herramienta Inspeccionar elemento del navegador es una de las mejores formas de buscar bajo el capó de un sitio web y descubrir con detalle explícito cómo funciona. Si bien es fantástico como ayuda para el aprendizaje, también puede ayudarlo a probar cambios en su sitio y descubrir cómo funciona en diferentes dispositivos y redes móviles.
¿Utiliza el elemento de inspección con frecuencia? Si es así, ¿cuáles son sus funciones favoritas? ¡Comparte tus opiniones en la sección de comentarios!
Ahorre tiempo, costos y maximice el rendimiento del sitio con:
- Ayuda instantánea de expertos en alojamiento de WordPress, 24 horas al día, 7 días a la semana.
- Integración de Cloudflare Enterprise.
- Alcance de audiencia global con 28 centros de datos en todo el mundo.
- Optimización con nuestro monitoreo de rendimiento de aplicaciones integrado.
Todo eso y mucho más, en un plan sin contratos a largo plazo, migraciones asistidas y una garantía de devolución de dinero de 30 días. Consulte nuestros planes o hable con ventas para encontrar el plan adecuado para usted.
