Los trucos más importantes que puedes descubrir usando Element Inspector en el navegador
La herramienta Element Inspector es una de las herramientas más útiles que su navegador tiene para ofrecer, ya sea un desarrollador web o un usuario que busca una personalización rápida de una página web. Con esta herramienta, puedes editar texto e imágenes, detectar errores e incluso personalizar el diseño de la página directamente. Este artículo revisa un grupo de fantásticos trucos que puedes realizar con esta herramienta, ayudándote a mejorar tu experiencia en línea y aprender algunos secretos que pueden ser desconocidos para muchos.
El Element Inspector de tu navegador parece ser una herramienta exclusiva para desarrolladores, pero puedes hacer algunas cosas interesantes con él incluso si no sabes nada de programación.
1. Descargar imágenes
Es posible que necesite obtener una imagen de un sitio web. Intenta hacer clic derecho sobre él y presionar "Guardar imagen", solo para descubrir que el clic derecho está deshabilitado o el botón "Guardar imagen" no está disponible. En otras ocasiones, es posible que solo puedas descargar una pequeña vista previa en miniatura de la imagen y no el archivo de tamaño completo. ¿Qué está sucediendo?
O los desarrolladores han desactivado el botón "Guardar imagen" a propósito o están utilizando un marco web que no admite imágenes como esta. Hay una solución elegante para esto en Element Inspector. De hecho, puedes obtener cualquier recurso de imagen de un sitio web, en tamaño completo, en tres sencillos pasos.
نصيحة
A veces, estas imágenes están bloqueadas por motivos de licencia y derechos de autor, así que tenga cuidado y respete el uso legítimo para evitar cualquier problema legal.
Paso 1
Haga clic derecho en cualquier lugar de la página y haga clic en "Inspeccionar elemento" o "Inspeccionar". También puede encontrar el método abreviado de teclado específico del inspector y utilizarlo en su navegador. F12 funciona con la mayoría de navegadores y sistemas operativos. Estoy usando Firefox para esta demostración, pero los pasos son idénticos.
Paso 2
Dentro de la ventana Inspeccionar elemento, haga clic en la pestaña "Red". La pestaña "Red" debe tener "Fotos" como uno de los submenús. Haga clic en "Fotos".
Ahora vuelva a cargar la página para que todos los recursos de imagen aparezcan en la pestaña Imágenes. Utilice el botón de actualización junto a la barra de direcciones de su navegador o presione Ctrl+R.
al paso 3
Y eso es todo. Toda la biblioteca de fotos debe cargarse en la lista. La lista se actualiza dinámicamente, por lo que a medida que se carguen más imágenes en la página web, aparecerán aquí también.
Puede mover el puntero sobre un archivo para ver su vista previa y sus dimensiones. Haga doble clic en él para abrir el archivo en una nueva pestaña, donde podrá guardarlo usando el menú contextual.
2. Descargar vídeos
Al igual que los recursos de imágenes, los sitios web a veces no permiten descargar vídeos directamente. Pero puedes descargarlos cargándolos dentro del inspector de elementos. Una vez cargado en el inspector, simplemente puede hacer doble clic en el nombre del archivo para abrirlo en una nueva pestaña.
Paso 1
Abra la ventana Inspeccionar elemento presionando el método abreviado de teclado F12 (esto debería funcionar para la mayoría de los sistemas). Alternativamente, puede hacer clic derecho en cualquier lugar de la página web y seleccionar "Inspeccionar". Debería aparecer la ventana del Inspector de artículos.
Paso 2
Haga clic en la pestaña Red, luego haga clic en Medios para filtrar todo excepto los archivos de video. Vuelva a cargar la página. Haga clic en el botón Actualizar navegador o presione Ctrl+R.
Al paso 3.
Los archivos de vídeo deben cargarse en una lista. No puede obtener una vista previa de él de inmediato, pero puede hacer doble clic en un archivo para abrirlo en una nueva pestaña. Aquí, simplemente puede hacer clic derecho y descargarlo.
3. Tome capturas de pantalla de toda la página.
Si desea guardar una página web completa, puede descargarla rápidamente como un archivo PDF o HTML. Pero, ¿qué pasa si quieres tomar una captura de pantalla normal de toda la página? Así es como.
Firefox tiene una herramienta dedicada para tomar capturas de pantalla en su menú contextual habitual, así que te mostraré cómo hacerlo en Google Chrome y otros navegadores.
Abra la herramienta de inspección haciendo clic derecho en cualquier lugar de la página o presionando F12.
Presione Ctrl+Shift+P para abrir la ventana Ejecutar. Escriba "Tomar captura de pantalla en tamaño completo" en esta ventana. Haga clic en él.
Inmediatamente verá una ventana "Guardar como" que le permitirá guardar la captura de pantalla de página completa en formato JPG.
4. Imagina que estás usando un teléfono
La mayoría de los sitios web se cargan de manera diferente según el tipo de dispositivo y el tamaño de la pantalla. Si desea engañar a un sitio web haciéndole creer que está utilizando un dispositivo diferente (por cualquier motivo), puede hacerlo fácilmente con una herramienta de escaneo.
En Chrome, abra la ventana de inspección de elementos desde el menú contextual que aparece cuando hace clic derecho o usa F12. Luego haga clic en el ícono de la pequeña computadora portátil y el teléfono en la esquina superior izquierda. Firefox tiene un botón similar llamado Modo de diseño responsivo (Ctrl+Shift+M).
Obtendrá una lista de dispositivos que puede emular y también podrá ajustar manualmente el tamaño de la pantalla.
Una vez que elija un dispositivo móvil, notará que su navegador también imita los gestos táctiles.
5. Definir líneas
Este truco es para creativos, pero cualquiera que tenga curiosidad sobre las fuentes en un sitio web puede utilizarlo. Puede utilizar la herramienta de escaneo para seleccionar fuentes y, a veces, descargarlas.
Primero abra la herramienta Inspector de artículos. A continuación, haga clic en la pestaña "Red" (puede estar oculta en el menú adicional) y seleccione "Línea".
Luego presione Ctrl+R. Se cargarán las fuentes que se muestran en la lista, probablemente en formato WOFF. Puedes descargarlos directamente haciendo doble clic en el nombre de la fuente. Por ejemplo, How-To Geek usa Roboto como fuente predeterminada.
Si necesita información más detallada sobre la fuente, vaya a la pestaña "Elementos" y seleccione "Estilos". Desplácese hacia abajo hasta la propiedad Familia de fuentes y haga clic en ella. El texto correspondiente se iluminará en la página web. De esta manera puedes definir la fuente con precisión.
6. Editar texto en la página (temporalmente)
¿Sabías que puedes editar temporalmente casi cualquier cosa en una página web usando el Inspector? Esta herramienta nos permite editar el código que compone el sitio web, por lo que si conoce el código, puede hacer que el sitio web se vea como cualquier cosa (solo en su dispositivo, hasta que actualice la página).
Incluso si no sabes nada sobre codificación, puedes editar texto básico en cualquier página web. Esta puede ser una pequeña broma divertida que puedes hacer con tus amigos.
Resalte el texto en la página que desea editar y haga clic derecho en él. Luego haga clic en "Inspeccionar" o "Inspeccionar artículo".
La parte de texto relevante debe aparecer en la pestaña Elementos. Simplemente haz doble clic en él y reemplaza el texto con lo que quieras.
¡Cierra el inspector de artículos y listo! Recuerde que actualizar la página deshará los cambios realizados.
7. Eliminar elementos
Al igual que editar texto, también puedes eliminar elementos específicos de una página web. Nuevamente, los cambios solo duran hasta que actualice la página.
Haga clic derecho en el elemento que desea eliminar y luego haga clic en "Inspeccionar" o "Inspeccionar elemento".
Pase el cursor sobre la "marca" ”hasta que se resalte todo el elemento. Luego presione la tecla eliminar.
Entonces desapareció.
8. Determinar los valores de color.
Otro consejo para los creadores: puedes arrastrar los valores RGB y HEX de cualquier color en una página web usando la herramienta cuentagotas que encontrarás en el inspector de elementos.
Haga clic derecho en cualquier lugar de la página y abra el Inspector. De forma predeterminada, la ventana Reglas se abre dentro de la pestaña Inspector. Desplácese hacia abajo para encontrar cualquier propiedad marcada por color.
La propiedad de color debe tener un círculo o cuadrado de color al lado. Haga clic en él para abrir el selector de color y toque el ícono del cuentagotas al lado.
Puede mover esta herramienta de cuentagotas a cualquier lugar de la página para buscar valores de color. Al hacer clic en la herramienta Cuentagotas, la propiedad se completará automáticamente con el valor de color que acaba de elegir. Desde aquí puedes copiarlo fácilmente.
Estos consejos representan sólo una fracción de lo que se puede hacer con Element Inspector. Si desea profundizar en el desarrollo web, aquí tiene una guía que lo ayudará a comenzar.