PC上對限制在微信客戶端訪問的html頁面進行調試

PC上對微信的html5頁面做測試，一般來說需要兩個條件：瀏覽器UA改為微信客戶端的UA（打開頁面提示請在微信客戶端登錄就需要修改UA）；增加滿足html5驗證條件的Cookie來進行微信OAUTH驗證

 

說明：

單純的調試可以安裝微信web開發者工具，使用微信進行登錄來進行調試。這個工具有類似chrome的調試工具，但是這個不能裝插件的。所以如果想用yslow等插件進行頁面性能測試。還是要在chrome、Firefox等瀏覽器里實現模擬微信的html5頁面

 

一、將瀏覽器的UA（user-Agent）改為微信客戶端的UA

使用UA要解決的問題：使用PC訪問要在微信中打開的頁面，開發做了限制只能在微信客戶端打開

解決方法：為瀏覽器增加客戶端微信的UA

每個瀏覽器、手機系統都有自己的user Agent，通過user Agent可以判斷瀏覽器版本、所用的操作系統等參數。 （如果不知道UA可以通過抓包獲得請求頭中的UA）

一個ios端微信的UA： Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Mobile/12A365   MicroMessenger/5.4.1 NetType/WIFI

一個Android端微信的UA：Mozilla/5.0 (Linux; U; Android 4.1.2; zh-cn; Chitanda/Akari) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30 MicroMessenger/6.0.0.58_r884092.501 NetType/WIFI

 

各個瀏覽器都有修改UA的方法，例如下面的火狐瀏覽器：

通過火狐瀏覽器本身的設置來修改。
火狐瀏覽器修改userAgent的辦法一：
在火狐瀏覽器地址欄輸入“about:config”，按下回車進入設置菜單。
找到“general.useragent.override”，如果沒有這一項，則點右鍵“新建”->“字符串”，輸入這個字符串。
將其值設為自己想要的UserAgent。
火狐瀏覽器修改userAgent的辦法二：

user Agent Switcher插件。下載地址：User Agent Switcher 0.7.3修改firefox的user agent擴展

（其他瀏覽器修改UA的方法隨便百度一下就行了，因為我要用Firefox的yslow插件，所以我只修改了Firefox的UA）

 

chrome可以直接啟用手機調試的模式。然后通過選擇Device，UA會自動變成對應的UA。也可以在UA后面的輸入框中進行修改

 

二、如果頁面有微信的OAUTH驗證，需要增加Cookie來實現驗證

頁面做了微信OAUTH驗證的訪問方法：

如果只是限制了必須在手機端訪問，上面增加UA的操作方式實際已經可以解決PC打開連接的問題了。但是有的開發對訪問頁面增加了微信的OAUTH驗證，如果只是添加了微信客戶端UA，訪問該頁面會是一個空白頁面，此時需要增加可以通過微信OAUTH驗證的Cookie

 

只添加了UA的現象如下：

 

獲取Cookie的方法：

1.通過fiddler等抓手機包，在手機微信客戶端上訪問該頁面時，通過抓包工具獲得對應Cookie加到瀏覽器中

 

2.通過微信開發者工具訪問該頁面，抓取對應Cookie添加到瀏覽器中

使用微信開發者工具，在url輸入框中輸入連接后訪問，需要先進行微信登錄

登錄后就可以進行調試了

找到對應Cookie加入到瀏覽器中就可以了

 

各個瀏覽器添加Cookie的方法：

Firefox：安裝Web Developer插件，點擊Cookies->Add Cookie來增加修改Cookie。

（添加的時候一定要注冊Host和Path，這些在Cookie里都有。然后通過Cookies->View Cookie Information來查看當前域名下的所有Cookie信息）

 

添加Cookie成功后，再訪問需要微信OAUTH驗證的頁面，可以看到可以正常訪問了：

其他瀏覽器添加Cookie的方法可以參照這個博客：http://www.ebnd.cn/2011/02/22/edit-browser-cookies/