能否让Chrome DevTools模拟不同的电池电量与充电状态？

我之前调试类似的电池相关JS代码时也遇到过这个情况——USB连接电脑时设备默认处于充电状态，所以navigator.getBattery()总是返回满电且充电中的结果。给你两个靠谱的方法来模拟不同的电池状态：

方法一：用DevTools的Sensor面板直接模拟 #

这是最简单直接的方式，最新版Chrome DevTools已经把电池模拟整合到Sensor面板里了：

• 打开Chrome DevTools（按F12或右键页面选「检查」）
• 点击DevTools右上角的三个点图标 → 选择「More tools」→ 找到并打开「Sensor」面板
• 在Sensor面板里找到Battery模块，勾选「Override」（覆盖真实状态）选项
• 接下来你就可以自由调整「Battery level」（拖动滑块或者输入数值，范围0-1）和「Charging state」（勾选或取消勾选来切换充电/未充电状态）
• 调整完成后，重新运行你的测试代码，或者监听电池状态变化事件：

  navigator.getBattery().then(function(battery) {
    console.log(battery);
    // 监听电量变化
    battery.addEventListener('levelchange', () => console.log('当前电量:', battery.level));
    // 监听充电状态变化
    battery.addEventListener('chargingchange', () => console.log('是否充电:', battery.charging));
  });
  

方法二：通过命令行API强制修改状态 #

如果Sensor面板操作有问题，也可以用DevTools的Console面板执行命令来手动覆盖：

• 打开Console面板，输入以下命令来设置模拟的电池状态：

  // 设置电量为50%，未充电
  Emulation.setBatteryOverride({level: 0.5, charging: false})
  // 取消覆盖，恢复真实状态
  Emulation.clearBatteryOverride()
  

• 执行完设置命令后，再调用navigator.getBattery()就能看到模拟的状态了

注意：不管用哪种方法，修改模拟状态后，最好刷新页面或者重新获取电池对象，确保新的状态生效。另外，有些安卓设备可能需要在开发者选项里开启「USB调试」的相关权限，但你已经能连接调试了应该没问题。

内容的提问来源于stack exchange，提问作者user1014351