模拟传感器:地理定位与加速度计

由于大多数桌面设备都没有 GPS 芯片和加速度计,所以测试它们比较困难。Chrome DevTools 的 Sensors 模拟窗格可以通过模拟常见的移动设备传感器来降低测试的开销。

  • 模拟地理定位坐标以测试地理定位替换值。
  • 模拟设备方向以测试加速度计数据。

访问传感器控件

要访问 Chrome DevTools 传感器控件,请执行以下操作:

  1. 打开 DevTools 主菜单
  2. 在 More Tools 菜单下,点击 Sensors

注:如果您的应用检测到使用 JavaScript(如 Modernizr)的传感器加载,请确保在启用传感器模拟器之后重新加载页面。

替换地理定位数据

与桌面设备不同,移动设备通常使用 GPS 硬件检测位置。在 Sensors 窗格中,您可以模拟地理定位坐标,以便与 Geolocation API 结合使用。

在模拟抽屉式导航栏的 Sensors 窗格中选中 Emulate geolocation coordinates 复选框,启用地理定位模拟。

您可以使用此模拟器替换 navigator.geolocation 的位置值,并在地理定位数据不可用时模拟用例。

模拟加速度计(设备方向)

要测试来自 Orientation API 的加速度计数据,请在 Sensors 窗格中选中 Accelerometer 复选框,启用加速度计模拟器。

您可以操作下列方向参数:

α
围绕 Z 轴旋转。
β
左右倾斜。
γ
前后倾斜。

您也可以点击模型加速度计并将其拖动到所需方向。

使用此设备方向演示试用加速度计模拟器。

chrome开发工具指南(十三)的更多相关文章

  1. Chrome 开发工具指南

    Chrome 开发工具指南 谷歌 Chrome 开发工具,是基于谷歌浏览器内含的一套网页制作和调试工具.开发者工具允许网页开发者深入浏览器和网页应用程序的内部.该工具可以有效地追踪布局问题,设置 Ja ...

  2. chrome开发工具指南(一)

    注意:如果你是一个网页开发者同时想要获得最新版本的开发工具,那么你应该使用谷歌浏览器(金丝雀)Canary 版. Chrome 开发者工具 打开Chrome 开发者工具 选择浏览器位于浏览器窗口右上方 ...

  3. chrome开发工具指南(二)

    Application 面板 使用 App Manifest 窗格检查您的网络应用清单和触发 Add to Homescreen 事件. 使用 Service Worker 窗格执行与服务工作线程相关 ...

  4. chrome开发工具指南(十四)

    模拟和测试其他浏览器 您的任务不只局限于确保网站在 Chrome 和 Android 上出色运行.即使 Device Mode 可以模拟 iPhone 等多种其他设备,我们仍鼓励您查看其他浏览器模拟解 ...

  5. chrome开发工具指南(十二)

    使用 Device Mode 模拟移动设备 使用 Chrome DevTools 的 Device Mode 打造移动设备优先的完全自适应式网站.了解如何使用 Device Mode 模拟多种设备及其 ...

  6. chrome开发工具指南(七)

    检查动画 使用 Chrome DevTools 动画检查器检查和修改动画. 通过打开动画检查器捕捉动画.检查器会自动检测动画并将它们分类为多个组. 通过慢速播放.重播或查看动画源代码来检查动画. 通过 ...

  7. chrome开发工具指南(六)

    检查和编辑页面与样式 使用 Chrome DevTools 的 Elements 面板检查和实时编辑页面的 HTML 与 CSS. 在 Elements 面板中检查和实时编辑 DOM 树中的任何元素. ...

  8. chrome开发工具指南(十一)

    检查资源 使用 Application 面板的 Frames 窗格可以按框架组织资源. 您也可以在 Sources 面板中停用 Group by folder 选项,按框架查看资源. 要按网域和文件夹 ...

  9. chrome开发工具指南(九)

    检查和管理存储.数据库与缓存 查看和修改本地存储与会话存储. 检查和修改 IndexedDB 数据库. 对 Web SQL 数据库执行语句. 查看应用缓存和服务工作线程缓存. 点击一次按钮即可清除所有 ...

随机推荐

  1. [补档][Poi2010]Monotonicity 2

    [Poi2010]Monotonicity 2 题目 给出N个正整数a[1..N],再给出K个关系符号(>.<或=)s[1..k]. 选出一个长度为L的子序列(不要求连续),要求这个子序列 ...

  2. Vmware Tools 下载及安装方法

    Vmware Tools 下载及安装方法 王尚2014.11.20 一.介绍 VMware Tools 是VMware 虚拟机中自带的一种增强工具,相当于 VirtualBox 中的增强功能(Sun ...

  3. ASP.NET-页面间的数据传递

    暑假期间做项目时遇到相关问题,总结如下,与大家分享 1.通过查询字符串传递 这种方式是将参数附加在网址的后面,传递数据简单,但容易暴露,一般用于传递一些简单的数据. 例如,在Default1.aspx ...

  4. Abp(.NetCore)开发与发布过程3-部署Ubuntu站点

    以下是笔者在 Ubuntu 16.0-64bit 环境下 发布 ABP(.NetCore)的全过程.特此记录,希望对大家有所帮助. 准备的工具 1.PuTTY(ssh,如果不想每次都用阿里云的远程登录 ...

  5. 如何开发自己的搜索帝国之安装ik分词器

     Elasticsearch默认提供的分词器,会把每个汉字分开,而不是我们想要的根据关键词来分词,我是中国人 不能简单的分成一个个字,我们更希望 “中国人”,“中国”,“我”这样的分词,这样我们就需要 ...

  6. 一步一步学MySQL-一致性非锁定读和锁定读

    一致性非锁定读(consistent nonlocking read) 一致性非锁定读是值InnoDB存储引擎通过多版本控制(multi versioning)的方式来读取当前执行时间数据库中的数据. ...

  7. nmon-监控测试服务器 - Jmeter - 在Linux执行性能测试的方法 [2]

    之所以把标题补充为<Jmeter - 在Linux执行性能测试的方法 [2]>,是因为在执行性能测试的过程中,我们需要关注的对象无非就是"测试服务器", 那么除了使用一些常见的观察服务器的 ...

  8. 诡异错误二:TypeError: data type not understood

    如何使用Python产生一个数组,数组的长度为1024,数组的元素全为0? 很简单啊, 使用zeros(1024) 即可实现! 如何产生一个2×1024的全0矩阵呢?是否是zeros(2,1024) ...

  9. org.apache.commons.io——FileUtils学习笔记

    FileUtils类的应用 1.写入一个文件: 2.从文件中读取: 3.创建一个文件夹,包括文件夹: 4.复制文件和文件夹: 5.删除文件和文件夹: 6.从URL地址中获取文件: 7.通过文件过滤器和 ...

  10. 开源社群系统ThinkSNS+安装部署演示视频!

    社群系统TS+一期版本发布之后,很多小伙伴们反馈安装部署有些困难,那么今天由我们的颜值与技术实力担当乔斌大佬通过录制视频的形式,给大家演示一下部署的整个过程,录制过程中有些杂音,请各位尽情谅解,后续我 ...