如题，如何用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. vue相对路径修改

    如果静态文件不是部署在网站根目录下,vue-cli将给你造成巨大的麻烦. 你不能直接把build好的文件抛进一个目录.你不能直接在本地打开用vue做好的静态网站. 改成相对路径,主要需要做两步. 1. ...

  2. Visual Studio Code 配置C/C++环境

    0. 前言 VS Code 是微软发布一款跨平台的源代码编辑器,其拥有强大的功能和丰富的扩展,使之能适合编写许多语言. 本文面向初学者(但不是纯小白),分享一点我配置C/C++的经验. 本文所有内容均 ...

  3. cmd常用命令行

    新建文件夹或文件 打开磁盘     F: 退出cmd     exit 返回上一级     cd.. 创建文件夹     md 文件夹名 在d盘创建文件夹     md d:\文件夹名 在当前目录打开 ...

  4. 状压dp的题目列表 （一）

    状压dp的典型的例子就是其中某个数值较小. 但是某个数值较小也不一定是状压dp,需要另外区分的一种题目就是用暴力解决的题目,例如UVA818 紫书215 题目列表: ①校长的烦恼 UVA10817 紫 ...

  5. Ubuntu下kafka集群环境搭建及测试

    kafka介绍: Kafka[1是一种高吞吐量[2]  的分布式发布订阅消息系统,有如下特性: 通过O(1)的磁盘数据结构提供消息的持久化,这种结构对于即使数以TB的消息存储也能够保持长时间的稳定性能 ...

  6. 【HDU5785】Interesting [Manacher]

    Interesting Time Limit: 30 Sec  Memory Limit: 256 MB[Submit][Status][Discuss] Description Input Outp ...

  7. JavaScript设置获取和设置属性的方法

    这篇文章主要介绍了JavaScript设置获取和设置属性的方法,学会使用getAttribute.setAttribute的用法,需要的朋友可以参考下   getAttribute 该方法用来获取元素 ...

  8. Linux IO 同步/异步 阻塞/非阻塞

    同步IO:导致请求进程阻塞,直到IO操作完成: 是内核通知我们何时进行启动IO操作,而实际的IO操作需要当前进程本身阻塞完成: 包括:阻塞式IO模型,非阻塞式IO模型,IO复用模型,信号驱动式IO模型 ...

  9. KVM(六)Nova 通过 libvirt 管理 QEMU/KVM 虚机

    1. Libvirt 在 OpenStack 架构中的位置 在 Nova Compute 节点上运行的 nova-compute 服务调用 Hypervisor API 去管理运行在该 Hypervi ...

  10. docker从零开始（三）服务初体验docker compose

    决条件 安装Docker 1.13或更高版本. 获取Docker Compose.在适用于Mac的Docker和适用于Windows的Docker上,它已预先安装,因此您可以随意使用.在Linux系统 ...