新开发的网页需要在手机或是模拟机上运行测试,如果手头事件比加紧,那么可以借助 Chrome提供的手机网页预览程序进行简单调试。查看 制作的网页是否能够适合各种手机型号使用。

下面所以下如何使用Chrome调试多类型手机网页。

首先 下载Chrome 浏览器。

在你要调试的网页或是本地页面中。按F12 打开调试器。

工具/原料

  • Chrome浏览器

方法/步骤

  1.  

    打开 仿真面板。如图所示:

  2.  

    可以在 Device 选择设备。

    可以在Screen  设置模拟的屏幕方面的东西,设置分辨率,屏幕尺寸。

    可以在 User Agent 设置 客户端Agent

    可以在 sensors  设置感应等,模拟触屏操作。

  3.  

    配置好之后,点击 Emulate 。开始进行仿真。

    (选择Device需要点击emulate)其余选项是在修改后自动改变。

  4. 4

    如何假设 平板旋转屏幕?

    可以在 screen中,点击分辨率中间的互换按钮就可以了。

    使用Chrome浏览器调试,配置好调试设置之后,可以自由输入 网址查看 在移动设备上的现实情况。

    END

注意事项

  • 如果不出现菜单,下载最新版Chrome浏览器插件。

Chrome调试手机页面的更多相关文章

  1. 通过chrome浏览器调试手机页面(IOS和Android)

    开发PC页面的时候使用chrome浏览器的开发者工具,可以很容易的捕获到页面的dom元素,并且可以修改样式,方便调试,但是手机上却很麻烦,因为手机上没有办法直接打开开发者工具查看元素.其实可以通过将设 ...

  2. 使用fiddler4做代理调试手机页面

    由于一般手机不能改host,手机页面如果涉及到各个域名ip的混合使用,在手机上调试看效果非常麻烦. 使用fiddler4做代理,手机跟电脑连到同一个局域网,手机上网通过电脑做个代理上网,那么一切请求就 ...

  3. 【前端调试手机页面】分享一款便捷的调试工具--spy-debugger

    spy-debugger  :  微信调试,各种WebView样式调试.手机浏览器的页面真机调试.便捷的远程调试手机页面.抓包工具,支持:HTTP/HTTPS,无需USB连接设备. github地址: ...

  4. UC浏览器开发者版调试手机页面

    1 关于RI 目前,在手机上使用浏览器访问网页,无法便捷地进行网页语言调试.手机屏幕相对较小且操作不便,直接在手机上进行网页数据调试不太现实. 因此,我们使用技术将手机网页调试信息分离,实现一种能在大 ...

  5. Weinre(pc调试手机页面)

         Weinre是一款基于Web Inspector(Webkit)的远程调试工具,借助于网络,可以在PC上直接调试运行在移动设备上的远程页面,中文意思是远程Web检查器,有了Weinre,在P ...

  6. 使用weinre调试手机页面

    阅读目录 介绍Weinre 安装Weinre 通过Weinre调试页面 启动target 介绍Weinre Weinre(Web Inspector Remote),是一种远程调试工具.功能与Fire ...

  7. chrome调试手机webview中页面

    http://blog.csdn.net/freshlover/article/details/42528643 注: 1. 可以调试真机上页面(USB连接)和虚拟机上页面 2. 手机系统需要4.4+ ...

  8. 利用chrome调试手机网页

    1.pc端安装最新的chrome 2.手机端安装最新的chrome ( Android机 )ms不需要 3.USB连接线 4.打开电脑的chrome 在地址栏输入 chrome://inspect

  9. APICloud和海马玩模拟器结合调试手机页面

    https://blog.csdn.net/pleasecallme_522/article/details/54577904

随机推荐

  1. [翻译]开发文档:android Bitmap的高效使用

    内容概述 本文内容来自开发文档"Traning > Displaying Bitmaps Efficiently",包括大尺寸Bitmap的高效加载,图片的异步加载和数据缓存 ...

  2. H5单页面手势滑屏切换原理

    H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...

  3. Java基础Map接口+Collections工具类

    1.Map中我们主要讲两个接口 HashMap  与   LinkedHashMap (1)其中LinkedHashMap是有序的  怎么存怎么取出来 我们讲一下Map的增删改查功能: /* * Ma ...

  4. SQL:指定名称查不到数据的衍伸~空格 换行符 回车符的批量处理

    异常处理汇总-数据库系列  http://www.cnblogs.com/dunitian/p/4522990.html 先看看啥情况 复制查询到的数据,粘贴一下看看啥情况 那就批量处理一下~ 就这样 ...

  5. PC分配盘符的时候发现==》RPC盘符不可用

    服务器汇总:http://www.cnblogs.com/dunitian/p/4822808.html#iis 服务器异常: http://www.cnblogs.com/dunitian/p/45 ...

  6. UWP开发之Mvvmlight实践九:基于MVVM的项目架构分享

    在前几章介绍了不少MVVM以及Mvvmlight实例,那实际企业开发中将以那种架构开发比较好?怎样分层开发才能节省成本? 本文特别分享实际企业项目开发中使用过的项目架构,欢迎参照使用!有不好的地方欢迎 ...

  7. 如何避免git每次提交都输入密码

    在ubuntu系统中,如何避免git每次提交都输入用户名和密码?操作步聚如下:1: cd 回车: 进入当前用户目录下:2: vim .git-credentials (如果没有安装vim 用其它编辑器 ...

  8. PHP 获取 特定时间范围 类

    目录  前序 用途 功能及事项 使用方法 代码及注释 前序: 总体来说,我更应该是一个 android 移动开发者,而不是一个 phper,如果说只做移动端的 APP ,我也不会学这么多,这 2年来, ...

  9. SDWebImage源码解读 之 SDWebImageCompat

    第三篇 前言 本篇主要解读SDWebImage的配置文件.正如compat的定义,该配置文件主要是兼容Apple的其他设备.也许我们真实的开发平台只有一个,但考虑各个平台的兼容性,对于框架有着很重要的 ...

  10. python 入门笔记

    1.pip包安装 pip install *** pip 中http和https代理设置(/etc/profile) 2.强制保存 :w !sudo tee % 3.cffi是python调用C的包 ...