模拟和测试其他浏览器

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

  • 如果您没有特定设备,或者想要执行抽检,最佳方式就是直接在浏览器中模拟设备。
  • 利用设备模拟器,您可以从工作站在一系列设备上模拟开发网站。
  • 基于云的模拟器让您可以在不同平台之间对网站进行自动化单元测试。"

浏览器模拟器

浏览器模拟器非常适合于测试网站的自适应能力,但它们无法模拟 API 差异、CSS 支持,以及您可以在移动设备浏览器中看到的某些行为。在真实设备运行的浏览器上测试您的网站,确保一切均按照预期运行。

Firefox 的自适应设计视图

Firefox 拥有一个自适应设计视图,让您可以探索您的设计在常见屏幕尺寸上的变化或者通过拖动边缘的方式确定自己的大小,而不用考虑具体设备。

Edge 的 F12 模拟

要模拟 Windows Phones,请使用 Microsoft Edge 的内置模拟

由于 Edge 不具备旧版兼容性,请使用 IE 11 的模拟模拟您的页面在较旧版本 Internet Explorer 中的外观。

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

  1. chrome开发工具指南(四)

    Sources 面板中 代码段是您可以从任何页面运行的小脚本(类似于小书签). 使用"Evaluate in Console"功能可以在控制台中运行部分代码段. 请注意,Sourc ...

  2. Chrome 开发工具指南

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

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

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

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

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

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

    检查和删除 Cookie 从 Application 面板检查和删除 Cookie. TL;DR 查看与 Cookie 有关的详细信息,例如名称.值.网域和大小,等等. 删除单个 Cookie.选定网 ...

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

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

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

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

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

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

  9. chrome开发工具指南(十三)

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

随机推荐

  1. Hive笔记——技术点汇总

    目录 · 概况 · 手工安装 · 引言 · 创建HDFS目录 · 创建元数据库 · 配置文件 · 测试 · 原理 · 架构 · 与关系型数据库对比 · API · WordCount · 命令 · 数 ...

  2. Android学习笔记-ImageView(图像视图)

    本节引言: 本节介绍的UI基础控件是:ImageView(图像视图),见名知意,就是用来显示图像的一个View或者说控件! 官方API:ImageView;本节讲解的内容如下: ImageView的s ...

  3. [译] 所有你需要知道的关于完全理解 Node.js 事件循环及其度量

    原文地址:All you need to know to really understand the Node.js Event Loop and its Metrics 原文作者:Daniel Kh ...

  4. Android自定义控件系列之应用篇——圆形进度条

    一.概述 在上一篇博文中,我们给大家介绍了Android自定义控件系列的基础篇.链接:http://www.cnblogs.com/jerehedu/p/4360066.html 这一篇博文中,我们将 ...

  5. Python爬虫从入门到放弃(二十四)之 Scrapy登录知乎

    因为现在很多网站为了限制爬虫,设置了为只有登录才能看更多的内容,不登录只能看到部分内容,这也是一种反爬虫的手段,所以这个文章通过模拟登录知乎来作为例子,演示如何通过scrapy登录知乎 在通过scra ...

  6. 在word表格里打勾和打叉

    打勾:在单元格里输入R,再将其字体设置为:Wingdings 2. 打叉:在单元格里输入T,再将其字体设置为:Wingdings 2.

  7. postman参数为Json数据结构

    本文主要postman字段为Json结构时的操作说明 本文以订单发货为例,根据接口文档去设计 用户下单接口字段如图: 有两种方式可以将字段Json数据传递: 下图为接口字段规则: 接口为post请求方 ...

  8. ARM处理器架构的Thumb指令集中关于IT指令的使用

    在ARMv6T2以及ARMv7架构扩展了Thumb指令集,其中加入了IT指令,进一步增强了代码的紧凑性. Thumb中有一个比较有意思的指令--IT,这条指令用于根据指定的条件来执行后面相继的四条指令 ...

  9. Linux(Fedora) 安装 Oracle XE Database

    Fedora 安装 Oracle XE Database Fedora 20Oracle XeOracle VM VirtualBoxFedora 安装oracle 数据库 环境: Oracle VM ...

  10. 【Centos】修改系统字符集

    centos7: vim /etc/locale.conf LANG=zh_CN.gb2312 其他版本linux: vim /etc/sysconfig/i18n