如何在PC上模拟手机浏览器调试移动端的网页？

很久没有使用安卓手机，所以就用安卓手机浏览器访问一下寻小山博客，突然发现有几个版块显示有一些问题。因为之前一直都是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）设置好后打开就能看到移动端的网页，就可以在电脑上调试移动端网页了。