Uso de la herramienta Elemento de revisión del navegador para modificar una web

Hay muchos recursos valiosos libres para el desarrollo web, como libros, vídeos, tutoriales on line y más. Aprender a usar la herramienta Examinar elemento del navegador es una capacidad muy eficaz. Es una importante herramienta de estudio, al alcance de la mano y lista para utilizar.

La función Revisar elemento le permite ver el funcionamiento interno del portal web. Aun si solo ve etiquetas de IU como HTML, CSS y, en ocasiones, JavaScript, puede ver exactamente cómo los programadores crean websites.

En el presente artículo, le mostraremos cómo emplear la herramienta Examinar elemento y algunas de sus tecnologías, características y funciones relacionadas. Primero, presentaremos oficialmente la propia herramienta de elementos de inspección.

📑 Aquí podrás encontrar 👇

Presentación de la herramienta Comprobar elemento

En los primeros días de la web, solo había una forma de enseñar el código del cibersitio: Enseñar código fuente representar.

Ver la página fuente de Kinsta

Vea la página de origen de Kinsta.com.

Esta situación era común antes de que tuviéramos muchas hojas de estilo CSS y JavaScript. Los desarrolladores web emplean HTML en todas las unas partes del lugar, incluyendo el contenido, el formato y ... bueno.

Conforme la red comienza a evolucionar y el desempeño de la tecnología subyacente sigue medrando, es necesario desarrollar mejores herramientas. Firebug para Firefox es una solución temprana para entender el desempeño y los antecedentes de los websites:

Logotipos de Firefox y Firebug.

Logos de Mozilla firefox y Firebug.

Después de un tiempo, esta función apareció en casi todos los navegadores. En la actualidad, entendemos que esta función es una herramienta "Comprobar elemento":

Verifique la herramienta Element utilizada en el sitio web de Kinsta.

Consulte la herramienta Element en el sitio de Kinsta.

Esta es una manera poderosa de ver la tecnología y el código tras un portal de internet. Por ende, puede encontrarlo en algunos lugares diferentes, en general en el menú de la barra de herramientas, haga click con el botón derecho en la página y seleccione opciones o use atajos de teclado.

Si bien la herramienta Revisar elemento se enfoca en los ficheros HTML y CSS de la página, puede llevar a cabo más con ella.

La herramienta Examinar elemento de su navegador le permite ver el contenido de cualquier sitio web, desde HTML a CSS 👀 Aprenda a usarlo aquí ⬇️Haga click para twittear

Moverse por el panel del elemento de control

Herramientas de desarrollo Braven.

Herramientas de desarrollo Braven.

La herramienta Check Objetivo es mucho más que una manera de ver el código. En la mayoría de los casos, hay varios paneles libres:

  • Inspector-- Tiene por nombre elemento En ciertos navegadores. Esta es la pantalla primordial de la herramienta Revisar elemento, que exhibe el código de la página y el CSS concreto del elemento, tal como información mucho más detallada sobre la ubicación del "sistema de red" y otros aspectos.
  • Confort - Esta es la interfaz de observación para la interfaz del cibersitio. Asimismo puede escribir fragmentos de código aquí para evaluar sus ideas de manera rápida.
  • Internet - Aquí puede ver las solicitudes enviadas al servidor y las solicitudes recibidas del servidor, como B. todas y cada una de las solicitudes POST y GET.
  • Desempeño - Por supuesto, el sitio debe estar andando. Por lo tanto, existe una herramienta especial que le permite medir algunas métricas esenciales de un portal de internet. Ciertos navegadores marchan mejor aquí que otros.
  • Memoria - Esta sección exhibe cómo el ubicación utiliza la memoria y algunos navegadores también brindan una extensa selección de información aquí.
  • Emplear- En esta área, puede ver toda la información sobre la caché del ubicación, los servicios en background, etcétera.

También puede añadir otros paneles:

Lista de paneles de Braves DevTools.

Lista de otros paneles de Braves DevTools.

Hay paneles simples como mediosY mucho más complejo, como Analizador de JavaScript y Monitor de rendimientoEn resumen, el nombre de la herramienta Inspeccionar elemento compromete todas las funciones de la campana. Tiene peculiaridades tremendas y habría de ser el núcleo del fluído de trabajo de cualquier desarrollador web.

¿Por qué emplear un factor de inspección?

La herramienta Inspeccionar elemento es prácticamente la única solución "fija" que necesita a lo largo del proceso de avance. Veremos los datos técnicos finales de este artículo. Sin embargo, primero debe charlar sobre sus motivos para emplear Inspect Element.

Hay múltiples razones por las que es posible que quiera usar esta herramienta:

  • Puede inspirarse en otros sitios para emplear su sitio web.
  • Va a aprender de qué forma otros sitios o programadores incorporan algunas técnicas.
  • Le da permiso para evaluar su portal web sin secuelas.
  • La mayor parte de las herramientas de Inspect Element permiten la depuración del sitio.
  • Es bueno entender más sobre websites relacionados.

En resumen, aprender desarrollo web supone ver buenos ejemplos de sitios web y descubrir qué los hace efectivos.

La herramienta Revisar elemento le permite revisar el código HTML y CSS exacto que se usa en su sitio web y es una increíble forma de integrar estas consideraciones y técnicas en su trabajo.

De qué manera hallar una herramienta de elemento de verificación del navegador

La buena noticia es que la herramienta Comprobar destino es fácil de localizar. En la mayor parte de las situaciones, lleve a cabo clic con el botón derecho en la página y escoja prueba Alguno Verifica el elemento:

Seleccione la herramienta de inspección.

Elija la herramienta de inspección.

De manera predeterminada, la herramienta se abre en una ventana compartida. Por lo general, se expone el lado derecho de forma predeterminada. Sin embargo, puede personalizarlo a su gusto e inclusive pegar la herramienta en una ventana:

La herramienta Comprobar elemento se encuentra en una ventana separada.

Compruebe la herramienta Elemento en la ventana.

Naturalmente, también puede entrar al elemento Comprobar mediante la barra de herramientas de su navegador o los atajos de teclado. La localización precisa cambia según el navegador; por ejemplo, puedes encontrar Mozilla firefox Herramientas de desarrollo web Adentro Herramientas> Herramientas del navegador Por el contrario, Brave (y otros navegadores basados ​​en Chromium) Herramientas de desarrollo oportunidad Ver> Desarrollador Menú:

Buen menú de barra de herramientas con herramientas de desarrollo.

Buen menú de barra de herramientas con herramientas de avance.

Los atajos de teclado suelen ser afines a los atajos del navegador: Comando + Mayús + C (Ctrl + Mayús + C Para ventanas). Este hatajo es una forma rápida de entrar a las herramientas que precisa para comenzar inmediatamente.

Si jamás ha abierto la herramienta Comprobar elemento, comunmente aparecerá en el lado derecho del menú, como se mencionó anteriormente. Para cambiar esta configuración, lleve a cabo clic en el menú del semáforo en la barra de herramientas "Contrastar elementos". Aquí puede cambiar la página que exhibe "dock":

Habilite la opción Docking Edge en la herramienta Elemento.

Compruebe la página de acoplamiento de la herramienta Destino.

Tenga en cuenta que Firefox asimismo emplea la vista "Triple panel" de forma ya establecida, lo que le contribuye a conseguir la mayor cantidad de información viable en Examinar elemento:

Una vista triple de Firefox.

Una vista de "tres cuadros" en Mozilla firefox.

Cuando abre una herramienta, es preferible comprender lo que hace con ella. Vamos a hablar de eso a continuación.

3 casos para emplear la herramienta de elemento de verificación

Hemos descrito ciertos usos de la herramienta Revisar elemento, pero asimismo tenemos la posibilidad de ofrecer algunos usos. Analicemos estos resumidamente.

1. Busque productos específicos online

La meta principal de la herramienta Revisar título es comprobar los elementos de un portal de internet. Para hacer esto, vaya al sitio web de su elección y seleccione un método para abrir la herramienta de desarrollo.

Tan pronto como se abra el panel, lleve a cabo click en la flecha que funciona como selector del elemento deseado:

Icono de flecha del inspector.

Icono de flecha del inspector.

Aquí puede poner el mouse sobre cualquier elemento de la página y verlo Evaluador / elemento Ventana:

Resalte el elemento en el área de Herramientas para desarrolladores.

Resalte el elemento en el área de Herramientas para programadores.

Es un desarrollo sencillo. Esta es una de las razones por las cuales la herramienta Examinar elemento es tan importante y habitual entre los desarrolladores web.

2. Simule el dispositivo, el monitor y el navegador de destino

El elemento de inspección también se puede usar como múltiples simuladores de dispositivos. En otras expresiones, puede ver de qué forma se ve un portal de internet en un dispositivo en particular. Muchas opciones:

Lista de dispositivos simulados de Braven.

Lista de dispositivos simulados que aparecen en el fichero Brave.

El emulador es excelente para evaluar si la primera estrategia o el diseño receptivo de su dispositivo móvil son precisos y efectivos. Es muy valioso y más económico que poner 200 gadgets en su mesa.

Por lo general, utiliza la emulación de dispositivo desde un pequeño ícono en una de las áreas "Verificar sitios":

Simule el dispositivo con la herramienta Comprobar elemento.

Simule el dispositivo con la herramienta Revisar elemento.

Al hacer clic en este icono, su ubicación aparecerá en el dispositivo que seleccionó:

Seleccionar de la herramienta

Seleccione el dispositivo a simular en la herramienta "Comprobar elementos".

Exploraremos esto con más detalle más adelante, pero es una manera sólida de sostener la congruencia del diseño en todos y cada uno de los dispositivos.

3. Saber el desempeño del portal web.

La herramienta Revisar elemento asimismo puede asistirlo a evaluar la velocidad y el desempeño de su página web de las próximas maneras: desempeño Engranaje:

Verifique el indicador de rendimiento del elemento.

Compruebe el indicio de desempeño del elemento.

Esta función "ahorra" el tiempo de carga de ciertos elementos y scripts. Los navegadores basados ​​en cromo dan esta información perfectamente. Guarda la página mientras se carga y muestra los desenlaces como una línea de tiempo.

Esta es una increíble forma de ver si una página marcha a nivel general. A partir de ahí, debe emplear herramientas como Google plus PageSpeed ​​Insights o Lighthouse para mejorar el desempeño de su página web. Los navegadores basados ​​en Chromium tienen un generador de informes Lighthouse que viene dentro:

Informe integrado de Google Lighthouse.

Informe que viene dentro de Google+ Lighthouse.

Asimismo puede ver el resumen de la prueba de desempeño en múltiples otras pestañas; por ejemplo, puede: a Llama al árbol, Resumen y Libro de eventos:

Consulte el registro de eventos de destino.

Consulte el registro de eventos de destino.

Como puede imaginar, no requiere otras herramientas para valorar el desempeño o el estilo de su cibersitio. Cómo marcha en la práctica, lo discutiremos ahora.

Consejos para emplear la herramienta Revisar elemento

Hemos comentado anteriormente que la herramienta Comprobar elemento es más poderosa de lo que semeja a primer aspecto. Comencemos con lo básico y observemos algunos consejos y trucos para explotar al máximo lo que está libre.

Cambiar los atributos, valores y estado del elemento

Hasta ahora, solo hemos analizado el término de que la herramienta Revisar elemento se puede utilizar para efectuar cambios temporales en un sitio. Analicemos con mucho más aspecto cómo puede realizar esto.

Los pasos son fáciles. Primero, escoja el elemento deseado con el icono de flecha. Si pasa el mouse sobre diferentes partes, verá una superposición con las próximas partes resaltadas:

Seleccione un elemento de la herramienta de revisión de elementos.

Escoja un elemento de la herramienta de revisión de elementos.

Cuando llegue al destino esperado, puede llevar a cabo doble clic en prácticamente cualquier sitio de la etiqueta. elemento Panel y escribe tus cambios. Por servirnos de un ejemplo, nos gustaría cambiar el texto del héroe original en la página de inicio de Kinsta a otro contenido:

Cambie el texto en la página de inicio de Kinsta.

Cambie el texto en la página de comienzo de Kinsta.

Asimismo puede emplear CSS de esta manera que HTML. Tomemos, por poner un ejemplo, el botón de llamada a la acción (CTA) de Kinsta Home:

Seleccione el botón de la página de inicio de Kinsta.

Seleccione el botón de la página de inicio de Kinsta.

En el momento en que escoja el botón con el puntero del mouse, va a ver el CSS asociado a la derecha estilo Engranaje:

Compruebe la ventana Estilo de herramienta de elemento.

Compruebe la ventana Estilo de herramienta de elemento.

Al igual que con los elementos HTML, asimismo puede cambiar el valor y añadir CSS:

Cambie el color de los botones en el panel Estilo.

Cambie el tono de los botones en el panel Estilo.

Naturalmente, desea usar distintas métodos para elementos, como botones. En estas condiciones, : Senderismo También debe cambiar el modo perfecto, simplemente haga clic en :UPS En la ventana Estilo de vínculo. Cuando selecciona esta alternativa, hace aparición una lista de estados de elementos y puede escoger qué estados de elementos enseñar en el modo de vuelo CSS:

Utilice la configuración de modo en la ventana de estilo.

En la ventana Estilo, vaya a Estado.

El sitio exhibe de qué forma se ve el estado sin ninguna acción. Aquí hemos cambiado el color del mouse para distinguirlo del botón predeterminado:

Cambie el color del modo del mouse en la ventana Estilo.

Cambie el color del modo del mouse en la ventana Estilo.

Incluso puede conseguir la dirección de Internet de una imagen y compartirla con otros. En la página de inicio de Kinsta, exponemos una atrapa de pantalla del panel de MyKinsta:

Pantalla de resumen de MyKinsta en la página principal de Kinsta.

Pantalla de resumen de MyKinsta en la página principal de Kinsta.

Al detectar el elemento y cambiar la dirección de Internet de origen de la imagen, puede probar otras imágenes en su rincón:

Cambie la imagen en la página de inicio de Kinsta.

En un caso así, los cambios van a entrar en vigor en unos minutos (Fuente de la imagen: Pixabay).

Como era de aguardar, estos cambios no son permanentes y una actualización rápida de la página puede lograr que todo vuelva a la normalidad. De forma alternativa, puede copiar los archivos HTML y CSS en el editor e incorporarlos a su código para sostener estos cambios permanentes.

Elemento de búsqueda

Posiblemente deba hallarlo antes de cambiar el producto. La herramienta Comprobar elemento tiene una función de búsqueda fácil que le deja hallar cualquier parte de una página web.

En otras expresiones, si no sabe dónde buscar, es difícil de conseguir. La forma "oficial" de cambiar a los navegadores basados ​​en Chromium es ir al menú "Semáforos" en el lado derecho de la página y seleccionar búsqueda Opciones:

Opciones de búsqueda en Brave Developer Tools.

Opción de búsqueda en Brave Developer Tools.

En el momento en que use esto, se va a abrir Comodidad Panel juntos búsqueda Etiqueta. Ingrese el nombre que desee en el cuadro de artículo y va a ver una lista de elementos relacionados en la página:

Busque elementos en Braven DevTools.

Busque elementos en Braven DevTools.

Tenga en cuenta que puede conseguir esta función en otros sitios de otros navegadores; por servirnos de un ejemplo, hay un cuadro de búsqueda en la parte de arriba de Mozilla firefox inspector Engranaje:

Encuentra el artículo en Firefox desde la ventana de revisión.

Busque el elemento en la ventana de exploración de Mozilla firefox.

Aquí tienes otro consejo rápido: puedes comprobar elemento Cortar y escoger Extensión recursiva:

Opción

Opción de extensión recursiva en el panel Elementos.

En el momento en que lo miras estilo El panel asimismo se puede hallar un filtrar Campo de artículo. Este campo le deja filtrar las propiedades CSS, lo que lo convierte en un socio excelente para las actividades de búsqueda global:

Según los atributos de la ventana Estilo de filtro.

Según los atributos de la ventana Estilo de filtro.

Por norma general, no tiene por qué ser difícil conseguir lo que necesita con 2 filtros customizados y una herramienta de búsqueda.

Comenzando con el modelo de caja

Una de las mejores formas de ver la herramienta de elementos para estudiar mucho más sobre cómo las propiedades CSS afectan a los elementos es ver un modelo de caja.

Modelo de caja.

Modelo de caja.

Esta descripción general muestra de qué forma hace aparición un cuadro concreto (como "Elemento" o "Div") en la pantalla. En otras palabras, describe de qué forma los márgenes, los espacios, los marcos y el contenido se mezclan con lo que hace aparición en la pantalla.

Argumentar el CSS completo de una plantilla de caja y su interacción con el código HTML de una página está fuera del alcance de este artículo, aunque Mozilla proporciona una guía excelente para los datos concretos del concepto.

A menudo hallarás caja En el panel diseño Cualquiera cálculo Verifique el panel derecho de la herramienta Elemento:

Marque el campo Modelo de caja en la herramienta Elemento.

El área de Plantilla de cuadro en la herramienta Revisar elemento.

De la misma con cualquier elemento y atributo, también puede cambiar los valores y la configuración de campos concretos. También hay una lista de otras funciones que le dejan poner el cuadro, detallar el índice Z, el punto flotante y la configuración de visualización, y más.

Si está utilizando un diseño de caja, asimismo puede favorecerse de tener el sistema de cuadrícula hecho desde el del costado, conque compruebe diseño Panel: las opciones que precisa son red Menú:

Menú de configuración de cuadrícula.

Menú de configuración de cuadrícula.

Haga clic en la opción de visualización que quiera y luego seleccione la superposición correcta que la muestra en la pantalla a fin de que logre utilizar la plantilla de cuadro para modificar elementos del lugar y tomar resoluciones más detalladas.

Utilice el elemento Inspeccionar para emular el dispositivo

Han evolucionado desde oraciones hasta un vocabulario completo, pero la capacidad de respuesta y la compatibilidad con gadgets móviles inteligentes son componentes esenciales en el desarrollo web. En consecuencia, la herramienta Comprobar elemento soluciona este problema con múltiples funcionalidades.

La mayor parte de los navegadores tienen un icono de dispositivo móvil en la parte de arriba de la herramienta Comprobar destino:

Cambie a la visualización receptiva en su dispositivo móvil en Brave.

Cambie a la visualización receptiva en su dispositivo móvil inteligente en Brave.

Sin embargo, Safari es diferente; en cambio es Entrar o salir del modo de diseño adaptable existir desarrollar Menú:

Posibilidad de salir del modo de diseño receptivo en Safari.

Opción "Escapar del modo de diseño adaptable" en Safari.

Independientemente de cómo llegue allí en el momento en que escoja esta opción, el sitio web aparecerá como si se mostrara en un dispositivo mucho más pequeño:

Vista de diseño móvil en Firefox.

Vista de diseño móvil inteligente en Mozilla firefox.

Si bien Safari solo le permite escoger entre diferentes dispositivos Apple, otros navegadores profundizan y le brindan las herramientas que precisa para diseñar primero, según los principios de los dispositivos móviles. Por poner un ejemplo, puede elegir la dirección de la vista y el dispositivo que quiere simular:

Lista de emulaciones de dispositivos en Brave.

Lista de emulación de gadgets en Brave.

Aquí hay otras 2 especificaciones interesantes. Primero, puede simular la agilidad de la red. Safari no ofrece alternativas a esto, y los navegadores basados ​​en Chromium proponen una alternativa pequeña y genérica para limitar la web:

Opciones de gas en Brave.

Opciones de gas en Brave.

Mozilla firefox es el mejor en este sentido y existen muchas redes para escoger:

Opciones limitadas para Firefox.

Opciones limitadas para Mozilla firefox.

Asimismo puede solucionar el problema simulando la contestación táctil y la detección del sensor. Esta es la configuración ya establecida para los navegadores basados ​​en Chromium y debe abrirse en Firefox:

Una alternativa a la retroalimentación háptica en Firefox.

Una opción alternativa a la retroalimentación háptica en Firefox.

Firefox se queda atrás en este aspecto pues Chrome, Brave y otros aparecen como un pequeño "dedo" del cursor. Esta función no marcha en ningún navegador, pero es una forma fiable de ver el rendimiento de su cibersitio en otros gadgets.

Para muchos programadores web, este género de pruebas de manera frecuente se suprimen. En otras expresiones, si su navegador ofrece una solución tan completa, en este momento no hay excusa.

Atajos de teclado al emplear la herramienta Revisar elemento

La mayoría de los accesos directos del navegador tienden a ser los mismos entre los navegadores. Si cambia entre diferentes herramientas para evaluar su página web, es una buena noticia.

Aquí hay una lista rápida de algunos de los atajos de teclado más populares (y mucho más valiosos):

Abra la herramienta de inspección Comando + Mayús + C Para Mac Ctrl + Mayús + C Para ventanas
Cambiar entre nodos alto y Abajo flecha
Expandir el nodo elegido Acertado flecha
Ocultar el nodo seleccionado mantenerse flecha
El nodo recursivo se expande y disminuye Selección + click Para Mac Alt + click Para ventanas
Para emplear un atributo, vaya al nodo Adelante Alguno regresar
Pasar por los atributos del nodo. etiqueta
Vuelve a través de las características del nodo. Mayús + Tabulador
Ocultar o enseñar el nodo elegido B
Edición y edición en formato HTML F2
Escoger la propiedad CSS aumenta el valor en uno. elevado flecha
Si se elige la propiedad CSS, el valor se reduce en uno Abajo flecha
Si escoge la propiedad CSS, aumente el valor a 10 Mayús + arriba flecha
Si se escoge la propiedad CSS, el valor se disminuye en uno Mayús + abajo flecha
Si selecciona la propiedad CSS, aumente el valor a 0,1 Opción + arriba Flechas Mac, Alt + arriba Flecha de ventana
Si escoge la propiedad CSS, reduzca el valor a 0,1 Opción + abajo Flechas Mac, Alt + abajo Flecha de ventana

Evidentemente, hay mucho más atajos. Mozilla da una increíble documentación para Firefox, al tiempo que Chrome, Brave, Edge y otros accesos directos para comunicar. Apple no es realmente útil para los atajos de teclado de los programadores de Safari porque no tienen una lista definida en su página de ayuda. En su lugar, recomendamos leer la documentación oficial de las herramientas de desarrollo de Safari.

Estas normas detalladas lo asistirán a obtener mucho más información sobre la función "Verificar elemento" de su navegador (y todas las herramientas almacenadas en ella) 🔎Realice click para twittear

Generalizar

El avance web por el momento no es solo HTML. Supone muchas técnicas. Aun si se apega a la trinidad de HTML, CSS y JavaScript, aún necesita comprender cómo un portal de internet combina todos estos componentes.

La herramienta Explorar elemento del navegador es de las mejores formas de observar la estructura interna de un portal de internet y conseguir mucho más información sobre su desempeño. Más allá de que es una gran herramienta para estudiar, es asimismo puede asistirlo a probar cambios en su sitio web y entender de qué manera funciona en diferentes gadgets y redes móviles inteligentes.

¿Usa de manera frecuente un factor de auditoría? Si es de esta forma, ¿cuál es tu preferido? ¡Comparte tu opinión en el campo de comentarios!


Si le gustó este artículo, le encantará el ambiente de hospedaje de WordPress de Kinsta. Optimize su portal web y consiga soporte 24/7 de nuestro experimentado equipo de WordPress. Nuestra infraestructura impulsada por Google+ Cloud se enfoca en la escalabilidad, el rendimiento y la seguridad. ¡Le exponemos lo diferente que es Kinsta! Mira nuestro plan

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir