如题，如何用PC机上的Chrome浏览器模拟查看和调试手机HTML5页面？

参考操作步骤如下：

第一步、用Chrome打开要调试的页面；

第二步、按F12，打开“开发者工具”，点击其右上角的“Dock to main window.”按钮，让“开发者工具”停靠在浏览器的“右边”，再点击左上角的“Toggle device mode.”按钮，如下图所示：

第三步、选择要模拟的设备，如下图所示：

第四步、刷新页面（很多人都死在这一步，你不刷新一下，是看不到效果的！）

在PC机上，如何用Chrome浏览器模拟查看和调试手机的HTML5页面？的更多相关文章

  1. Chrome浏览器内嵌的各种手机模拟器

    打开chrome的控制台标签,然后,点击simulator子标签页,选择需要的手机即可,如下图: 模拟器如下: 阅读原文:Chrome浏览器内嵌的各种手机模拟器

  2. 【web】Chrome 浏览器中查看 webSocket 连接信息

    1.以下代码实现一个webSocket连接,在文本输入框中输入内容,点击发送,通过服务器,返回相同的内容显示在下方. 1 <!DOCTYPE html> 2 <html lang=& ...

  3. chrome浏览器 模拟访问移动端

    谷歌Chrome浏览器,可以很方便地用来当3G手机模拟器.在Windows的[开始]-->[运行]中输入以下命令,启动谷歌浏览器,即可模拟相应手机的浏览器去访问3G手机网页: 谷歌Android ...

  4. 用Chrome浏览器模拟手机,android,iphone,ipad访问网站

    很多网站都通过User-Agent来判断浏览器类型,如果是3G手机,显示手机页面内容,如果是普通浏览器,显示普通网页内容.谷歌Chrome浏览 器,可以很方便地用来当3G手机模拟器.在Windows的 ...

  5. 如何用Chrome浏览器下载网页音乐视频

    打开网页,先让要下载的视频播放,右键单击选择审查元素(F12),选择上方的Network选项,按F5刷新,这个时候我们可以看到框架中Size下的不少文件数据数字正在变大,按size降序排列.点击表格的 ...

  6. （原创）如何使用selenium 驱动chrome浏览器并且打开方式为手机模式-转载请注明出处

    随着移动设备使用率的不断增加,移动页面的测试也变得越来越重要. 对于互联网公司M站的测试,如果不通过专用的appium等移动端测试工具是否还有方便快捷的办法呢?答案当然是有啊. 使用chrome dr ...

  7. chrome浏览器插件window resizer调试webapp页面大小

    chrome浏览器插件window resizer可以调整当前浏览器分辨率大小 可以自定义大小,以适合于andorid和iphone设备

  8. Win7系统Chrome浏览器缓存查看技巧介绍（转）

    1.Chrome下提供了一个命令chrome://cache,可以查看到保留下来的缓存; 2.但是,当你点击缓存文件,Chrome却并非打开缓存源文件,而是如图所示的二进制编码文件; 3.在Win7系 ...

  9. Chrome浏览器缓存查看工具－ChromeCacheView

    最近想听一下最新的流行热歌,按着某网站的新歌排行榜逐首在巨鲸音乐网搜索下载,但相当一部分的歌曲还是没能下载到,逼不得已只能到百度MP3下载,在搜索结果中已经挑体积比较大的文件来下载了,但下载到的MP3 ...

随机推荐

  1. jquery序列化表单

    没有使用其他的东西 , 数据传送是最基本的. 前台: var info = $('#dataForm').serialize() ; alert(decodeURIComponent(info,tru ...

  2. Java并发（10）- 简单聊聊JDK中的七大阻塞队列

    引言 JDK中除了上文提到的各种并发容器,还提供了丰富的阻塞队列.阻塞队列统一实现了BlockingQueue接口,BlockingQueue接口在java.util包Queue接口的基础上提供了pu ...

  3. vivo面试经验4（linux基本操作，最基本，必须得会！！）

    操作linux通过xshell进行连接: 基本操作介绍 1.shutdown -h 关机 shutdown -r 重启 2.mkdir aaa 新建目录aaa rmdir aaa 删除目录aaa 3. ...

  4. 列出top中的pid

    #!/usr/bin/env python import os import string #方法1:通过字符串的isdigits来判断 #filelist = os.listdir('/proc') ...

  5. hadoop3.1伪分布式部署

    1.环境准备 系统版本:CentOS7.5 主机名:node01 hadoop3.1 的下载地址: http://mirror.bit.edu.cn/apache/hadoop/common/hado ...

  6. React Native - 1 Windows下的环境配置(Windows+Android)

    参考:https://facebook.github.io/react-native/docs/getting-started.html(要FQ)     网站上建议使用Chocolatey去配环境, ...

  7. PHP的Trait

    PHP的Trait Trait是在PHP5.4中加入的,它既不是接口也不是类.主要是为了解决单继承语言的限制.是PHP多重继承的一种解决方案.例如,需要同时继承两个 Abstract Class, 这 ...

  8. java.io.WriteAbortedException异常

    java.io.WriteAbortedException异常 未实现 public interface Serializable 接口的类将无法使其任何状态序列化或反序列化. 可序列化类的所有子类型 ...

  9. magento 报错及解决方法

    在后台安装主题包时安装出错,重新进入后台进不去,前台也进不去,提示“Service Temporarily Unavailable” 删除根目录下的maintenance.flag文件即可.

  10. Codeforces 608 A. Saitama Destroys Hotel

      A. Saitama Destroys Hotel   time limit per test 1 second memory limit per test 256 megabytes input ...