Chrome 开发者工具有了设备模拟器
今天从哥们那里学到了一个小技巧,使用chrome自带的多设备模拟器来调试页面在不同设备下的显示效果。
特地上网查了一下,记录一下。

如果想要在 Chrome 上测试网站在不同设备,不同分辨率的显示情况,那么就试试 Chrome 开发工具的设备模拟器吧。进入到开发者工具(快捷键 F12),然后点击右上角的锯齿,在 Setting 一侧找到Overrides,勾选上 Show ‘Emulation’ view in console drawer 。之后点击’ Hide drawer’上边的三道杠,就能看到模拟器了,目前能模拟大部分流行的设备了,不过没看到 iPhone 5s。
我的电脑上装的chrome浏览器版本是31.0 版本的,可惜没有找到在哪,升级到新版本34.0后,默认就处于打开状态了。


转载请注明出处。
Chrome 开发者工具有了设备模拟器的更多相关文章
- 前端调试效率低?试试这10个“Chrome开发者工具”使用技巧
摘要:今天给大家分享一些使用“Chrome开发者工具”的小技巧.包括调试,优化页面渲染速度等.希望能提升Web开发人员的工作效率. 今天给大家分享一些使用“Chrome开发者工具”的小技巧.包括调试, ...
- 前端开发必备之Chrome开发者工具(下篇)
本文介绍的 Chrome 开发者工具基于 Chrome 65版本,如果你的 Chrome 开发者工具没有下文提到的那些内容,请检查下 Chrome 的版本 本文是 前端开发必备之Chrome开发者工具 ...
- Chrome开发者工具不完全指南:(三、性能篇)
卤煮在前面已经向大家介绍了Chrome开发者工具的一些功能面板,其中包括Elements.Network.Resources基础功能部分和Sources进阶功能部分,对于一般的网站项目来说,其实就是需 ...
- Chrome开发者工具不完全指南(五、移动篇)
前面介绍了Chrome开发者工具的大部分内容工具,现在介绍最后两块功能Audits和Console面板.一.Audits Audits面板会针对目前网页提出若干条优化的建议,这些建议分为两大类,一类是 ...
- Chrome开发者工具详解(3)-Timeline面板
Chrome开发者工具详解(3)-Timeline面板 注: 这一篇主要讲解面板Timeline,参考了Google的相关文档,主要用于公司内部技术分享.. Timeline面板 Timeline面板 ...
- 前端开发必备之Chrome开发者工具(一)
本文介绍的 Chrome 开发者工具基于 Chrome 65版本,如果你的 Chrome 开发者工具没有下文提到的那些内容,请检查下 Chrome 的版本 简介 Chrome 开发者工具是一套内置于 ...
- 使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等)
使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等) 前言 移动端页面调试一直是好多朋友头疼的问题,iOS 由于其封闭的特性和整体较高的性能,整体适配相对好做,调试 ...
- 前端开发必备之Chrome开发者工具(上篇)
本文介绍的 Chrome 开发者工具基于 Chrome 65版本,如果你的 Chrome 开发者工具没有下文提到的那些内容,请检查下 Chrome 的版本 简介 Chrome 开发者工具是一套内置于 ...
- Google Chrome开发者工具-移动仿真:触摸事件仿真
如果你在开发PAD/手机所用WEB版应用,需要在桌面审查页面元素.调试脚本,模拟移动设备尺寸.事件.位置等信息, 那么可以使用Chrome开发者工具(DevTools)提供的强大的移动仿真功能,支持主 ...
随机推荐
- fragment入门
[1]在activity布局中定义fragment <?xml version="1.0" encoding="utf-8"?> <Linea ...
- Android AIDL Service
AIDL Service //跨进程调用Service 一个APK想调用另一个APK中的Service 如何实现AIDL //定义两个进程之间的通信接口 Demo1 传递简单数据 AidlSer ...
- js知识点 知识树 知识结构 (转载 学习中)
- J2EE 第二阶段项目之编写代码(六)
三张表的增 修改 查看.明天可以完成. 周末继续统计.
- scala集合
优先使用不可变集合.不可变集合适用于大多数情况,让程序易于理解和推断,因为它们是引用透明的( referentially transparent )因此缺省也是线程安全的. 使用可变集合时,明确地引用 ...
- Css_加载样式
第一种效果: 代码如下: <div class="loading"> <span></span> <span></span&g ...
- HBase之表空间
1.介绍 在HBase中,namespace命名空间指对一组表的逻辑分组,类似RDBMS中的database,方便对表在业务上划分.Apache HBase从0.98.0, 0.95.2两个版本开始支 ...
- 基于SpringBoot项目的https
在spring中配置项目运行的端口很简单. 在application.properties中 server.port: 这样配置后,spring boot内嵌的tomcat服务器就是跑在8080端口启 ...
- mysql 截断
当id为int是,如果是10位数,可以插入,primary key不能重复插入,其默认值可以为NULL一个varchar字段的值如果长度设定为255,则如果其长度为256也可以插入,但已经被截取到了2 ...
- eclipse 下的 merge 是如何实现的
1 我从eclipse里面新建一个workspace2 新建一个分支3 再新建另外一个分支4 回到原分支, 修改某一行,比如a.txt的85行5 提交git add commit6 切换到新分支7 修 ...