谷歌浏览器中如何使用Sensors面板调试移动端的陀螺仪和地理位置API？

Chrome开发者工具Sensors面板可模拟陀螺仪和地理位置数据：启用后拖拽3D模型或手动输入α/β/γ值调试设备方向；选择预设城市或自定义经纬度测试地理定位，设为Disabled可触发权限拒绝错误。

当你在开发移动端网页应用，需要验证陀螺仪方向响应或测试地理位置API在不同坐标下的行为时，Chrome浏览器的Sensors面板能直接模拟真实传感器输入，无需真机部署即可完成调试。

打开并启用Sensors面板

开发者工具中的Sensors面板默认不显示，必须手动调出才能使用设备方向和地理定位模拟功能。

1、在目标网页中按下 F12 或右键选择“检查”打开开发者工具。

2、点击右上角三个点图标 → 选择 More tools → Sensors；或者按 Ctrl+Shift+P（Windows/Linux） 或 Cmd+Shift+P（Mac） 打开命令菜单，输入 Show sensors 并回车。

3、确认 Sensors 面板已出现在开发者工具底部或右侧区域，且 Geolocation 和 Device orientation 两个模块均可见——若任一模块灰显，说明当前页面未调用对应API，需先触发 navigator.geolocation 或 DeviceOrientationEvent 相关代码。

模拟陀螺仪与设备方向数据

该功能用于验证网页是否正确解析 α/β/γ 三轴旋转值，特别适合AR界面、体感游戏或横竖屏适配逻辑调试。

方法一：拖拽3D模型实时调整

在 Sensors 面板中勾选 Device orientation → 点击中间的3D设备模型 → 按住鼠标左键拖动模型，实时改变 β（左右倾斜）和 γ（前后倾斜）值；α（绕Z轴旋转）可通过滑块单独调节。每次拖动后，页面内监听的 deviceorientation 事件会立即触发新数据。

方法二：手动输入精确数值

点击面板右上角的 ⋮ 图标 → 选择 Edit device orientation → 在弹窗中填入 α、β、γ 的具体度数值（如 α: 0, β: 45, γ: -30），点击 Apply。此方式适合复现特定设备姿态异常场景。

【注意：必须刷新页面或重新触发监听器，否则旧事件监听仍接收上一次的缓存值】

模拟地理位置坐标并控制权限状态

通过覆盖 navigator.geolocation.getCurrentPosition() 返回结果，可测试地图标记、区域限制、附近服务等逻辑在任意经纬度下的表现。

第一步：启用地理定位模拟

在 Sensors 面板的 Geolocation 下拉菜单中，选择 Custom location… 或任一预设城市（如 Shanghai、New York）。

第二步：填写坐标并生效

若选 Custom location…，在弹出框中输入 Latitude（纬度）和 Longitude（经度），例如北京天安门：39.9087, 116.3975；Accuracy（精度）可留空（默认100米）或填入更小值（如10）模拟高精度GPS。点击 Apply 后，必须刷新当前页面，否则 JavaScript 仍读取浏览器缓存的位置。

第三步：强制触发拒绝授权路径

将 Geolocation 下拉菜单设为 Disabled，此时即使网站此前已获授权，navigator.geolocation 也会立即返回 PermissionDeniedError。这是验证前端错误处理逻辑（如 fallback 提示、禁用依赖功能）的唯一可靠方式。