Inspeccionar elemento: cómo editar temporalmente cualquier página web

Hay una poderosa herramienta escondida en su navegador:.

Haga clic con el botón derecho en cualquier página web, haga clic y verá las entrañas de ese sitio: su código fuente, las imágenes y CSS que forman su diseño, las fuentes y los iconos que utiliza, el código Javascript que alimenta las animaciones y más. Puede ver cuánto tiempo tarda en cargarse el sitio, cuánto ancho de banda utilizó para descargar y el color exacto de su texto.

O puede usarlo para cambiar cualquier cosa que desee en la página.

Inspect Element es una manera perfecta de aprender qué hace que la web funcione, averiguar qué está roto en sus sitios, simular cómo se vería un cambio de color y fuente y evitar tener que Photoshop detalles privados en capturas de pantalla. Es un superpoder que nunca supo que poseía su navegador.

Aprendamos a usar Google Chrome Inspect Element para ayudar en su trabajo, ya sea un desarrollador o un comercializador que nunca ha escrito una línea de código. Si está leyendo esto en su teléfono, es hora de cambiar a su computadora portátil, abrir Google Chrome y prepararse para modificar algún código.

Espere, ¿por qué debería usar Inspect Element?

Si nunca ha echado un vistazo al código de un sitio web por curiosidad, es posible que se pregunte por qué debería aprender a usar Inspect Element.

• Diseñador: ¿Desea obtener una vista previa de cómo se vería el diseño de un sitio en dispositivos móviles? ¿O quiere ver cómo se vería un tono diferente de verde en un botón de registro? Puede hacer ambas cosas en segundos con Inspect Element.

• Comercializador: ¿Tiene curiosidad por saber qué palabras clave utilizan los competidores en los encabezados de sus sitios, o quiere ver si su sitio se carga demasiado lento para la prueba PageSpeed ​​de Google? Inspeccionar elemento puede mostrar ambos.

• Escritor: ¿Estás cansado de difuminar tu nombre y correo electrónico en capturas de pantalla? Con Inspect Element, puede cambiar cualquier texto en una página web en un segundo.

• Agente de soporte: ¿Necesita una mejor manera de decirles a los desarrolladores qué necesidades se solucionan en un sitio? Inspeccionar elemento le permite realizar un cambio de ejemplo rápido para mostrar de qué está hablando.

Para estos y docenas de otros casos de uso, Inspect Element es una herramienta útil para mantener. Es parte de las herramientas de desarrollo en su navegador, que incluye una serie de características adicionales: una consola para ejecutar código, una página para ver solo el código sin procesar detrás de un sitio, una página de fuentes con una lista de todos los archivos cargados en un sitio web, y más. Puede explorar todos ellos por su cuenta, pero por ahora, veamos cómo usar la pestaña principal para modificar una página web por nuestra cuenta.

Cómo empezar con Inspect Element

Hay varias formas de acceder a Google Chrome Inspect Element. Simplemente abra un sitio web que desee intentar editar (para seguir este tutorial, abra Zapier.com), luego abra las herramientas Inspeccionar elemento de una de estas tres formas:

• Haga clic con el botón derecho en cualquier lugar de la página web y, en la parte inferior del menú emergente, verá «.» Haga clic en eso.

• Haga clic en el menú de hamburguesas (el icono con 3 puntos apilados) en el extremo derecho de la barra de herramientas de Google Chrome, haga clic y luego seleccione. Alternativamente, en el menú de archivo, haga clic en Ver -> Desarrollador -> Herramientas de desarrollo.

• ¿Prefieres los atajos de teclado? prensa CMD+Option+I en una Mac, o F12 en una PC para abrir Inspect Elements sin hacer clic en nada.

De forma predeterminada, las herramientas de desarrollo se abren en un panel en la parte inferior de su navegador y mostrarán la pestaña; esa es la famosa herramienta Inspeccionar elemento que hemos estado buscando.

No tendrá mucho espacio para trabajar con Inspeccionar elemento en la parte inferior de la pantalla, así que haga clic en los tres puntos verticales en la parte superior derecha del panel de inspección del elemento cerca de la «X» (en la que haría clic para cerrar el panel). Ahora, verá una opción para mover el panel al lado derecho de su navegador (vista de acoplamiento derecho) o para abrir el panel en una ventana completamente separada (vista de desacoplamiento).

Para este tutorial, acoplemos el panel en el lado derecho de la ventana de su navegador para darnos más espacio para trabajar. Puede hacer que el panel Herramientas para desarrolladores sea más ancho o más estrecho colocando el cursor sobre el borde del lado izquierdo. Una vez el ↔ aparece el cursor, arrastre el panel hacia la izquierda para ensancharlo o estrecharlo hacia la derecha.

---

Ahora que estamos en Inspect Element, tenemos una variedad de herramientas útiles al alcance de la mano que podemos usar para hacer que cualquier sitio se vea exactamente como queremos. Para este tutorial, nos centraremos en las pestañas Elementos, Emulación y Búsqueda.

Buscar

La pestaña «Buscar» le permite buscar en una página web contenido específico o un elemento HTML. Está un poco oculto: deberá hacer clic en los 3 puntos y luego hacer clic para descubrirlo. Entonces podrá buscar en todos los archivos de una página web lo que desee.

Elementos

«Inspeccionar elemento» es la herramienta que exploraremos más en este tutorial, y es lo que se abre primero cuando inicia las herramientas de desarrollo en la mayoría de los navegadores. O haga clic en la pestaña «Elementos» en las Herramientas para desarrolladores para volver a ella si ha estado explorando en otro lugar.

En la pestaña Explorar, puede ver todo el HTML, JavaScript y CSS que creó un sitio web. Es casi lo mismo que ver el código fuente de un sitio web, con una diferencia crucial: puede cambiar cualquier código y ver los cambios en tiempo real en el sitio que tiene abierto. Puede cambiar cualquier cosa, desde la copia hasta el tipo de letra, luego hacer una captura de pantalla del nuevo diseño o guardar los cambios (simplemente vaya a la página y guárdela como un archivo HTML, o copie los cambios de código en su editor de texto). Sin embargo, una vez que vuelva a cargar la página, todos los cambios desaparecerán para siempre.

Emulación

¿Alguna vez ha querido obtener una vista previa de una página web en un teléfono sin sacar el teléfono del bolsillo? La pestaña «Emulación» le permite ver una página web como se vería en cualquier dispositivo, con ajustes preestablecidos para dispositivos populares o una opción para establecer la resolución de pantalla y la relación de aspecto. Incluso puede establecer una velocidad de Internet emulada para ver qué tan rápido se cargaría un sitio a través del acceso telefónico.

También está un poco oculto: deberá abrir Inspect Element y hacer clic en el botón del icono del teléfono para iniciarlo. Entonces, tendrá una herramienta perfecta para comprender cómo otros experimentan una página web.

---

Es hora de ponerse manos a la obra. Primero usaremos Buscar para encontrar cosas en una página web, luego usaremos Elements para editar texto y más en un sitio, y finalmente usaremos Emulación para ver cómo se vería nuestro sitio en un teléfono desde una ubicación específica.

Encuentre cualquier cosa en un sitio con la búsqueda de elementos de inspección

¿Se pregunta qué incluye sus sitios favoritos? La búsqueda es su mejor herramienta para eso, además de leer el código fuente completo de un sitio. Podrías abrir la vista de Elementos predeterminada, presionar CTRL+F o CMD+F y buscar a través del código fuente, pero la herramienta de búsqueda completa le permitirá buscar en todos los archivos de una página, ayudándole a encontrar texto dentro de archivos CSS y JavaScript o localizar una imagen de icono que necesita para un artículo.

Para comenzar, abra Zapier.com en Chrome si aún no lo ha hecho, luego abra Inspeccionar elemento, haga clic en los 3 puntos verticales en la esquina superior derecha del panel Herramientas para desarrolladores (cerca de la «X» de cierre) y seleccione » Buscar todos los archivos «. La pestaña Buscar aparecerá en la mitad inferior del panel Herramientas para desarrolladores.

En el campo de búsqueda, puede escribir cualquier cosa —— que desee encontrar en esta página web y aparecerá en este panel. Veamos cómo podemos usar esto.

Tipo meta name en el campo de búsqueda, presione su tecla e inmediatamente verá cada aparición de «meta nombre» en el código de esta página. Ahora, puede ver los metadatos de esta página, las palabras clave de SEO a su orientación y si está configurada o no para permitir que Google la indexe para la búsqueda. Ésta es una manera fácil de ver a qué se dirigen sus competidores y de asegurarse de que no haya estropeado nada en su sitio.

Probemos con otra consulta. Borrar meta name, tipo h2 en su lugar, en el campo de búsqueda y presione «Enter». Verá todas las apariciones de «h2» en los archivos JavaScript de Zapier en la parte superior, pero una vez que se desplace hacia la parte inferior, podrá ver todos los encabezados «h2» en esta página.

La búsqueda también es una herramienta eficaz para los diseñadores, ya que también puede buscar por color. Tipo #ff4a00 en el campo de búsqueda y presione «enter» (y asegúrese de marcar la casilla junto a «Ignorar mayúsculas y minúsculas» para ver todos los resultados). Ahora debería ver cada vez el color # ff4a00, el tono naranja de Zapier, en los archivos CSS y HTML de este sitio. Luego, simplemente haga clic en la línea que dice «color: # ff4a00; «para saltar a esa línea en el HTML del sitio y modificarla por su cuenta (algo que veremos en la siguiente sección).

Esta es una forma práctica para que los diseñadores se aseguren de que un sitio sigue la guía de estilo de su marca. Con la herramienta «Buscar», los diseñadores pueden verificar fácilmente el CSS de una página web para ver si se aplica un color al elemento incorrecto, si se usa una familia de fuentes incorrecta en una página web o si todavía estás usando tu color antiguo en algún lugar de su sitio.

La herramienta «Buscar» también es la manera perfecta de comunicarse mejor con los desarrolladores, ya que puede mostrarles exactamente dónde ha encontrado un error o qué es exactamente lo que necesita cambiar. Simplemente dígales el número de línea donde existe el problema y obtendrá su solución mucho más rápido.

O puede cambiar la página web usted mismo con, la parte principal de las Herramientas para desarrolladores de Chrome.

Cambie cualquier cosa con elementos

Los desarrolladores de aplicaciones para usuario utilizan la herramienta Inspeccionar elemento todos los días para modificar la apariencia de una página web y experimentar con nuevas ideas, y usted también puede hacerlo. Inspect Elements le permite modificar la apariencia y el contenido de una página web, agregando ediciones temporales a los archivos CSS y HTML del sitio.

Una vez que cierre o vuelva a cargar la página, sus cambios desaparecerán; solo verá los cambios en su computadora y en realidad no estará editando el sitio web real. De esa manera, puede experimentar y cambiar cualquier cosa, y luego copiar y guardar los mejores cambios para usarlos de nuevo más tarde.

Veamos qué podemos hacer con él.

Haga clic en la pestaña «Elementos» en el panel Herramientas para desarrolladores y, si desea más espacio, toque la tecla «Esc» para cerrar el cuadro de búsqueda que tenía abierto antes. Debería ver el código HTML de esta página; ahora sabe cómo se hace la salchicha.

En la esquina superior izquierda del panel del desarrollador, verá un icono de un mouse en la parte superior de un cuadrado. Haga clic en él, luego puede seleccionar cualquier elemento en la página que le gustaría cambiar. ¡Así que cambiemos algunas cosas!

Cambiar el texto de una página web

¿Alguna vez quiso cambiar el texto de un sitio, tal vez para ver cómo se vería un nuevo eslogan en su página de inicio o para quitar su dirección de correo electrónico de una captura de pantalla de Gmail? Ahora usted puede.

Haga clic en el ícono «mouse encima de un cuadrado», luego haga clic en cualquier texto en la página, tal vez el lema en la página de inicio de Zapier. En el panel Herramientas de desarrollo, verá una línea de texto con un resaltado azul que se parece a esto:

Haga doble clic en el texto «Conectar sus aplicaciones» que está resaltado en azul en el panel Herramientas para desarrolladores y se convertirá en un campo de texto editable.

Escribe lo que quieras en este campo de texto («Auri es un genio» debería funcionar bien) y presiona Enter. Acaba de cambiar el texto de la página web.

Actualice la página y todo volverá a la normalidad.

¿Divertida? Cambiemos algunas cosas más en esta página.

El panel de Herramientas para desarrolladores se vuelve a cargar con la página, pero cerrándolo. Presiona la «X» en la esquina superior derecha de la página.

Fresco. Ahora lo abriremos de nuevo, justo en el texto que queremos editar. Todo lo que tiene que hacer es hacer clic derecho en la parte de la página que desea cambiar, luego hacer clic en el enlace o que aparece en la parte inferior del menú contextual.

Cuando se abre el panel Herramientas de desarrollo, debería resaltar automáticamente esa oración. Bastante ordenado, ¿eh? Son las pequeñas cosas las que cuentan.

Ahora que hemos seleccionado el lema en el sitio de Zapier, cambiemos su apariencia.

Cambiar el color y la fuente de los elementos

A la derecha de esta oración en el panel Herramientas de desarrollo, verá un subpanel con 3 pestañas adicionales: Estilos, Computadoras y Escuchadores de eventos. Cada uno le permite cambiar el aspecto de esta oración en la página. Comencemos con la pestaña «Estilos».

Puede notar que algunas cosas están tachadas en la pestaña «Estilos». Esto significa que estos estilos no están activos para el elemento que los seleccionamos, por lo que cambiar estos valores no tendrá ningún efecto. Podemos ignorarlos para nuestros propósitos.

Intentemos cambiar algo. Vuelva a hacer clic en el icono de flecha en la parte superior de Inspeccionar elemento y seleccione el texto justo debajo del botón «Registrarse» en la página. Busca «alinear texto» en la pestaña «Estilos» (es posible que tengas que desplazarte un poco para encontrarlo).

En este momento, está configurado en «centro», pero haga doble clic en «centro» y escriba left. Esto hace que el texto esté alineado a la izquierda en la página.

Ahora juguemos con el color. Use el ícono del mouse en Inspeccionar elemento para seleccionar el botón esta vez, luego en la pestaña Estilos busque esta línea:

Y haga doble clic en «# ff4a00». Tipo #4199ad (no olvide el #) y presione «enter».

¡Acabamos de cambiar el color de nuestro botón de naranja a azul! Ahora intentemos algo realmente genial.

Cambiar estados de elementos

¿Desea ver cómo se verá un botón o enlace una vez que alguien pase el mouse sobre él o haga clic en él? Chrome Inspect Element también puede mostrar eso con sus herramientas de estado de elemento de fuerza. Puede ver cómo se verá el elemento una vez que un visitante se desplaza sobre el elemento (estado de desplazamiento), selecciona el elemento (estado de enfoque) y / o ha hecho clic en ese enlace (estado visitado).

Probemos esto. Asegúrese de haber seleccionado el botón de registro en la página de inicio de Zapier. Luego, haga clic derecho en ese código en la pestaña Elementos y seleccione :active: en ese menú.

Eso cambiará el botón a gris, que el sitio de Zapier muestra al hacer clic en el botón.

Ahora cambie el valor del color de fondo a #FF4A00, y debería ver instantáneamente el cambio de color del botón.

Intente experimentar, cambie el :hover: color, luego desmarque :hover: en el menú del botón derecho y arrastre el mouse sobre el botón para ver el nuevo color del botón.

Cambiar imágenes

También puede cambiar fácilmente las imágenes en una página web con Inspect Element. Cambiemos el fondo de superhéroe en el sitio de Zapier con esta espectacular foto de una llamarada solar de la NASA.

Primero, copie y pegue este enlace a la imagen:

https://c1.staticflickr.com/9/8314/7931831962_7652860bae_b.jpg

Ahora, abra Inspeccionar elemento en el fondo de la página de inicio de Zapier y asegúrese de haber seleccionado el signup-hero línea en el código. Haz doble clic en el enlace de la URL de fondo en el panel «Estilos» y pega el enlace que copiaste arriba.

Presione «enter» y vea la diferencia inmediatamente.

---

Editar texto es útil, intercambiar imágenes es divertido y cambiar colores y estilos puede ayudarlo a crear rápidamente los cambios que desea que se realicen en su sitio. Pero, ¿cómo se verá ese nuevo diseño de lema y botón en los dispositivos móviles?

Ahí es donde entra la emulación: es donde todo lo que hemos revisado hasta ahora se puede aplicar aún más. Veamos cómo.

Pruebe un sitio en cualquier dispositivo con emulación

Todo tiene que responder hoy. Los sitios web ya no solo se ven en computadoras, es más probable que nunca se vean en un teléfono, tableta, televisor o cualquier otro tipo de pantalla. Eso siempre debe tenerse en cuenta al crear contenido y diseños nuevos.

La emulación es una gran herramienta para aproximar cómo se verán los sitios web a los usuarios en varios dispositivos, navegadores e incluso ubicaciones. Aunque esto no reemplaza las pruebas en una variedad de dispositivos y navegadores, es un gran comienzo.

En el panel Herramientas para desarrolladores, verá un pequeño icono de teléfono en la esquina superior izquierda. Pinchalo. Esto debería convertir la página en una página pequeña con estilo de teléfono con un menú en la parte superior para cambiar el tamaño.

Cambie el tamaño del pequeño navegador para ver cómo se ven las cosas si estuviera navegando en una tableta, teléfono o incluso una pantalla más pequeña. O haga clic en el menú en la parte superior para seleccionar tamaños de dispositivo predeterminados como iPad Pro o iPhone 8 Plus—Avance y seleccione el último.

La pantalla de la página web debería reducirse al tamaño de un iPhone 8 Plus, y puede acercar un poco haciendo clic en el ícono + junto al número en la parte superior derecha de la cuadrícula; así es como se vería el sitio si alguien acercara móvil.

Continúe ampliando la vista arrastrando el borde derecho de la emulación de la página web hacia la derecha. ¿Mira qué pasa? Ya no estamos en la vista del iPhone 8 Plus. Arrastrar la pantalla a lo largo de la cuadrícula le permite ver cómo cambiará la página web a medida que cambia el tamaño de la pantalla, pero su vista ya no lo hará. reflejar el modelo de dispositivo que eligió anteriormente.

Regresemos a la vista del iPhone 8 Plus seleccionando esto en la lista desplegable del modelo nuevamente. Junto a la lista desplegable está la palabra «Retrato». Como habrás adivinado, esto te permite alternar entre la vista horizontal y horizontal.

Ahora, podemos ver cómo se vería esta publicación si la estuvieras leyendo en un iPhone 8 Plus. Siéntase libre de jugar con los otros dispositivos para ver cómo cambia esta página web y la resolución de la pantalla. Todas las demás herramientas para desarrolladores que hemos analizado hasta ahora también reaccionarán a la vista del dispositivo. Por ejemplo, vuelva a seleccionar el texto del lema de Zapier.

En la vista del iPhone 8 Plus, podemos ver que este texto es 2em, mientras que en la vista predeterminada en una computadora, es 3em.

El «em» es una unidad de tamaño de fuente que le permite cambiar automáticamente el tamaño del texto en relación con el texto circundante. Por ejemplo, digamos que tenemos un usuario con una gran configuración de fuente personalizada en su navegador. Si establece el tamaño de fuente de su párrafo en 14px, su fuente siempre será de 14px para ese usuario, pase lo que pase. Sin embargo, si establece el tamaño de fuente de su párrafo en 1em, el navegador de su usuario utilizará esta unidad para escalar su texto a la configuración grande de su usuario. Los teléfonos y las tabletas hacen esto para ampliar el texto de forma agradable.

Ahora cambiemos a la vista del iPad de Apple y seleccionemos el encabezado «probar en dispositivos» arriba. Esta vez, el tamaño de fuente es 3em. El tamaño de la fuente cambió según la vista del dispositivo, y volvió al tamaño predeterminado que usaría en una computadora, gracias a la pantalla más grande de la tableta.

---

Emular sensores de dispositivos móviles

Es posible que haya notado que su mouse ahora aparece como un pequeño círculo en la página web. Esto le permite interactuar con la página como si estuviera en su dispositivo móvil. Si hace clic mientras arrastra la página hacia abajo, esto no resalta el texto como lo haría normalmente en su navegador; arrastra la pantalla hacia abajo como si estuviera en un dispositivo de pantalla táctil. Con esta vista, puede ver qué tan grandes son las zonas táctiles en una página web. Esto significa que puede ver qué botones, iconos, enlaces u otros elementos se pueden tocar fácilmente con el dedo.

Incluso puede hacer que su navegador actúe como un teléfono. Presione la tecla «Esc» para abrir el panel de búsqueda en Inspeccionar elemento nuevamente, y esta vez haga clic en el menú de 3 puntos en el lado izquierdo para ver un menú de opciones. Seleccione para obtener tres nuevas herramientas: Geolocalización, Orientación y Toque.

Touch le permite activar o desactivar el selector de círculo predeterminado que actúa más como un dedo que como un cursor de mouse normal. La orientación le permite interactuar con sitios web sensibles al movimiento, como juegos en línea, que le permiten mover cosas moviendo su teléfono. Y la geolocalización te permite fingir que estás en una ubicación diferente.

Intentemos ver este sitio desde la sede de Google en Mountain View, CA.

Marque la casilla junto a «Emular coordenadas de geolocalización» e ingrese el valor 37 en el campo de texto y 122 en el campo de texto. Presiona enter en tu teclado.

Nada cambia, ¿verdad?

Esto se debe a que no hay contenido en esta página que cambie según su ubicación. Si cambia las coordenadas en un sitio como Groupon.com que usa tu ubicación para mostrar contenido localizado, sin embargo, obtendrás resultados diferentes. Ir Google.com en una ubicación diferente, y tal vez vea un nuevo logotipo de Google para unas vacaciones en otro país, o al menos obtendrá los resultados en un idioma diferente.

La emulación es una excelente manera de ponerse en el lugar de su usuario y considerar lo que el usuario puede ver en su página web, y es una forma divertida de explorar la web internacional.

Emular redes móviles

También puede ver cómo es navegar por un sitio en diferentes redes, quizás para ver si su sitio se cargará incluso si sus usuarios están en una red 3G más lenta.

Para intentarlo, haga clic en el botón de tres círculos a la izquierda de la pestaña de búsqueda de Inspect Element nuevamente y seleccione «Condiciones de red». Allí, puede elegir entre 3G rápido o lento, o sin conexión para ver cómo funciona la página sin Internet. O haga clic para incluir sus propias pruebas (tal vez agregue 56 Kbps para probar el acceso telefónico a Internet). Ahora, vuelva a cargar la página y verá cuánto tiempo tardará el sitio en cargarse en una conexión lenta y cómo se ve el sitio mientras se carga. Eso mostrará por qué debería mejorar su sitio para que se cargue más rápido en conexiones lentas.

También puede cambiar su agente de usuario: desmarque «Seleccionar automáticamente» al lado de «Agente de usuario» y seleccione «Internet Explorer 7» quizás para ver si el sitio cambia su representación para navegadores más antiguos. También es un truco útil para hacer que las páginas web se carguen incluso si afirman que solo funcionan en un navegador diferente como Internet Explorer.

---

Desafíos

Terminemos con algunos desafíos. ¡Muéstranos lo que has aprendido!

1. Cambie los titulares en CNN.com y envíenos un tweet con una captura de pantalla del titular de su artículo de tendencia.

2. Duplica tu sitio web favorito usando «Ver código fuente» y juega con el HTML para hacerlo tuyo.

3. Vea cómo se visualiza el sitio web en un dispositivo móvil y muéstrele a su desarrollador lo que podría mejorar si lo arregla usted mismo.

El equipo de marketing del equipo de Zapier confía en Inspect Element para modificar la información privada de las capturas de pantalla en las revisiones de nuestras aplicaciones, mientras que nuestro equipo de diseño la usa para simular cambios y ver cómo se verían las cosas en varias pantallas.

Este tutorial se publicó originalmente el 5 de enero de 2015, luego se actualizó y se volvió a publicar el 6 de junio de 2017 y el 25 de enero de 2018 con capturas de pantalla y pasos de la última versión de Google Chrome.