今天从哥们那里学到了一个小技巧，使用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. 算法_栈的Java的通用数组实现

    栈是一个常用的最简单的数据结构,这里提供了其实现.内部维护了一个数组,并且可以动态的调整数组的大小.而且,提供了迭代器支持后进先出的迭代功能.Stack的实现是所有集合类抽象数据类型实现的模板,它将所 ...

  2. JavaSE复习_5 Eclipse的常见操作

    △用鼠标点击生成的java源文件,按下F4可以观察类的生成的层次结构 △window-showreview:可以显示命令窗口.   window-perspective-reset:可以将打乱的命令窗 ...

  3. js-------》(小效果)实现倒计时及时间对象

    js实现倒计时及时间对象 JS实现倒计时效果代码如下: 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset ...

  4. Bootstrap文本对齐风格

    在排版中离不开文本的对齐方式.在CSS中常常使用text-align来实现文本的对齐风格的设置.其中主要有四种风格: ☑  左对齐,取值left ☑  居中对齐,取值center ☑  右对齐,取值r ...

  5. mybatis动态sql中的trim标签的使用

    trim标记是一个格式化的标记,可以完成set或者是where标记的功能,如下代码: 1. select * from user <trim prefix="WHERE" p ...

  6. EMV技术学习和研究(转)

    刚开始学习EMV&PBOC,磕磕碰碰,感谢xuture的<EMV技术学习和研究>给了很大帮助,让我少走了很多弯路,也感谢广俊.surge.艾零.小SO.Spinach.龙行天下的帮 ...

  7. linux环境(CentOS-6.7)下redis集群的搭建全过程

    linux环境下redis集群的搭建全过程: 使用mount命令将光盘挂载到/mnt/cdrom目录下: [root@hadoop03 ~]# mount -t iso9660 -o ro /dev/ ...

  8. matlab中图像显示函数

    image函数是显示图像的最基本的方法.该函数还产生了图像对象的句柄,并允许对对象的属性进行设置. imagesc函数也具有image的功能,所不同的是imagesc函数还自动将输入数据比例化,以全色 ...

  9. 如何查看连接mysql的ip地址

    select SUBSTRING_INDEX(host,':',1) as ip , count(*) from information_schema.processlist group by ip;

  10. @ResponseStatus

    返回一个指定的http response状态码. @ResponseStatus(value = HttpStatus.NOT_FOUND, reason = "IOException oc ...