很久没有使用安卓手机,所以就用安卓手机浏览器访问一下破折君博客,突然发现有几个版块显示有一些问题。因为之前一直都是iPhone测试发现都没有问题,安卓并没有取做测试。为了将这个问题解决,所以就想要找一个移动端调试工具。相信对于做过前端的小伙伴对网页调试工具和方法都很熟悉,比如Chrome开发者工具,firebug,等等。

移动端调试工具

但是现在网站都重心转向移动端,找了很久发现最简单方便的还是使用chrome自带的移动端模拟器,这边说下如何利用Chrome自带的开发者工具来进行移动设备的真机调试,推荐使用这种方法的原因一个是最熟悉,还有一个是这种方式不需要在移动设备上安装任何软件。

使用谷歌浏览器自带模拟器的具体操作步骤如下:

(1)打开chrome开发者工具,按F12或者(Fn+F12),然后找到右上角的齿轮按钮,打开设置面板,选择Overrides,勾上Show ‘Emulation’ view in console drawer(在控制台视图中显示“仿真”)。

(2)然后关闭设置面板,选择Elements面板(非Console就可以),找到右上角打开控制台面板,选择控制台面板里的Emulation面板,右边有很多选项,选择一个点击Emulate就可以了,Reset按钮能恢复到默认状态。

(3)可以选择iPhone、ipad、Galaxy等移动设备进行模拟,另外还可以在“Add custom devices”中添加自己想测试的设备信息。

(4)设置好后打开就能看到移动端的网页,就可以在电脑上调试移动端网页了。

也许你也感兴趣:

作者:
该日志由 破折君 于2019年12月02日发表在Html5分类下, 通告目前不可用,你可以至底部留下评论。
转载请注明: 如何在PC上模拟手机浏览器调试移动端的网页?
关键字: , ,
【上一篇】

2 篇回应 (访客:1 篇, 博主:1 篇)

  1. 含鄱口 说道:

    移动端调试神器vconsole和手机端网页的调试工具Eruda没试试吗?

    #1楼

发表评论

插入图片