Ver Web en Distintos Navegadores; Cambiar User Agent en Chrome

Hoy os explicare un tip que he aprendido para chrome y que desde mi punto de vista es muy útil, sin necesidad de añadirle ninguna extensión o plugin.

Se trata de comprobar cómo se visualiza tu página web en distintos navegadores y dispositivos, como por ejemplo en un Iphone con iOS 5, cambiando el valor del user-agent en la petición de la solicitud.

Con mi experiencia había encontrado algunos plugins que no acababan de afinar mucho y a veces daban problemas.

El funcionamiento es muy básico y fácil, os cuento:

  • Pulsa F12 o Ctrl+Shift+i o dirigete a Menu > Herramientas > Herramientas de desarrolladores

    paso 1 para cambiar el User Agent en Chrome

    Como podéis ver se os abre una herramienta que muestra el código fuente de la pagina, css, también un WaterFall… Una herramienta muy útil para desarrollar pequeños trozos de tu web.

    Además puedes editar el código y verás el resultado al momento; un ejemplo practico es cuando queremos saber si el color de la fuente quedará bien o el fondo de la pagina quedará a tono con los elementos, para ello localizamos el código css en esta herramienta y simplemente lo editamos.

    A lo que iba…

  • Una vez abierta esta herramienta fijaros y hacer click en el engranaje en la parte inferior derecha de la pantalla

    Paso 2 para cambiar el user agent en Chrome

  • Aparecerá el siguiente menú:

    Paso 3 para Cambiar el User Agent en Chrome

  • Seguidamente ir al segundo menú llamado Overrides.Y… Voila!

    Paso 4 para cambiar el user Agent en Chrome

Un maravilloso menú donde podremos seleccionar el User Agent que queremos que se envíe en la petición Html o si prefieres puedes insertarle el User Agent que quieras.

Esta herramienta también está bien porque te reduce la pantalla del Chrome y simula como se vería claramente en un dispositivo diferente o en un explorador diferente. Además podrás cambiar la resolución manualmente.

Muy útil para desarrolladores que están implementando el Responsive Design en sus páginas.

Finalmente os dejo un pantallazo de cómo se ve TicyMicroEmpresas en un sistema Android 4.0.2 con Galaxy Nexus.

Tic y Micro Empresas Cambiando user agent en Chrome

Deja un comentario

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

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>