Tuesday, August 21, 2012

How to change your browser's user agent in Google Chrome

When you use a web browser, it contains a user agent. This data contains info about the browser, such as its rendering engine, platform version, browser version, etc. Sites often use this to customize the site to your browsers' layout engine. An example is sites defaulting to its mobile view if it detects a mobile browser viewing the web page. My site is an example of this, if you use Android or iOS, the site should default to the mobile view automatically.

In Google Chrome, you can over ride the user agent when visiting a site via its development tools. To do so, load up a website, such as my mobile site, and then press F12 when the site is done loading. The developer tools should appear, and it could be either docked to the browser window like mine, or it could load as a browser popup to make the browser tools dock to the browser window, click the first icon at the bottom left of the browser window It should look like a square if the tools are not docked to the browser window.
Note that my developer tools might look different from your's in terms of color because I have a dark theme applied. My theme is "brushed" if you are interested. It is an official Google theme.
At the bottom right of the developer tools, you see a gear icon. You want to go ahead and click that. This is your developer tools settings. I might cover the settings in general in a different post, but you want to click the user agent tab at the top.
As you can see in the picture above, the user agent tab is shown. You can choose to manually over ride the user agent, and this allows you to fool websites. One downside of this is that don't matter what user agent you set the browser to, the pages are still rendered in the WebKit layout engine (that is Chrome's layout/rendering engine). You can choose from a slew of preset user agents, or you can choose other and make one yourself, perhaps for one that is not listed. A current list is down below.
Also shown in the user agent tab is options to change the web pages' resolution. For example, if I set the user agent to iPhone -- iOS 4, it can auto set the pages's size for you. This is shown below. The setting is the default for the user agent setting.
I hope you all enjoyed this tutorial. If you have questions or comments, post them in the comments section below. If you want to request a tutorial for me to go over, you can make requests in the comments as well.