模拟设备传感器

使用 传感器 工具模拟任何设备的传感器输入。

传感器工具

概述

传感器工具可让你执行以下作:

若要模拟移动设备的视区并限制网络和 CPU,请参阅 模拟移动设备 (设备仿真)

打开传感器工具

  1. 在新窗口或选项卡中打开网页,例如 TODO 应用 演示页。

  2. 右键单击网页,然后选择“ 检查”。

    DevTools 随即打开。

  3. 次或两次 Esc,以便在 DevTools 底部打开 “快速视图 ”面板。

  4. “快速视图 ”面板中,单击“ 更多工具 ”按钮,然后选择“ 传感器”。

    “传感器”工具将在 DevTools 底部的“快速视图”面板中打开。

使用命令菜单打开传感器工具

  1. 根据作系统,按以下命令打开命令菜单:

    • 在 Windows、Linux 或 ChromeOS 上, Control+Shift+P
    • 在 MacOS 上, Command+Shift+P

    使用命令菜单打开传感器工具

  2. 键入 “传感器”,选择“ 显示传感器”,然后按 Enter

    “传感器”工具将在 DevTools 底部的“快速视图”中打开。

替代地理位置

许多网站利用用户位置为用户提供更相关的体验。 例如,一旦用户授予网站访问其位置的权限,天气网站可能会显示用户所在区域的本地预报。 若要从网站访问用户的地理位置,请参阅 MDN 中的 地理位置 API

如果要构建根据用户所在位置而变化的 UI,你可能希望确保该网站在世界各地的不同位置正确运行。

若要替代地理位置, 请打开“传感器”工具 ,然后从“ 位置 ”列表中选择以下选项之一:

  • 预设城市之一,如 东京
  • 其他 用于输入自定义经度和纬度坐标。
  • 选择“ 位置不可用 ”,查看用户位置不可用时站点的行为方式。

从“位置”列表中选择“东京”

模拟设备方向

移动设备具有可以检测其物理方向的传感器。 网站(如基于 Web 的游戏或地图应用程序)可以利用设备方向来提供更好的体验。 若要了解如何检测设备方向,请参阅 MDN 中的 设备方向事件

如果要生成根据用户设备方向而变化的 UI,则需要在不同的设备方向下测试 UI。

若要模拟不同的设备方向, 请打开“传感器”工具,然后从“ 方向 ”列表中选择以下选项之一:

在单击时模拟触摸事件

若要测试网站上的触摸事件,即使在没有触摸屏的设备上进行测试:

  1. 在新窗口或选项卡中打开网页,例如 TODO 应用 演示页。

  2. 右键单击网页,然后选择“ 检查”。

    DevTools 随即打开。

  3. 次或两次 Esc,以便在 DevTools 底部打开 “快速视图 ”面板。

  4. “快速视图 ”面板中,单击“ 更多工具 ”按钮,然后选择“ 传感器”。

    “传感器”工具将在 DevTools 底部的“快速视图”面板中打开。

  5. “传感器” 工具中,向下滚动到 “触摸 ”下拉菜单,然后选择“ 强制启用”:

    强制触摸而不是单击

  6. 单击 DevTools 顶部的“重载 DevTools”按钮。

模拟空闲检测器状态

空闲检测 API 允许检测非活动用户并对空闲状态更改做出反应。 使用 DevTools,可以模拟用户状态和屏幕状态的空闲状态更改,而不是等待实际空闲状态更改。

若要模拟空闲状态::

  1. 在新窗口或选项卡中打开网页,例如 空闲检测演示

  2. 右键单击页面,然后选择“ 检查”。

    DevTools 随即打开。

  3. 次或两次 Esc,以便在 DevTools 底部打开 “快速视图 ”。

  4. “快速视图 ”工具栏中,单击“ 更多工具 ”按钮,然后选择“ 传感器”。

    传感器 ”工具将在 “快速视图 ”面板中打开。

  5. 在演示页中,单击“ 开始检测空闲状态 ”按钮。

    仅首次打开 “允许 ”对话框。

  6. 单击“ 允许” 按钮。

    演示页被授予空闲检测权限。

  7. 在 DevTools 的 “传感器 ”工具中,向下滚动到 “模拟空闲检测器状态 ”下拉列表,然后选择一个选项:

    • 无空闲仿真
    • 用户处于活动状态,屏幕已解锁
    • 用户活动,屏幕已锁定
    • 用户空闲,屏幕已解锁
    • 用户空闲,屏幕已锁定

    演示页显示模拟的用户和屏幕状态:

    在演示页上选择空闲和锁定状态

另请参阅:

模拟硬件并发性

若要模拟网站在具有不同处理器核心数的设备上的表现,可以重写 navigator.hardwareConcurrency 属性报告的值。 某些应用程序使用此属性来控制其应用程序的并行度,例如,用于控制 Emscripten pthread 池大小。

若要模拟硬件并发,

  1. 在新窗口或选项卡中打开网页,例如 TODO 应用 演示页。

  2. 右键单击网页,然后选择“ 检查”。

    DevTools 随即打开。

  3. 次或两次 Esc,以便在 DevTools 底部打开 “快速视图 ”面板。

  4. “快速视图 ”面板中,单击“ 更多工具 ”按钮,然后选择“ 传感器”。

    “传感器”工具将在 DevTools 底部的“快速视图”面板中打开。

  5. “传感器 ”工具中,向下滚动到“ 硬件并发 ”复选框,然后选择它。

  6. 在“数字输入”框中,输入要模拟的核心数:

    已启用“硬件并发”,核心数设置为 10

    警告:超过默认值可能会降低性能。

若要还原默认值,请单击“重置 (重置”图标) 按钮。

模拟 CPU 压力

CPU 或计算压力 是一组报告状态,可让你了解系统计算正在承受的工作负荷,以及它是否接近极限。 利用此信息,你可以调整实时应用程序(例如视频会议或视频游戏),以利用所有可用的处理能力,同时通过实时调整工作负载来保持系统响应。

借助 传感器 工具,可以模拟 计算压力 API 可以报告的状态。

若要模拟网站上的 CPU 压力,请执行以下作:

  1. 在新窗口或选项卡中打开网页,例如 TODO 应用 演示页。

  2. 右键单击网页,然后选择“ 检查”。

    DevTools 随即打开。

  3. 次或两次 Esc,以便在 DevTools 底部打开 “快速视图 ”面板。

  4. “快速视图 ”面板中,单击“ 更多工具 ”按钮,然后选择“ 传感器”。

    “传感器”工具将在 DevTools 底部的“快速视图”面板中打开。

  5. “传感器” 工具中,向下滚动到 “CPU 压力 ”部分,然后选择一种 可读的压力状态

    • 无替代
    • 名义
    • 公平
    • 严重
    • 极热
  6. 在 DevTools 顶部,单击“ 重新加载 DevTools” 按钮:

    模拟“严重”CPU 压力

另请参阅

MDN:

演示:

Web.dev:

Emscripten:

注意

此页面的某些部分是根据 Google 创建和共享的作品所做的修改,并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。 原始页面 在这里 找到,由凯斯·巴斯克和索非亚·埃梅利亚诺娃创作。

Creative Commons 许可证 此作品根据 Creative Commons 署名 4.0 国际许可获得许可