如题，如何用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. 代码管理工具 （含git、npm、gulp）

    1 Git 分布式代码管理工具(基于Linux,可在本地进行提交)代码同时储存在本地和服务器中 ① Git基本操作命令 (1)初始化,创建初始化仓库 git init ------- 文件初始化,初始 ...

  2. The 2017 ACM-ICPC Asia East Continent League Final记录

    首先感谢tyz学弟的麻麻-给我们弄到了名额- 然后就开始了ACM ECLFinal的玩耍,A*仙人掌可是立了flag要好好打的- 试机赛好像就全是GCJ kickstart的原题,然后AK了但是由于一 ...

  3. HDU 4320 Arcane Numbers 1 (数论)

    A - Arcane Numbers 1 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64 ...

  4. bzoj 1301 后缀数组

    比较裸的后缀数组. /************************************************************** Problem: User: BLADEVIL La ...

  5. 【eclipse使用git】eclipse使用私钥提交项目

    初次安装git需要配置用户名和邮箱,否则git会提示:please tell me who you are. 你需要运行命令来配置你的用户名和邮箱: $ git config --global use ...

  6. C++11 lambda函数符

    #include<iostream> #include<vector> #include<algorithm> #include<cmath> #inc ...

  7. Mac-sublime text 3破解版

    在史蒂芬周下载破解版 安装package control import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f ...

  8. mysql的expain（zz)

    两张表,T1和T2,都只有一个字段,id int.各插入1000条记录,运行如下语句: explain SELECT t1.id,t2.id FROM t1 INNER JOIN t2 ON t1.i ...

  9. pytest学习（2）

    可以把多个test放在一个class里, class TestClass(object): def test_one(self): x = "this" assert 'h' in ...

  10. 可折叠的listview 之ExpandableListView基本使用

    先看效果 demo实现 其他的方法和ListView的方法一样,下面来看看具体demo的实现 首先布局文件很简单,就一个控件为: <?xml version="1.0" en ...