今天从哥们那里学到了一个小技巧,使用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. (一)解决Sublime Text 2中文显示乱码问题

    欲解决问题,关键在于让Sublime Text 2支持GB2312和GBK.步骤如下: 1.安装Sublime Package Control.   在Sublime Text 2上用Ctrl+-打开 ...

  2. MediaPlayer的生命周期

  3. Android 开源项目分类汇总(转)

    Android 开源项目分类汇总(转) ## 第一部分 个性化控件(View)主要介绍那些不错个性化的 View,包括 ListView.ActionBar.Menu.ViewPager.Galler ...

  4. hdu 1115 Lifting the Stone

    题目链接:hdu 1115 计算几何求多边形的重心,弄清算法后就是裸题了,这儿有篇博客写得很不错的: 计算几何-多边形的重心 代码如下: #include<cstdio> #include ...

  5. ma

    首页 第一项 上课 哈哈

  6. JavaScript 3D图表

    在说3D图表以前,首先要明确两个概念,一个是数据的维度,一个是呈现数据载体的维度.对于数据的维度,一维的数据呈现,但是呈现的载体是二维的平面图,比如饼图: 已经能够很清晰地观察到数据的分布情况.数据如 ...

  7. [maven] 使用问题及思考汇总

    (1)Maven坐标 maven坐标可以唯一标识一个项目,包含四个元素 groupId , artifactId, packaging, version. groupId:一般为团体,公司,项目.如 ...

  8. Qt之事件系统

    简述 在Qt中,事件就是对象,派生自QEvent抽象类,用来表示在应用程序中发生的事件,或是应用程序需要处理的外部活动产生的事件. Events可以被任何QObject派生的子类实例对象接收和处理,但 ...

  9. linux开关端口问题

    linux开关端口问题: 我们知道一些常用的端口,比如mysql的端口为3306,sql的端口为:1433,以及tomcat的端口为 8008等等一样! 当这些端口在linux下是没有开启时,我们是无 ...

  10. 172. Factorial Trailing Zeroes -- 求n的阶乘末尾有几个0

    Given an integer n, return the number of trailing zeroes in n!. Note: Your solution should be in log ...