NW.js中chrome.debugger与showDevTools(true)冲突致触摸模式失效的解决方法

我之前在做NW.js桌面应用时也碰到过一模一样的问题！当用chrome.debugger启用触摸模拟后，打开DevTools就会导致触摸模式失效，这是因为NW.js的webview在打开DevTools时会重置调试器的上下文配置，包括你之前设置的触摸模拟参数。下面是几个亲测有效的解决方案：

方案1：打开DevTools后重新触发触摸模拟 #

最直接的办法就是在调用showDevTools之后，重新执行触摸模拟的命令。建议把触摸模拟逻辑封装成复用函数，方便多次调用：

const webview = document.getElementById('myWebview');
const debuggee = { targetId: webview.getWebContentsId() };

// 封装触摸模拟函数
function enableTouchEmulation(target) {
  chrome.debugger.attach(target, '1.1', () => {
    chrome.debugger.sendCommand(
      target,
      'Emulation.setTouchEmulationEnabled',
      { enabled: true, configuration: 'mobile' },
      (err) => {
        if (err) console.error('触摸模拟启用失败:', err);
      }
    );
  });
}

// 初始启用触摸模拟
enableTouchEmulation(debuggee);

// 打开DevTools后重新恢复触摸模拟
webview.showDevTools(true, () => {
  // 延迟1秒确保DevTools加载完成，避免命令执行失败
  setTimeout(() => {
    enableTouchEmulation(debuggee);
    console.log('DevTools打开后已恢复触摸模式');
  }, 1000);
});

方案2：结合设备尺寸模拟更稳定 #

如果你需要模拟完整的手机设备（包括屏幕尺寸、像素比），可以用Emulation.setDeviceMetricsOverride命令，这个命令会同时设置设备参数和触摸模式，比单独设置触摸更稳定，而且DevTools打开后重新调用也能保持完整的设备模拟：

const webview = document.getElementById('myWebview');
const debuggee = { targetId: webview.getWebContentsId() };

// 封装完整的移动设备模拟函数
function enableMobileDeviceEmulation(target) {
  chrome.debugger.attach(target, '1.1', () => {
    chrome.debugger.sendCommand(
      target,
      'Emulation.setDeviceMetricsOverride',
      {
        width: 375,    // iPhone SE 横向宽度
        height: 667,   // iPhone SE 纵向高度
        deviceScaleFactor: 2, // 像素比
        mobile: true,
        fitWindow: false,
        touch: true    // 启用触摸模拟
      },
      (err) => {
        if (err) console.error('设备模拟设置失败:', err);
      }
    );
  });
}

// 初始设置
enableMobileDeviceEmulation(debuggee);

// 打开DevTools后重新设置
webview.showDevTools(true, () => {
  setTimeout(() => {
    enableMobileDeviceEmulation(debuggee);
  }, 1000);
});

关键注意事项 #

• 确保你的webview标签添加了debug属性，否则chrome.debuggerAPI无法正常工作：

  <webview id="myWebview" src="https://your-url.com" debug></webview>
  

• 尽量使用NW.js的稳定版，旧版本可能存在调试器和webview上下文的兼容性问题。
• 延迟时间可以根据你的设备性能调整，1秒是比较稳妥的数值，避免DevTools未加载完成就执行命令。

内容的提问来源于stack exchange，提问作者willian绿茶