[技术分享]Web 页面在移动端真机调试的几种方法

shangjin发布于3 个月前 • 206 次阅读

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

        一:同一局域网,要求手机和需要调试的项目在同一局域网,把需要调试的网页网址在手机端打开,点点点就可以了,这种方法虽然简单,但是没法看具体哪个地方出了问题,导致真机和模拟器上的内容不一样!由于前端开发者用的最多的还是浏览器自带的调试工具,例如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等),于是我们实现了上面说的对比源码调试这个功能!

image

image

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

共收到 0 条回复