Chrome DevTools: Modify User-Agent and customize personalized UA

[[442534]]

This article is reprinted from the WeChat public account "TiantianUp", the author is TianTianUp. Please contact TiantianUp public account to reprint this article.

Hello, I am TianTianUp.

Let me ask you a question first. When developing locally, if you want to quickly modify the UA, how do you usually do it?

The UA (User-Agent) here refers to the user agent. MDN explains User-Agent as follows:

The User-Agent header contains a characteristic string that allows the other end of the network protocol to identify the application type, operating system, software developer, and version number of the user agent software that initiates the request.

The common understanding is that users cannot directly get information from the Internet. At this time, a carrier is needed to represent the user's behavior. This software (carrier) is called User-Agent. The browser is one of them.

Users use different software to trigger http requests under specific operations. Each request will carry UA, and the website server will send different products through UA content to provide differentiated services.

There are some things you can learn about UA, such as how to accurately identify UA, what is the standard syntax of UA, the history of UA, etc.

Here is a question: Is the judgment of UA through regular expressions necessarily accurate? The answer is of course wrong, as the following example illustrates:

Safari browsers above iPad OS 13 will simulate Mac by default. At this time, the UA is consistent with Mac. In this case, it is completely unpredictable for the backend. So what can the frontend do?

I have encountered it before, and it just settled down, for example:

It is determined by navigator.maxTouchPoints, which returns the maximum number of simultaneous touch points that the current device can support.

Back to the topic of the article, how to implement your own UA through DevTools, or what should you do when you need a local agent-specific UA?

DevTools provides a specific panel, let's use it in practice.

Customize your UA

First, I recommend a website to view UA, such as:

http://www.whatuseragent.com/

After opening it, you will easily see your UA:

Open the Command Palette

Use the key combination (Cmd + Shift + P) to open the command palette:

Finding Network Conditions

Search for Network conditions and click on it, and the network status panel will appear:

Cancel the proxy part

We need to uncheck Use browser default and then enter your custom user agent or select from the list of predefined user agents, for example I customized the user agent:

Summarize

This article introduces how to modify UA, as well as UA-related content at work, and some pitfalls encountered, such as how to judge the Safari browser on Mac and iPad OS 13 and above. There is still a lot of content about UA, but the space here is limited, so I will not discuss it in detail. If you are interested, you can learn more about it.