使用 传感器 工具模拟任何设备的传感器输入。
概述
传感器工具可让你执行以下作:
若要模拟移动设备的视区并限制网络和 CPU,请参阅 模拟移动设备 (设备仿真) 。
打开传感器工具
在新窗口或选项卡中打开网页,例如 TODO 应用 演示页。
右键单击网页,然后选择“ 检查”。
DevTools 随即打开。
按 一 次或两次 Esc,以便在 DevTools 底部打开 “快速视图 ”面板。
在 “快速视图 ”面板中,单击“ 更多工具 ”按钮,然后选择“ 传感器”。
“传感器”工具将在 DevTools 底部的“快速视图”面板中打开。
使用命令菜单打开传感器工具
根据作系统,按以下命令打开命令菜单:
- 在 Windows、Linux 或 ChromeOS 上, Control+Shift+P。
- 在 MacOS 上, Command+Shift+P。
键入 “传感器”,选择“ 显示传感器”,然后按 Enter。
“传感器”工具将在 DevTools 底部的“快速视图”中打开。
替代地理位置
许多网站利用用户位置为用户提供更相关的体验。 例如,一旦用户授予网站访问其位置的权限,天气网站可能会显示用户所在区域的本地预报。 若要从网站访问用户的地理位置,请参阅 MDN 中的 地理位置 API。
如果要构建根据用户所在位置而变化的 UI,你可能希望确保该网站在世界各地的不同位置正确运行。
若要替代地理位置, 请打开“传感器”工具 ,然后从“ 位置 ”列表中选择以下选项之一:
- 预设城市之一,如 东京。
- 其他 用于输入自定义经度和纬度坐标。
- 选择“ 位置不可用 ”,查看用户位置不可用时站点的行为方式。
模拟设备方向
移动设备具有可以检测其物理方向的传感器。 网站(如基于 Web 的游戏或地图应用程序)可以利用设备方向来提供更好的体验。 若要了解如何检测设备方向,请参阅 MDN 中的 设备方向事件。
如果要生成根据用户设备方向而变化的 UI,则需要在不同的设备方向下测试 UI。
若要模拟不同的设备方向, 请打开“传感器”工具,然后从“ 方向 ”列表中选择以下选项之一:
预设方向之一,如 纵向倒置:
自定义方向,以提供自己的确切方向。
选择 “自定义方向”后,将启用 alpha、 beta 和 gamma 字段。 若要了解这些轴的工作原理,请参阅:
选择 “自定义方向”后,还可以通过拖动方向模型来设置自定义 方向。 拖动前按住 Shift ,沿 alpha 轴旋转:
在单击时模拟触摸事件
若要测试网站上的触摸事件,即使在没有触摸屏的设备上进行测试:
在新窗口或选项卡中打开网页,例如 TODO 应用 演示页。
右键单击网页,然后选择“ 检查”。
DevTools 随即打开。
按 一 次或两次 Esc,以便在 DevTools 底部打开 “快速视图 ”面板。
在 “快速视图 ”面板中,单击“ 更多工具 ”按钮,然后选择“ 传感器”。
“传感器”工具将在 DevTools 底部的“快速视图”面板中打开。
在 “传感器” 工具中,向下滚动到 “触摸 ”下拉菜单,然后选择“ 强制启用”:
单击 DevTools 顶部的“重载 DevTools”按钮。
模拟空闲检测器状态
空闲检测 API 允许检测非活动用户并对空闲状态更改做出反应。 使用 DevTools,可以模拟用户状态和屏幕状态的空闲状态更改,而不是等待实际空闲状态更改。
若要模拟空闲状态::
在新窗口或选项卡中打开网页,例如 空闲检测演示。
右键单击页面,然后选择“ 检查”。
DevTools 随即打开。
按 一 次或两次 Esc,以便在 DevTools 底部打开 “快速视图 ”。
在 “快速视图 ”工具栏中,单击“ 更多工具 ”按钮,然后选择“ 传感器”。
“ 传感器 ”工具将在 “快速视图 ”面板中打开。
在演示页中,单击“ 开始检测空闲状态 ”按钮。
仅首次打开 “允许 ”对话框。
单击“ 允许” 按钮。
演示页被授予空闲检测权限。
在 DevTools 的 “传感器 ”工具中,向下滚动到 “模拟空闲检测器状态 ”下拉列表,然后选择一个选项:
- 无空闲仿真
- 用户处于活动状态,屏幕已解锁
- 用户活动,屏幕已锁定
- 用户空闲,屏幕已解锁
- 用户空闲,屏幕已锁定
演示页显示模拟的用户和屏幕状态:
另请参阅:
模拟硬件并发性
若要模拟网站在具有不同处理器核心数的设备上的表现,可以重写 navigator.hardwareConcurrency 属性报告的值。 某些应用程序使用此属性来控制其应用程序的并行度,例如,用于控制 Emscripten pthread
池大小。
若要模拟硬件并发,
在新窗口或选项卡中打开网页,例如 TODO 应用 演示页。
右键单击网页,然后选择“ 检查”。
DevTools 随即打开。
按 一 次或两次 Esc,以便在 DevTools 底部打开 “快速视图 ”面板。
在 “快速视图 ”面板中,单击“ 更多工具 ”按钮,然后选择“ 传感器”。
“传感器”工具将在 DevTools 底部的“快速视图”面板中打开。
在 “传感器 ”工具中,向下滚动到“ 硬件并发 ”复选框,然后选择它。
在“数字输入”框中,输入要模拟的核心数:
警告:超过默认值可能会降低性能。
若要还原默认值,请单击“重置 () 按钮。
模拟 CPU 压力
CPU 或计算压力 是一组报告状态,可让你了解系统计算正在承受的工作负荷,以及它是否接近极限。 利用此信息,你可以调整实时应用程序(例如视频会议或视频游戏),以利用所有可用的处理能力,同时通过实时调整工作负载来保持系统响应。
借助 传感器 工具,可以模拟 计算压力 API 可以报告的状态。
若要模拟网站上的 CPU 压力,请执行以下作:
在新窗口或选项卡中打开网页,例如 TODO 应用 演示页。
右键单击网页,然后选择“ 检查”。
DevTools 随即打开。
按 一 次或两次 Esc,以便在 DevTools 底部打开 “快速视图 ”面板。
在 “快速视图 ”面板中,单击“ 更多工具 ”按钮,然后选择“ 传感器”。
“传感器”工具将在 DevTools 底部的“快速视图”面板中打开。
在 “传感器” 工具中,向下滚动到 “CPU 压力 ”部分,然后选择一种 可读的压力状态:
- 无替代
- 名义
- 公平
- 严重
- 极热
在 DevTools 顶部,单击“ 重新加载 DevTools” 按钮:
另请参阅
MDN:
演示:
Web.dev:
Emscripten:
注意
此页面的某些部分是根据 Google 创建和共享的作品所做的修改,并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。 原始页面 在这里 找到,由凯斯·巴斯克和索非亚·埃梅利亚诺娃创作。