當(dāng)然 微信開發(fā)者工具主要是讓你模擬頁(yè)面嵌套在微信里面的狀態(tài),或者說(shuō)可以把它想象成一個(gè)容器, 你把頁(yè)面扔到這個(gè)容器里 看看協(xié)調(diào)不協(xié)調(diào),美觀不美觀. 比如這個(gè)容器自帶導(dǎo)航欄等等.
這些都不是我們接下來(lái)要關(guān)心的問題, 我們今天要說(shuō)的是,為啥在其他瀏覽器就不能調(diào)試微信頁(yè)面呢? (畢竟一方面你后端接口調(diào)用的是微信的)
那么你會(huì)不會(huì)很好奇這是為什么呢? 微信開發(fā)者工具都做了什么事情呢?
首先提到一個(gè)關(guān)鍵字: user-agent
User Agent中文名為[用戶代理] ,簡(jiǎn)稱 UA印叁，它是一個(gè)特殊字符串頭赦肃，使得服務(wù)器能夠識(shí)別客戶使用的[操作系統(tǒng)]及版本勿负、CPU 類型、[瀏覽器](及版本举瑰、瀏覽器渲染引擎捣辆、瀏覽器語(yǔ)言、[瀏覽器插件]等嘶居。
想了解瀏覽器的前世今生的話,可以去看下這個(gè):瀏覽器野史:
https://mkblog.cn/889/
想當(dāng)初3Q大戰(zhàn)那會(huì). QQ空間在 360瀏覽器上無(wú)法使用一樣, 全都是通過(guò) user-agent 搞的鬼.
我之前是做移動(dòng)端的, 當(dāng)發(fā)現(xiàn)這個(gè)玩意的時(shí)候,就像發(fā)現(xiàn)了新大陸一樣, 自嗨了半天, 最后突發(fā)奇想,試了下能不能在火狐上調(diào)試微信頁(yè)面.
然后百度了下,還真有這樣的帖子, 但是細(xì)節(jié)不夠詳細(xì).
我就在微信開發(fā)者工具上 用開發(fā)者模式,抓取到了 user-agent.
看到后面跟了這么幾個(gè)參數(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
細(xì)節(jié)點(diǎn): wechatdevtools webdebugger 等關(guān)鍵詞
這肯定是在網(wǎng)絡(luò)請(qǐng)求的時(shí)候,他們通過(guò)請(qǐng)求頭拿到user-agent 這些信息,做了相應(yīng)的判斷和攔截.
然后,替換到火狐瀏覽器的user-gent, 完美的解決了普通瀏覽器無(wú)法調(diào)試微信頁(yè)面的問題.
哦對(duì)了 火狐瀏覽器的user-gent原本是 FireFox 這個(gè)標(biāo)識(shí).火狐瀏覽器替換user-agent 的教程也附上:
火狐瀏覽器修改userAgent的辦法一：
在火狐瀏覽器地址欄輸入“about:config”罪帖，按下回車進(jìn)入設(shè)置菜單。
找到“general.useragent.override”邮屁，如果沒有這一項(xiàng)整袁，則點(diǎn)右鍵“新建”->“字符串”，輸入這個(gè)字符串佑吝。
將其值設(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è)(具體用法就是在對(duì)應(yīng)的瀏覽器下打開這個(gè)網(wǎng)址):
http://tool.mkblog.cn/ua/
感興趣的可以去了解下這個(gè)東西. 包括瀏覽器 模擬ipone , 模擬諾基亞n97 ,模擬黑莓手機(jī),模擬windows phone, 模擬IE, 模擬 iPad顯示效果 等.
比如我平時(shí)就喜歡通過(guò) user-agent 把火狐改成ipad模式. 廣告少很多,用起來(lái)很流暢,體驗(yàn)超級(jí)棒哈
