Chrome DevTools; ¡Inspecciona los trucos de los elementos!

Puede que hayas oído hablar de Chrome DevTools, que es una potente característica con muchas funcionalidades ocultas. En realidad es una herramienta muy importante para un desarrollador web, que utiliza esta característica incorporada para la creación y depuración web. Las herramientas para desarrolladores de Chrome proporcionan a los desarrolladores acceso a la arquitectura interna del navegador y las aplicaciones web.

Sin embargo, hay ciertas situaciones en las que incluso un usuario habitual de Internet puede beneficiarse de la característica Elemento de inspección de cromo . Aquí encontrarás algunos trucos y consejos interesantes y útiles de Inspect elements, que pueden hacer que tu sesión de navegación sea mucho más productiva.

  • 3 Envolviendo
  • ¿Cómo usar el elemento de inspección en el cromo?

    Hay muchas maneras de abrir el elemento de inspección de cromo . Puedes abrir el elemento de inspección de Chrome haciendo clic en los tres puntos verticales ( )> Más Herramientas> Desarrollador Herramientas . Aquí también encontrarás el atajo de teclado para el mismo, que es Ctrl + Shift + I .

    También puedes hacer clic con el botón derecho del ratón en cualquier elemento de una página que quieras editar y elegir Inspeccionar .

    La forma más rápida de abrir el elemento de inspección en el cromo es usando la tecla F12 .

    Por defecto, el muelle se abre clavado en el lado derecho de la ventana. Sin embargo, puedes cambiar la posición haciendo clic en el botón de tres puntos verticales en la parte superior derecha de la consola de herramientas de desarrollo.

    Trucos y consejos para inspeccionar elementos de cromo

    Las herramientas de desarrollo de Chrome pueden ser muy útiles para muchas cosas durante la sesión de navegación. También puedes usarlo para divertirte en Internet, cambiando algunos sitios web temporalmente y descargando también contenidos específicos. A continuación, te presentamos algunos de los geniales trucos de elementos de inspección que puedes usar diariamente para una variedad de propósitos.

    Editar una página web temporalmente

    Comencemos por echar un vistazo a uno de los trucos más geniales del elemento de inspección de cromo . Temporalmente, puedes editar cualquier página web que esté abierta en tu ventana, directamente desde tu navegador. Mientras que los desarrolladores, para probar diferentes elementos en sus sitios web suelen utilizar esta función, puedes usarla para probar cómo el cambio de diferentes elementos puede cambiar el aspecto de un sitio web.

    Puede editar textos, imágenes, fuentes y otros contenidos de forma temporal en cualquier sitio web disponible en Internet, incluso si no tiene la propiedad del dominio.

    Para editar textos en cualquier sitio web (por ejemplo, Wikipedia), siga estos pasos:

    1. Abre la página web que te guste y que quieras editar.
    2. Haga clic con el botón derecho del ratón en cualquier parte del sitio web y seleccione Inspeccionar elemento . Alternativamente, también puedes usar F12 para mostrar las DevTools.
    3. Ve a la pestaña Consola . Ésta suele ser la segunda pestaña de la parte superior.
    4. Escriba o pegue el siguiente comando de línea y presione Enter:

      body.contentEditable = true

    Esto hace que la página web sea editable como un documento de MS Word. Puedes hacer cualquier cambio en la página web, simplemente haz clic en cualquier contenido y empieza a editar la página.

    Para editar imágenes en cualquier sitio web, siga estos pasos:

    1. En la página web que desea editar, abra Inspeccione los elementos .
    2. Bajo la pestaña Elements , busque en el código HTML para localizar la fuente de la imagen. Suele estar bajo el elemento bajo la etiqueta del cuerpo.

      Consejo : Utiliza el botón Seleccionar Elemento y simplemente haz clic en la imagen para resaltar el código de la misma.

    3. En la pestaña Estilos , arrastra y selecciona la URL de la imagen.
    4. Sustituye esta URL por el enlace a la imagen con la que quieres sustituirla en la página.
    5. Si quieres, puedes afinar la colocación de la imagen editando los elementos CSS como tamaño y relleno junto a la URL.

    Esto reemplazará la imagen en el sitio web con la que desea ver en la página. Esta puede ser una forma muy divertida de probar cosas nuevas en las páginas web.

    Para cambiar el estilo de fuente de cualquier página web, encontrarás las opciones de alineación de texto, color de fondo, color y color de borde en la pestaña Estilos.

    Cambiar el diseño para emular otros dispositivos

    Si desea ver cómo se verían algunos sitios web en otros dispositivos, no tiene que tener el dispositivo en la mano. La misma función se puede realizar mediante la función de emulación de las Herramientas para desarrolladores de Google Chrome. Puedes cambiar el diseño de la página web a como se vería en el dispositivo que elijas.

    1. Visite la página en la que desea cambiar el diseño.
    2. Abra la pestaña Elemento de inspección de cromo s utilizando el teclado corto Ctrl + Shift + I.
    3. Haga clic en el botón de la barra de herramientas Toggle . Este debería ser el segundo botón en la parte superior.
    4. Cambie su dispositivo desde el menú desplegable.
    5. También puedes cambiar el tamaño de la pantalla según tu elección usando la barra justo debajo de la barra de herramientas de tamaño.

    Esto puede ser muy útil para los sitios que tienen características adicionales en los sitios web móviles, como la mensajería en Instagram, etc.

    Descarga de contenidos específicos de sitios web

    ¿Alguna vez te ha pasado que te gusta una imagen o un video en un sitio? Puedes descargar la imagen o el vídeo que quieras de cualquier sitio web, siguiendo estos pasos:

    1. Visite el sitio del que desea descargar el contenido en su navegador.
    2. Abra la barra de Inspeccionar elemento, usando el atajo de teclado Ctrl + Shift + I , o desde el menú contextual del botón derecho.
    3. Ve a la pestaña Red .
    4. Debajo de la barra, haz clic en Media .
    5. Aquí, encontrarás la lista de todos los elementos multimedia de tu dispositivo. Si no ha encontrado su elemento multimedia, simplemente actualice la página, y todos los elementos multimedia serán recargados.
    6. Haga clic con el botón derecho del ratón en el enlace del archivo y seleccione Abrir en nueva pestaña en el menú contextual.

    Esto abrirá los medios de comunicación en una nueva pestaña, desde donde podrá descargar el archivo que desee obtener.

    Buscar en la página para un contenido específico

    Una de las características más útiles de las herramientas de desarrollo es la función de búsqueda. La pestaña de búsqueda permite buscar un contenido específico o un elemento HTML del que se desea encontrar la fuente en un sitio web.

    Para usar la función de búsqueda, siga estos pasos:

    1. Visita la página web de la que quieres extraer recursos en tu navegador.
    2. Presione Ctrl + Shift + I para revelar el elemento de inspección de cromo .
    3. Haga clic en los tres puntos verticales para revelar el menú contextual.
    4. Haga clic en Buscar . Aquí también encontrarás el atajo de teclado para el mismo ( Ctrl + Shift + F ).

    En la barra de búsqueda, puedes buscar cualquier cosa específica desde el sitio web. Por ejemplo, puedes extraer todos los textos que estén dentro de la misma fuente buscando por font-family . También puedes encontrar el archivo de vídeo o audio que se reproduce en el fondo de un sitio web, buscando por vídeo o audio.

    Eliminar Popups

    Cuando quieres leer algún texto en línea, los anuncios emergentes pueden ser muy molestos por la constante distracción que producen. O bien, los sitios web que no leen los usuarios de la red sin registrarse en su sitio web (por ejemplo, Quora) también pueden resultar irritantes, ya que registrarse en un servicio de una sola vez no es tan útil.

    Puedes usar el elemento de inspección en Chrome para eliminar estos pop-ups también. Para ello, simplemente haz clic con el botón derecho del ratón en el contenido y selecciona Inspeccionar elemento. Luego, bajo la pestaña de elementos, localiza el código de la ventana emergente pasando el cursor sobre el sitio web. A continuación, simplemente borra esa línea del código de las herramientas de desarrollo.

    A veces, puede que vea otra capa transparente en el sitio web después de borrar los pop-ups que hacen que los enlaces no respondan. Borra también la línea de código de esta parte.

    Cambiar la ubicación GPS del navegador

    Hay dos maneras en que un sitio web puede rastrear su ubicación, una es la dirección IP y la segunda es la ubicación de su navegador. La ubicación de su navegador es la que se pide en el “el sitio quiere saber su ubicación”.

    Aunque su dirección IP puede ser cambiada usando una VPN apropiada (vea nuestra lista de las mejores aplicaciones VPN gratuitas), la ubicación de su navegador no puede ser ocultada una vez que haya hecho clic en “Permitir” en esa pantalla. Con Chrome inspect element , puedes cambiar la geolocalización del navegador.

    1. Abra el sitio web en el que desea ver el contenido.
    2. A continuación, utilice el atajo de teclado o el menú contextual del botón derecho para hacer aparecer el elemento de inspección de Chrome .
    3. Haz clic en el botón de tres puntos en la parte superior derecha de las herramientas de desarrollo para revelar el menú de contexto.
    4. Haga clic en Más> Sensores .
    5. Se abrirá una nueva ventana Sensores en la mitad inferior del panel de herramientas para desarrolladores.
    6. Bajo Geolocalización , cambia la ubicación de tu deseo basado en la latitud y la longitud.

    1. Recargue la página y permita los datos de localización en la ventana emergente.

    Esto elimina los bloqueos de ubicación impuestos por muchos sitios web, permitiéndole transmitir contenido de otros países.

    Revelar contraseñas guardadas

    La función de auto-guardado ha eliminado la necesidad de memorizar las contraseñas. Sin embargo, cuando necesite iniciar sesión en otro dispositivo, puede olvidar la contraseña porque se “guarda” en el navegador. Lo que es peor, es que cuando intentas acceder a la contraseña en el navegador, por razones de seguridad algunos sitios web no tienen el botón de “revelar la contraseña”.

    En lugar de pasar por el largo y doloroso proceso de restablecimiento de la contraseña, utiliza el elemento Inspeccionar en Chrome para revelar la contraseña oculta en los asteriscos de tu navegador.

    1. En tu navegador, haz clic con el botón derecho del ratón en el campo de la contraseña .
    2. Seleccione el elemento Inspeccionar del menú contextual. El código resaltado debe corresponder al campo de la contraseña.
    3. Inspecciona la línea de código, y reemplaza la contraseña type=” ” con type=” texto

    Esto debería revelar la contraseña oculta en los asteriscos de la página web.

    Escoge los colores

    La Internet está llena de hermosas imágenes, cada una con un conjunto único de colores. A veces, puedes encontrar un tono particular de algún color, que quieres usar en tu próximo proyecto. Si desea saber el código hexadecimal de ese tono en particular, puede hacerlo desde el elemento de inspección de cromo .

    1. Abre las herramientas de desarrollo de Chrome usando el atajo de teclado o el menú contextual del botón derecho del ratón.
    2. En la pestaña de la izquierda, haz clic en la pestaña Estilo .
    3. Haz clic en la pequeña caja de color junto al elemento de color CSS. Esto hará que aparezca la herramienta Selector de colores .
    4. Haz clic en cualquier lugar de la página web. El selector de colores te dará el código hexadecimal del mismo.

    Puedes usar este color en varios lugares como Adobe Photoshop para tus aventuras creativas.

    Límite de velocidad de descarga

    Si tiene una velocidad de red limitada, es posible que tenga que limitar la velocidad de descarga de su navegador. Esto puede hacerse no sólo para descargar aplicaciones y paquetes, sino también para transmitir contenido.

    Para configurar una velocidad personalizada para la pestaña, siga estos pasos:

    1. Abra las opciones de desarrollo de esa pestaña pulsando F12.
    2. Pulse F1 para abrir el Desarrollador Ajustes .
    3. En la pestaña Throttling , haz clic en el botón Add custom profile… .
    4. Establece un nombre para el perfil a tu gusto, y fija las velocidades de carga y descarga.
    5. Haz clic en Añadir una vez que hayas terminado.

    1. Para activar este perfil, ve a la pestaña Red dentro de las herramientas de desarrollo.
    2. Haga clic en el menú desplegable junto a Offline .
    3. Selecciona el perfil personalizado del menú desplegable.

    Nota : Este perfil sólo funcionaría en la pestaña actualmente abierta y habría que mantener activa la ventana de opciones de desarrollo, de lo contrario el estrangulamiento no funcionará.

    Usando esta herramienta, puede comprobar el rendimiento de su sitio web en múltiples velocidades de red. Puede probar su sitio web en velocidades que van desde GPRS hasta Wi-Fi, y varias velocidades de conexión 2G, 3G y 4G. Esta es una excelente manera de probar la velocidad de su sitio web a través de diferentes redes de operadores y obtener información sobre lo que puede optimizar para un mejor rendimiento.

    Haga una captura de pantalla

    También puede hacer una captura de pantalla del sitio web que está viendo sin la ayuda de ninguna aplicación de terceros. Esto es muy útil, especialmente cuando la herramienta de recorte se está descontinuando, y el Snip & Sketch no es muy bien recibido.

    Para hacer una captura de pantalla del sitio web, vaya a la pestaña de la consola y pulse Ctrl + Shift + M para que aparezca el selector de dispositivos. Haz clic en el menú de tres puntos verticales de la parte superior derecha de la página web y selecciona Capturar captura de pantalla o Capturar captura de pantalla a tamaño completo .

    Tus descargas se guardarán en la carpeta Descargas .

    Envolviendo

    Si bien el Elemento de inspección de cromo es una herramienta muy útil para los desarrolladores y propietarios de sitios web, incluso los usuarios ocasionales de Internet pueden beneficiarse de los mencionados Trucos del elemento de inspección . ¿Te ha resultado útil? Comenta a continuación tu herramienta favorita de Opciones para desarrolladores y menciona qué características te gustaría probar de la lista anterior.

    Leer también:  ¿Cómo puedo restaurar mis miniaturas en Google Chrome?

    Deja un comentario

    Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

    Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies ACEPTAR

    Aviso de cookies