使用调试器命令以仿真模式启动 Chrome,但页面显示为 PC 版本
Start Chrome in an emulation mode with debugger command but pages show as PC version
在 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){
});
}
});
你需要在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){
});
});
}
});
虽然它看起来确实按照您编写的方式工作,但您应该在附加调试器并发送命令后等待回调。此外,附加调试器后,您无需在更新选项卡时再次附加它。
在 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){
});
}
});
你需要在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){
});
});
}
});
虽然它看起来确实按照您编写的方式工作,但您应该在附加调试器并发送命令后等待回调。此外,附加调试器后,您无需在更新选项卡时再次附加它。