如题,如何用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. 【Foreign】树 [prufer编码][DP]

    树 Time Limit: 10 Sec  Memory Limit: 256 MB Description Input Output Sample Input 3 2 2 1 Sample Outp ...

  2. 【BZOJ】5010: [Fjoi2017]矩阵填数

    [算法]离散化+容斥原理 [题意]给定大矩阵,可以每格都可以任意填1~m,给定n个子矩阵,要求满足子矩阵内的最大值为vi,求方案数. n<=10,h,w<=1w. [题解] 此题重点之一在 ...

  3. HDU 1141 Factstone Benchmark (数学 )

    题目链接 Problem Description Amtel has announced that it will release a 128-bit computer chip by 2010, a ...

  4. [bzoj3876][AHOI2014]支线剧情——上下界费用流

    题目 传送门 题解 建立s和t,然后s向1连下限0上限inf费用0的边,除1外所有节点向t连下限0上限inf费用0的边,对于每条边下限为1上限为inf费用为经过费用,然后我们只有做上下界网络流构出新图 ...

  5. linux下面which whereis find locate的使用

    我们经常在linux要查找某个文件,但不知道放在哪里了,可以使用下面的一些命令来搜索.这些是从网上找到的资料,因为有时很长时间不会用到,当要用的时候经常弄混了,所以放到这里方便使用. which    ...

  6. LeetCode 191:number of one bits

    题目就是: Write a function that takes an unsigned integer and returns the number of ’1' bits it has (als ...

  7. python学习笔记 IO 文件读写

    读写文件是最常见的IO操作.python内置了读写文件的函数. 读写文件前,我们先必须了解一下,在磁盘上读写文件的功能都是由操作系统完成的,现代操作系统不允许普通的程序直接对磁盘进行操作,所以, 读写 ...

  8. 网络知识===cookie 、session、JSESSIONID的区别

    cookie .session ? 让我们用几个例子来描述一下cookie和session机制之间的区别与联系.笔者曾经常去的一家咖啡店有喝5杯咖啡免费赠一杯咖啡的优惠,然而一次性消费5杯咖啡的机会微 ...

  9. kernel_read【转】

    转自:http://blog.csdn.net/echoisland/article/details/7101097http://lxr.oss.org.cn/source/fs/exec.c 798 ...

  10. Windows下搭建本地SVN服务器【转】

    转自:http://www.linuxidc.com/Linux/2015-01/111563.htm 本文介绍Windows下搭建本地SVN服务器的方法,网上资料比较少也比较旧,大都介绍的是旧版本S ...