[[442534]]

本文轉載自微信公眾號「天天Up」，作者TianTianUp。轉載本文請聯(lián)系天天Up公眾號。

你好，我是TianTianUp。

先拋出問題，本地開發(fā)時，想要快速達到修改UA的時候，你一般是怎么做的?

這里的UA(User-Agent)，指得是用戶代理，對于User-Agent的解釋，MDN給出的解釋如下：

User-Agent 首部包含了一個特征字符串，用來讓網(wǎng)絡協(xié)議的對端來識別發(fā)起請求的用戶代理軟件的應用類型、操作系統(tǒng)、軟件開發(fā)商以及版本號。

通俗的理解是用戶不能直接去網(wǎng)絡上拿信息，這個時候需要一個載體去代表用戶的行為，這個軟件(載體)叫做User-Agent。瀏覽器就屬于其中一種。

用戶通過不同的軟件，在特定的操作下，會觸發(fā)http請求， 每個請求下會攜帶UA，而網(wǎng)站的服務者會通過UA內容，來下發(fā)不同的產物，從而提供差異化的服務。

UA存在一些內容可以了解掌握的，比如如何準確的判斷UA，UA標準語法是什么，UA的歷史等等。

拋個問題，UA的判斷，通過正則表達式么，一定很準確么，答案當然是錯誤的，以下例子就可以說明：

iPad OS 13以上的 Safari 瀏覽器會默認模擬Mac，這個時候 UA 與 Mac 完成一致，這種情況下，對于后端來說完全不可判斷，那么前端有啥辦法呢?

之前遇到過，正好沉淀了下來，比如：

通過navigator.maxTouchPoints 來判斷，即返回當前設備能夠支持的最大同時觸摸的點數(shù)。

回到文章的主題，如何通過DevTools來實現(xiàn)屬于自己的UA，或者當你需要本地代理特定的UA時，應該怎么做呢?

DevTools提供了特定的面板，讓我們來實操一下。

定制個性化的UA

首先，推薦一個查看UA的網(wǎng)站，如：

http://www.whatuseragent.com/

打開后，你會很方便的看到自己的UA：

打開命令面板

使用組合鍵(Cmd + Shift + P)打開命令面板：

查找網(wǎng)絡狀態(tài)(Network Conditions)

搜索Network conditions，點擊后會出現(xiàn)網(wǎng)絡狀態(tài)面板：

取消代理部分

我們需要取消勾選Use browser default，然后輸入您的自定義用戶代理或從預定義的用戶代理列表中選擇，比如我自定義用戶代理：

總結

本文介紹了如何修改UA，以及工作中跟UA相關的內容，遇到的一些坑點，比如Mac 與 iPad OS 13以上的 Safari 瀏覽器如何判斷，UA的內容還是挺多的，這里篇幅有限，不展開討論了，感興趣可以深入了解一下。