[Chrome] 模擬微信內建瀏覽器－工程的日子每天都很師

(圖片來源)

如果你開發的網站用特定的手機 APP 內建的瀏覽器或出錯的話，不仿用 Chrome 的模擬功能來查看錯誤訊息並解決問題，這邊會以微信為例，若是其他的 APP 內建瀏覽器，只要找到相對應的 UA 一樣能迎刃而解，在模擬前要先瞭解安卓微信和IOS微信的 User Agent：

安卓微信UA

mozilla/5.0 (linux; u; android 4.1.2; zh-cn; mi-one plus build/jzo54k) applewebkit/534.30 (khtml, like gecko) version/4.0 mobile safari/534.30 micromessenger/5.0.1.352

Ios微信UA

mozilla/5.0 (iphone; cpu iphone os 5_1_1 like mac os x) applewebkit/534.46 (khtml, like gecko) mobile/9b206 micromessenger/5.0

設定模擬步驟：

Step1. 打開Chrome，F12打開開發人員工具，點擊菜單按鈕 > More Tools > Network condition 打開 Network condition 窗口

Step2. 取消 Select automatically 勾選，選擇 Custom，並將微信 UA 填入紅色方框中，輸入完畢後重新整理頁面就可以模擬了！

如何確認是否模擬成功？

在 Chrome 開發者工具 console 中輸入下方代碼，就可以判斷當前是否模擬微信瀏覽器：

//判断是否微信浏览器
function isWeixinBrowser() {
    var ua = navigator.userAgent.toLowerCase();
    var result = (/micromessenger/.test(ua)) ? true : false;
    if (result) {
        console.log('你正在访问微信浏览器');
    }
    else {
        console.log('你访问的不是微信浏览器');
    }
    return result;
}
isWeixinBrowser();