web页面在移动端真机调试的几种方法

        大家在开发网页的过程中，一定会有很多问题，其中一个就是模拟器上的页面和移动端不一样，小到样式，大到交互。这个时候我们就想，要是能有个办法能在上线前真机调试就好了，我们能提前发现错误，提前解决问题！下面由小编分享几种方法，希望能让各位在开发的道路上越走越远！

        一：同一局域网，要求手机和需要调试的项目在同一局域网，把需要调试的网页网址在手机端打开，点点点就可以了，这种方法虽然简单，但是没法看具体哪个地方出了问题，导致真机和模拟器上的内容不一样！由于前端开发者用的最多的还是浏览器自带的调试工具，例如chrome的devtools，firefox的调试工具，那么我们想要是能一边真机上调试，一边对比源码就好了！接下来我们看第二种方法。

        二：数据线真机调试，我们以安卓为例，需要先打开开发者模式，如果你不知道如何做，看下面，找到安卓机的设置，点击关于手机，连续点多次版本号，手机会显示开发者模式！然后使用数据线把安卓机和电脑连接，启动usb调试，接着我们就可以在手机上访问要调试的项目了！其实就是数据线替代了局域网的功能！到这一步，我们基本完成了项目访问，接下来我们只需要下载点小工具，让我们能使用chrome的devtool就好了！手机端下载个chrome Beta，当然也可以下载其他系列的chrome，接着手机端打开chrome，同时在pc端打开chrome，pc端地址栏输入chrome://inspect/#devices，进入一个调试网页，如果你能在pc端看到手机的相关信息，你就成功了！接下来就是在Chrome Beta右侧输入url，点击open，手机端chrome自动跳转页面地址，大家可以看下面的图，我们打开的是百度首页，在chrome Beta字段下面有网址，网址下面有 inspect等按钮，聪明的你一定想到了，点击inspect，我们就可以实现联动了，这个时候无论我们操作手机上的网页还是电脑上的网页，都可以实现联动！大家看第二张图，是不是很清楚的看到了devtools，上面有很多我们熟悉的按钮（network，console等），于是我们实现了上面说的对比源码调试这个功能！

        注意：这里有2个要注意的地方，第一个注意点是不同版本的安卓手机开发者模式打开方式不一样，需要具体手机具体对待。第二个注意点是上面只讲了安卓手机，简单的讲讲ios该如何做！ios大多用了safari，如果要用chorme代理，需要ios_webkit_debug_proxy，剩下的差不多，有兴趣的同学，请自行google！另外，如果我们想在手机端直接用调试工具，可以使用vconsole！