今天从哥们那里学到了一个小技巧,使用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. fragment入门

    [1]在activity布局中定义fragment <?xml version="1.0" encoding="utf-8"?> <Linea ...

  2. Android AIDL Service

    AIDL Service //跨进程调用Service    一个APK想调用另一个APK中的Service 如何实现AIDL //定义两个进程之间的通信接口 Demo1 传递简单数据 AidlSer ...

  3. js知识点 知识树 知识结构 (转载 学习中)

  4. J2EE 第二阶段项目之编写代码(六)

    三张表的增 修改 查看.明天可以完成. 周末继续统计.

  5. scala集合

    优先使用不可变集合.不可变集合适用于大多数情况,让程序易于理解和推断,因为它们是引用透明的( referentially transparent )因此缺省也是线程安全的. 使用可变集合时,明确地引用 ...

  6. Css_加载样式

    第一种效果: 代码如下: <div class="loading"> <span></span> <span></span&g ...

  7. HBase之表空间

    1.介绍 在HBase中,namespace命名空间指对一组表的逻辑分组,类似RDBMS中的database,方便对表在业务上划分.Apache HBase从0.98.0, 0.95.2两个版本开始支 ...

  8. 基于SpringBoot项目的https

    在spring中配置项目运行的端口很简单. 在application.properties中 server.port: 这样配置后,spring boot内嵌的tomcat服务器就是跑在8080端口启 ...

  9. mysql 截断

    当id为int是,如果是10位数,可以插入,primary key不能重复插入,其默认值可以为NULL一个varchar字段的值如果长度设定为255,则如果其长度为256也可以插入,但已经被截取到了2 ...

  10. eclipse 下的 merge 是如何实现的

    1 我从eclipse里面新建一个workspace2 新建一个分支3 再新建另外一个分支4 回到原分支, 修改某一行,比如a.txt的85行5 提交git add commit6 切换到新分支7 修 ...