今天从哥们那里学到了一个小技巧，使用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. python 在不同层级目录import 模块的方法

    有一个文件夹/home/a,  里面有个模块叫b.py,  我怎么把他import到程序里? 1). import sys; sys.path.append("/home/a/") ...

  2. 使用连接（JOIN）来代替子查询(Sub-Queries) mysql优化系列记录

    使用连接(JOIN)来代替子查询(Sub-Queries) MySQL从 4.1开始支持SQL的子查询.这个技术可以使用SELECT语句来创建一个单列的查询结果,然后把这个结果作为过滤条件用在另一个查 ...

  3. 转：strcat与strcpy与strcmp与strlen

    转自:http://blog.chinaunix.net/uid-24194439-id-90782.html strcat 原型:extern char *strcat(char *dest,cha ...

  4. hibernate.properties和hibernate.cfg.xml

    hibernate.properties和hibernate.cfg.xml 博客分类: 框架技术 HibernateXMLSQLOracleJDBC     hibernate配置文件可以有两种方式 ...

  5. IIS_各种问题

    IIS7中默认是已经加载了脚本映射处理.但今天装了个WIN7,装好IIS后却发现没有.于是手动去这安装,在添加html映射时提示:模块列表中必须要有IsapiModule或cgiModule 因为 I ...

  6. OpenCV_轮廓的查找、表达、绘制、特性及匹配

    转摘网址为:http://www.cnblogs.com/slysky/archive/2011/10/14/2212227.html 虽然Canny之类的边缘检测算法可以根据像素间的差异检测出轮廓边 ...

  7. 腾讯云从零部署nodejs站点

    版权声明:本文由袁飞翔原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/176 来源:腾云阁 https://www.qclo ...

  8. java 多线程4（死锁）

    死锁现象: 死锁原因: 1.存在两个或两个以上的线程. 2.存在两个或两个或两个以上的共享资源. 死锁现象解决的方案: 没有方案只能尽量避免.

  9. IOS开发—UIDatePicker 日期/时间选取器(滚轮)

    UIDatePicker 是一个控制器类,封装了 UIPickerView,但是他是UIControl的子类,专门用于接受日期.时间和持续时长的输入.日期选取器的各列会按照指定的风格进行自动配置,这样 ...

  10. memset,memcpy,memcmp用法

    void* memset(void *s, int ch, size_t n); 将s所指向的某一块内存中的前n个字节的内容全部设置为ch指定的ASCII值. 例如:memset(lpMyStruct ...