Utilizando Inspect Element, puedes alterar temporalmente los elementos del sitio web para conocer el código que hay detrás de un estilo o función que quieras copiar. Tanto si eres diseñador, escritor o comercializador, puedes beneficiarte de dominar el uso de Inspect Element.
En este artículo, explicamos el elemento de inspección y cómo utilizarlo en cuatro navegadores web comunes.
¿Qué es Inspect Element y por qué es importante?
Puedes ver los códigos HTML y CSS que hay detrás del contenido -como los tonos o tipos de letra precisos de ciertos componentes- e incluso editarlos temporalmente para ver los efectos en los navegadores Firefox, Google Chrome, Internet Explorer y Safari. La función Inspeccionar elemento permite descubrir el código JavaScript que crea las animaciones, el código fuente y el código CSS que construye el diseño del sitio web, y mucho más. También puedes utilizar Inspeccionar Elemento para determinar las tonalidades precisas o evaluar el tiempo que tarda en cargarse el sitio web o el ancho de banda que consume al descargarlo.
Inspect Element le permite cambiar cualquier cosa en la página. Cuando cambias el código, las modificaciones aparecen simultáneamente en tu pantalla, pero sólo tienen efecto durante tu sesión, por lo que no corres el riesgo de romper la página.
Relacionado: Cómo escribir código en 6 pasos
¿Qué puede hacer con Inspect Element?
Inspect Element es la herramienta perfecta para realizar cambios temporales en una página web. Estas son algunas de las ventajas específicas de su uso según el título de la carrera:
- Diseñadores web: Los diseñadores de páginas web pueden utilizarlo para previsualizar los cambios de maquetación y diseño antes de implementarlos en una página o ver cómo quedaría un color en un dispositivo móvil.
- Escritores: Los redactores a veces necesitan hacer una captura de pantalla de una página web que contiene información sensible. Pueden utilizar Inspect Element para eliminar ese contenido sensible.
- Los vendedores digitales: Los profesionales del marketing digital pueden utilizar Inspect Element para detectar palabras clave ocultas en la página web de un competidor. También pueden utilizarlo para verificar si su sitio se está cargando con demasiada lentitud para la prueba PageSpeed de Google.
-
Apoyar a los agentes: Los agentes de soporte pueden utilizar Inspect Element para mostrar un ejemplo rápido de un cambio y demostrar a los desarrolladores lo que tienen que arreglar.
Relacionado: Cómo convertirse en un vendedor digital
Cómo utilizar el elemento de inspección en Chrome
Siga estos pasos para utilizar la herramienta Inspect Element en Chrome:
1. Conéctese a Internet
Abra un sitio web que desee ver en su navegador Chrome.
2. Acceder al elemento de inspección
Para acceder a Inspect Element, puedes utilizar una de las tres opciones siguientes:
- Haz clic con el botón derecho del ratón en cualquier parte de la página y selecciona “Inspect” en la parte inferior del menú que aparece.
- Haga clic en los tres puntos verticales de la barra lateral y seleccione “Más herramientas” ->“Herramientas para desarrolladores” en el menú desplegable.
-
Utilice los atajos de teclado: “F12” en el PC para abrir Inspect Elements o “CMD+Option+I” en Mac.
El cuadro de elementos aparece en la parte inferior de su navegador y muestra la pestaña Elementos, que es la herramienta que está buscando.
3. Elija su punto de vista
Abre o mueve el cuadro de Elementos de Inspección para ver más y trabajar mejor. Haz clic en los tres puntos verticales de la parte derecha del cuadro para abrirlo en una ventana aparte (vista desacoplada) o muévelo hacia la derecha para tener más espacio para trabajar (vista acoplada derecha). También puedes cambiar el tamaño de la caja arrastrando el cursor sobre sus esquinas.
4. Explorar las fichas
Una vez en Inspect Element, notará muchas pestañas diferentes que pueden ayudarle a personalizar la apariencia de su sitio web, incluyendo la:
- Ficha de los elementos: El elemento de inspección es la primera herramienta que se abre al iniciar las Herramientas para desarrolladores en un navegador. Puede hacer clic en “Elements” para volver a él después de explorar otra pestaña.
- Explorar la ficha: Puedes ver todo el JavaScript, CSS o HTML con el que se construyó la web.
- Ficha de búsqueda: La pestaña de búsqueda le ayuda a buscar elementos o contenidos HTML específicos a través de todos los archivos de una página web. Para acceder a ella, haga clic en los tres puntos verticales y seleccione “Buscar todos los archivos” para revelarla.
-
Ficha de emulación: La pestaña de emulación permite previsualizar una página web y ver cómo se vería en un dispositivo móvil. Puedes seleccionar entre diferentes tipos de dispositivos, e incluso hay una opción para regular la resolución de la pantalla y la relación de aspecto. Para acceder a esta pestaña, abra “Inspeccione el elemento” y haz clic en el icono del teléfono.
5. Modificar el CSS
Puedes modificar el CSS y cambiar los tamaños, bordes, fuentes o colores editándolos en el panel CSS.
Relacionado: Guía para principiantes para aprender a codificar
6. Modificar elementos
Aquí'tamos cómo puede modificar elementos:
- Añada un elemento. Haga clic con el botón derecho del ratón en cualquier parte del panel y elija Añade un atributo;
- Oculta un elemento. Haga clic en el elemento que desea ocultar y seleccione Oculte un elemento;
-
Suprimir un elemento. Haz clic en el elemento que quieras eliminar. Seleccione “Inspect,” a continuación “Eliminar elemento.”
7. Realizar cambios en HTML
Haz clic en el botón “Ficha de los elementos” Deberías ver el HTML de la página web. Puede realizar los siguientes cambios:
Cambiar el texto de una página web
En la esquina superior del panel de desarrolladores, haz clic en el icono de un ratón sobre un cuadrado. A continuación, haga clic en el texto que desea modificar en la página. Ahora podrá ver una línea de texto resaltada en azul en el panel de herramientas de desarrollo. Haz doble clic en ese texto azul resaltado, y se convertirá en editable. Puedes escribir lo que quieras en ese campo de texto y pulsar Enter. El texto seleccionado cambiará en la página web. Si actualiza la página, su modificación desaparece.
Cambiar el tipo de letra
Si ya ha hecho clic una vez en el icono de un ratón encima de un cuadrado para hacer su modificación anterior, ahora puede acceder a un acceso directo. Haga clic en las palabras que desee modificar en la página web y, a continuación, seleccione “Inspect” en el menú del botón derecho, y verá la frase seleccionada resaltada en el panel de herramientas de desarrollo. Puede ver un subpanel a la derecha de esta frase.
Cada pestaña adicional—estilo, computado, escuchador de eventos—puede cambiar la apariencia de la frase—en la página. Los estilos permiten cambiar la alineación en la función text-align. Haga doble clic en la palabra que describe la alineación y escriba la que desee. Por ejemplo, si está centrado, puede escribir “left-align.”
Cambiar el color
Haga clic en el icono del ratón en Inspeccionar elemento para acceder a la “Style” ficha y seleccione la línea de color. Hay una sucesión de letras y números que siguen a un símbolo #. Haga doble clic en él y escriba otro código, luego pulse Intro.
Por ejemplo, el naranja es #ff4a00 y el azul es #4199ad.
Cambiar un botón
En la página web, seleccione el botón que desea cambiar. Luego, en la pestaña Elementos, haga clic con el botón derecho del ratón en ese código. Se despliega un menú. Puede ver los diferentes estados del botón:
- :activo: cómo se ve el botón cuando un visitante hace clic en él.
- :Concentración: cuando el visitante lo selecciona
- :visitado: cuando el visitante haga clic en él o
- :estado de ánimo: cuando el visitante pasa por encima del botón.
Por ejemplo, seleccionando “:focus:” entonces cambiar el valor del color de fondo permitiría ver el cambio de color del botón al hacer clic en él.
Cambiar una imagen
Para cambiar una imagen en una página web, primero puedes copiar el enlace de la imagen que quieres. A continuación, abra Inspeccionar elemento y seleccione la imagen original que necesita cambiar. En el panel de Estilos, haz doble clic en el enlace de la URL del fondo y pega el enlace de la nueva imagen.
El proceso es el mismo con un GIF o un vídeo. Sólo tienes que añadir el enlace.