0

在 PC 平台上，我想以 iPhone 5 设备模式启动 Chrome 来测试我的项目。

现在我在选项卡更新时使用调试器命令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},
	];

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

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

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

4

1 回答 1

0

您需要在Network.enable之前发送命令Network.setUserAgentOverride，如下所示：

 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-11T10:29:54.800 回答