使用調試器命令在仿真模式下啓動Chrome，但頁面顯示爲PC版本

在PC平臺中，我想將Chrome作爲iPhone 5設備模式啓動以測試我的項目。使用調試器命令在仿真模式下啓動Chrome，但頁面顯示爲PC版本

現在我使用調試器命令Page.setDeviceMetricsOverride當標籤更新。因此，我得到了正確的設備模式，但我的頁面顯示與PC版本相同，而不是移動版本。我希望我的網頁顯示與iPhone 5相同。

任何人都可以幫助我嗎？

示例代碼：

var phonesArray = [ 
 
    {title: "Apple iPhone 4", width: 320, height: 480, deviceScaleFactor: 2, userAgent: "Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_2_1 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/6533.18.5", touch: true, mobile: true}, 
 
    {title: "Apple iPhone 5", width: 320, height: 568, deviceScaleFactor: 2, userAgent: "Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X; en-us) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53", touch: true, mobile: true}, 
 
\t ]; 
 

 
var phones = {}; 
 
phonesArray.forEach(function(phone){ 
 
    phones[phone.title.replace(/\s+/gi,'')] = phone; 
 
}); 
 

 
chrome.tabs.onCreated.addListener(function(tab) { 
 
\t console.log("chrome.tabs.onCreated..."); 
 
\t if(tab.url.indexOf("chrome://") != 0 
 
\t && tab.url.indexOf("chrome-devtools://") != 0) 
 
\t { 
 
\t \t chrome.debugger.attach({"tabId": tab.id}, "1.0"); 
 
\t \t chrome.debugger.sendCommand({"tabId": tab.id}, "Runtime.enable",{}, function(msg){}); 
 
\t \t chrome.debugger.sendCommand({"tabId": tab.id}, "Page.enable",{}, function(msg){}); 
 
\t \t console.log("setDeviceMetricsOverride..."); 
 
\t \t chrome.debugger.sendCommand({"tabId": tab.id}, "Page.setDeviceMetricsOverride", { 
 
\t \t \t width:    phones.AppleiPhone5.width, 
 
\t \t \t height:    phones.AppleiPhone5.height, 
 
\t \t \t deviceScaleFactor: phones.AppleiPhone5.deviceScaleFactor, 
 
\t \t \t mobile:    phones.AppleiPhone5.mobile, 
 
\t \t \t emulateViewport: true, 
 
\t \t \t fitWindow:   false 
 
\t \t \t },function(msg){}); 
 
\t \t chrome.debugger.sendCommand({"tabId": tab.id}, "Network.setUserAgentOverride", 
 
\t \t {userAgent:phones.AppleiPhone5.userAgent},function(msg){ 
 
\t \t }); 
 
\t } 
 
}); 
 

 
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) { 
 
\t console.log("chrome.tabs.onUpdated..."); 
 
\t console.log(changeInfo); 
 
\t if(changeInfo.status == "loading" && tab.url.indexOf("chrome://") != 0 
 
\t && tab.url.indexOf("chrome-devtools://") != 0) { 
 
\t \t console.log("attach debugger on about:blank. tab.id = " + tab.id); 
 
\t \t chrome.debugger.attach({"tabId": tab.id}, "1.0"); 
 
\t \t chrome.debugger.sendCommand({"tabId": tab.id}, "Runtime.enable",{}, function(msg){}); 
 
\t \t chrome.debugger.sendCommand({"tabId": tab.id}, "Page.enable",{}, function(msg){}); 
 
\t \t console.log("setDeviceMetricsOverride..."); 
 
    \t \t chrome.debugger.sendCommand({"tabId": tab.id}, "Page.setDeviceMetricsOverride", { 
 
    \t \t \t width:    phones.AppleiPhone5.width, 
 
\t \t  height:    phones.AppleiPhone5.height, 
 
\t \t  deviceScaleFactor: phones.AppleiPhone5.deviceScaleFactor, 
 
\t \t  mobile:    phones.AppleiPhone5.mobile, 
 
\t \t  emulateViewport: true, 
 
\t \t  fitWindow:   false 
 
    \t \t },function(msg){}); 
 
    \t \t chrome.debugger.sendCommand({"tabId": tab.id}, "Network.setUserAgentOverride", 
 
    \t \t {userAgent:phones.AppleiPhone5.userAgent},function(msg){ 
 
    \t \t }); \t 
 
\t } 
 
});

來源

2015-09-11 BurningFish

您需要Network.setUserAgentOverride之前發送命令Network.enable，像這樣：

chrome.debugger.attach({tabId: tab.id}, "1.0", function(){ 

    if (!chrome.runtime.lastError) { 

     chrome.debugger.sendCommand({tabId: tab.id}, "Network.enable", {}, function(result) { 

      chrome.debugger.sendCommand({tabId: tab.id}, "Network.setUserAgentOverride", { userAgent : phones.AppleiPhone5.userAgent }, function(result){ 

      }); 
     }); 
    } 
});

雖然它似乎在上班的路上你」已經寫了它，你應該等待附加調試器和發送命令後的回調。另外，一旦連接了調試器，無論何時更新選項卡，都不需要重新附加它。

來源

2015-09-11 10:29:54 cviejo

使用調試器命令在仿真模式下啓動Chrome，但頁面顯示爲PC版本

回答

相關問題