如题，如何用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. 转：Linux 目录结构和常用命令

    转自:http://www.cnblogs.com/JCSU/articles/2770249.html仅为学习参考之用 一.Linux目录结构 你想知道为什么某些程序位于/bin下,或者/sbin, ...

  2. 利用saltstack初始化OpenStack服务器环境

    目录架构图如上图所示 sls脚本详情如下: Sync_Host: file.managed: - name: /etc/hosts - source: salt://state/files/hosts ...

  3. 之江学院第0届校赛 qwb与支教 （容斥公式）

    description qwb同时也是是之江学院的志愿者,暑期要前往周边地区支教,为了提高小学生的数学水平.她把小学生排成一排,从左至右从1开始依次往上报数. 玩完一轮后,他发现这个游戏太简单了.于是 ...

  4. bzoj 1083 最小生成树

    裸的最小生成树. /************************************************************** Problem: User: BLADEVIL Lan ...

  5. UVA 10303 How Many Trees? (catlan)

    刚开始没看出时卡特兰数列.直接套高精度版 #include <map> #include <set> #include <list> #include <cm ...

  6. Vmware中安装和卸载Linux 16.04.3

    1.先去这个链接 https://www.ubuntu.com/download ,下载ubuntu镜像,也就是下图的download选项 2.下载后到虚拟机里创建一个新的虚拟机,然后按照博客 htt ...

  7. 《简明python教程》笔记三

    图形软件(GUI工具) 可供选择的GUI: 一.PyQT 是Qt工具包的python绑定.Qt工具包是构建KDE的基石.linux下使用免费,windows下使用收费. 二.PyGTK 是GTK+工具 ...

  8. win32 读取文本文件，并进行字符串分割和存储

    //分割字符      char *p;//p存放临时行指针 q存放临时每一行的列指针      char *hang[100]={0};//存储第一行      char *lie[300]={0} ...

  9. Asp.net中的一个判断session是否合法的做法

    1 if (Session["UserID"] == "" || Session["UserID"] == null) 2 { 3     ...

  10. owasp zap 安全审计工具 的fuzzer使用

    owasp zap 安全审计工具 的fuzzer可用场景如下: 一.SQL注入和XSS攻击等 1.选中请求中需要检查的字段值,右键-Fuzzy 2.选中file fuzzer功能(包括SQL注入,xs ...