In PC platform, I want to launch Chrome as iPhone 5 device mode to test my project.
Now I use debugger command Page.setDeviceMetricsOverride when tab updates. As a result, I'm getting the right device mode, but my pages show as same as PC version, not mobile version. And I hope my page show as same as in iPhone 5.
Can any one help me?
Sample Code:
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){
});
}
});You need to send the command Network.enable before Network.setUserAgentOverride, like this:
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){
});
});
}
});
Although it does seem to work the way you've written it, you should wait for the callbacks after attaching the debugger and sending commands. Also, once the debugger is attached, you don't need to attach it again whenever the tab is updated.