當然 微信開發(fā)者工具主要是讓你模擬頁面嵌套在微信里面的狀態(tài),或者說可以把它想象成一個容器, 你把頁面扔到這個容器里 看看協(xié)調(diào)不協(xié)調(diào),美觀不美觀. 比如這個容器自帶導(dǎo)航欄等等.
這些都不是我們接下來要關(guān)心的問題, 我們今天要說的是,為啥在其他瀏覽器就不能調(diào)試微信頁面呢? (畢竟一方面你后端接口調(diào)用的是微信的)
那么你會不會很好奇這是為什么呢? 微信開發(fā)者工具都做了什么事情呢?
首先提到一個關(guān)鍵字: user-agent
User Agent中文名為[用戶代理] ,簡稱 UA，它是一個特殊字符串頭，使得服務(wù)器能夠識別客戶使用的[操作系統(tǒng)]及版本、CPU 類型、[瀏覽器](及版本、瀏覽器渲染引擎、瀏覽器語言、[瀏覽器插件]等。
想了解瀏覽器的前世今生的話,可以去看下這個:瀏覽器野史:
https://mkblog.cn/889/
想當初3Q大戰(zhàn)那會. QQ空間在 360瀏覽器上無法使用一樣, 全都是通過 user-agent 搞的鬼.
我之前是做移動端的, 當發(fā)現(xiàn)這個玩意的時候,就像發(fā)現(xiàn)了新大陸一樣, 自嗨了半天, 最后突發(fā)奇想,試了下能不能在火狐上調(diào)試微信頁面.
然后百度了下,還真有這樣的帖子, 但是細節(jié)不夠詳細.
我就在微信開發(fā)者工具上 用開發(fā)者模式,抓取到了 user-agent.
看到后面跟了這么幾個參數(shù), 然后恍然大悟,
AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1 wechatdevtools/1.01.1712150 MicroMessenger/6.5.7 Language/zh_CN webview/15157367222261342 webdebugger port/9974
細節(jié)點: wechatdevtools webdebugger 等關(guān)鍵詞
這肯定是在網(wǎng)絡(luò)請求的時候,他們通過請求頭拿到user-agent 這些信息,做了相應(yīng)的判斷和攔截.
然后,替換到火狐瀏覽器的user-gent, 完美的解決了普通瀏覽器無法調(diào)試微信頁面的問題.
哦對了 火狐瀏覽器的user-gent原本是 FireFox 這個標識.火狐瀏覽器替換user-agent 的教程也附上:
火狐瀏覽器修改userAgent的辦法一：
在火狐瀏覽器地址欄輸入“about:config”，按下回車進入設(shè)置菜單。
找到“general.useragent.override”，如果沒有這一項，則點右鍵“新建”->“字符串”，輸入這個字符串。
將其值設(shè)為自己想要的UserAgent（下面附有常見UA）
火狐瀏覽器修改userAgent的辦法二：
user Agent Switcher插件。下載地址：https://addons.mozilla.org/zh-CN/firefox/addon/user-agent-switcher/
常見UA:
Mozilla/5.0 (X11; U; Linux i686; en-GB; rv:1.8.1.6) Gecko/20070914 Firefox/2.0.0.7
Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7
Mozilla/5.0 (Windows; U; Windows NT 6.0; en) AppleWebKit/522.15.5 (KHTML, like Gecko) Version/3.0.3 Safari/522.15.5
Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/103u (KHTML, like Gecko) safari/100
Opera/9.23 (X11; Linux x86_64; U; en)
Opera/9.23 (Windows NT 5.1; U; en)
Mozilla/4.0 (compatible; MSIE 6.1; Windows XP)
Mozilla/5.0 (Windows; U; MSIE 7.0; Windows NT 6.0)
Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10
查看user-agent信息的網(wǎng)頁(具體用法就是在對應(yīng)的瀏覽器下打開這個網(wǎng)址):
http://tool.mkblog.cn/ua/
感興趣的可以去了解下這個東西. 包括瀏覽器 模擬ipone , 模擬諾基亞n97 ,模擬黑莓手機,模擬windows phone, 模擬IE, 模擬 iPad顯示效果 等.
比如我平時就喜歡通過 user-agent 把火狐改成ipad模式. 廣告少很多,用起來很流暢,體驗超級棒哈
