今天从哥们那里学到了一个小技巧，使用chrome自带的多设备模拟器来调试页面在不同设备下的显示效果。

特地上网查了一下，记录一下。

如果想要在 Chrome 上测试网站在不同设备，不同分辨率的显示情况，那么就试试 Chrome 开发工具的设备模拟器吧。进入到开发者工具（快捷键 F12），然后点击右上角的锯齿，在 Setting 一侧找到Overrides，勾选上 Show ‘Emulation’ view in console drawer 。之后点击’ Hide drawer’上边的三道杠，就能看到模拟器了，目前能模拟大部分流行的设备了，不过没看到 iPhone 5s。

我的电脑上装的chrome浏览器版本是31.0 版本的，可惜没有找到在哪，升级到新版本34.0后，默认就处于打开状态了。

转载请注明出处。

Chrome 开发者工具有了设备模拟器的更多相关文章

  1. 前端调试效率低？试试这10个“Chrome开发者工具”使用技巧

    摘要:今天给大家分享一些使用“Chrome开发者工具”的小技巧.包括调试,优化页面渲染速度等.希望能提升Web开发人员的工作效率. 今天给大家分享一些使用“Chrome开发者工具”的小技巧.包括调试, ...

  2. 前端开发必备之Chrome开发者工具（下篇）

    本文介绍的 Chrome 开发者工具基于 Chrome 65版本,如果你的 Chrome 开发者工具没有下文提到的那些内容,请检查下 Chrome 的版本 本文是 前端开发必备之Chrome开发者工具 ...

  3. Chrome开发者工具不完全指南：（三、性能篇）

    卤煮在前面已经向大家介绍了Chrome开发者工具的一些功能面板,其中包括Elements.Network.Resources基础功能部分和Sources进阶功能部分,对于一般的网站项目来说,其实就是需 ...

  4. Chrome开发者工具不完全指南（五、移动篇）

    前面介绍了Chrome开发者工具的大部分内容工具,现在介绍最后两块功能Audits和Console面板.一.Audits Audits面板会针对目前网页提出若干条优化的建议,这些建议分为两大类,一类是 ...

  5. Chrome开发者工具详解(3)-Timeline面板

    Chrome开发者工具详解(3)-Timeline面板 注: 这一篇主要讲解面板Timeline,参考了Google的相关文档,主要用于公司内部技术分享.. Timeline面板 Timeline面板 ...

  6. 前端开发必备之Chrome开发者工具（一）

    本文介绍的 Chrome 开发者工具基于 Chrome 65版本,如果你的 Chrome 开发者工具没有下文提到的那些内容,请检查下 Chrome 的版本 简介 Chrome 开发者工具是一套内置于 ...

  7. 使用Chrome开发者工具调试Android端内网页(微信，QQ，UC，App内嵌页等)

    使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等) 前言 移动端页面调试一直是好多朋友头疼的问题,iOS 由于其封闭的特性和整体较高的性能,整体适配相对好做,调试 ...

  8. 前端开发必备之Chrome开发者工具（上篇）

    本文介绍的 Chrome 开发者工具基于 Chrome 65版本,如果你的 Chrome 开发者工具没有下文提到的那些内容,请检查下 Chrome 的版本 简介 Chrome 开发者工具是一套内置于 ...

  9. Google Chrome开发者工具-移动仿真：触摸事件仿真

    如果你在开发PAD/手机所用WEB版应用,需要在桌面审查页面元素.调试脚本,模拟移动设备尺寸.事件.位置等信息, 那么可以使用Chrome开发者工具(DevTools)提供的强大的移动仿真功能,支持主 ...

随机推荐

  1. Android最佳性能实践(一)——合理管理内存

    有不少朋友都问过我,怎样才能写出高性能的应用程序,如何避免程序出现OOM,或者当程序内存占用过高的时候该怎么样去排查.确实,一个优秀的应用程序,不仅仅要功能完成得好,性能问题也应该处理得恰到好处.为此 ...

  2. 每一个可以移动的棋子都要移动——Every-SG 游戏

    先看一个问题 HDU 3595 GG and MM (Every_SG博弈) 题目有N个游戏同时进行,每个游戏有两堆石子,每次从个数多的堆中取走数量小的数量的整数倍的石子.取最后一次的获胜.并且N个游 ...

  3. RMAN-03009 ORA-19504 ORA-27038

    错误信息如下: RMAN> backup database tag='full20160112' format '/orabak/rman/full20160112' include curre ...

  4. 删除github账号的方法

    如果你不想使用自己的github账号了,github官网允许你删除账号,具体操作步骤为: 1.登录github网站,网站右上角的头像,在下拉菜单中选择"Settings"(设置): ...

  5. php学习记录 易混淆

    1.echo和print的区别 PHP中echo和print的功能基本相同(输出),但是两者之间还是有细微差别的.echo输出后没有返回值,但print有返回值,当其执行失败时返回flase.因此可以 ...

  6. phalcon: 缓存片段，文件缓存，memcache缓存

    几种缓存,需要用到前端配置,加后端实例配合着用 片段缓存: public function indexAction() { //渲染页面 $this->view->setTemplateA ...

  7. 抛弃vboot不格盘用grub4dos+firadisk安装Ghost版XP到VHD，轻松RAMOS!

    http://bbs.wuyou.net/forum.php?mod=viewthread&tid=363198&extra=抛弃vboot不格盘用grub4dos+firadisk安 ...

  8. as与c++的反射机制对比

    所谓反射机制(Reflection),简单来说,就是可以根据class的名称获取这个class以及其对应的实例.具体来说, 指的是我们可以于运行时加载.探知.使用编译期间完全未知的classes.换句 ...

  9. java 对象 Serializable注意事项

    在序列化时,有几点要注意的: 1:当一个对象被序列化时,只保存对象的非静态成员变量,不能保存任何的成员方法和静态的成员变量. 2:如果一个对象的成员变量是一个对象,那么这个对象的数据成员也会被保存. ...

  10. as（C# 参考）

    原文地址:https://msdn.microsoft.com/zh-cn/library/cscsdfbt(v=vs.110).aspx 可以使用 as 运算符执行转换的某些类型在兼容之间的引用类型 ...