在做前端开发时需要进行真机测试和调试,除了进行远程调试,我们能不能在本地就实现手机调试呢?



 



一般我们会用chrome来模拟移动设备显示效果,但还是有很多情况到了移动设备上才会出现。所以在进行响应式开发时,最好应该先进行移动设备 真机调试



 



先说明一下我的环境:Win 10 + Android手机 + chrome(desktop&app)



 



第一步:连接电脑与手机



 



1. 手机打开“开发者选项”



安卓手机进入“设置”—>“关于手机”—> 在“版本号”上点7次(或其他的版本号位置,一个个试肯定有……)



然后“开发者选项”就出现在“设置”里面了。



 



2. 手机打开“USB调试”



进入“开发者选项”—>打开“USB调试”(如果想手机长亮还要打开“不锁定屏幕”)



 



3. 连接并允许调试



用USB数据线将手机与电脑连接—>手机上出现“允许该电脑调试”时点“允许”(可能会晚点出现,先去第二步)



 



第二步:用电脑启动手机浏览



 



1. 打开chrome的inspect



在电脑chrome地址栏中输入chrome://inspect—>勾选“Discover USB devices”



如无意外在Devices中会出现手机型号。



如果没有,再确认下:开发者选项、USB调试、允许该计算机调试



 



2. 手机打开chrome app



在手机中打开chrome,这时电脑的chrome inspect中会出现输网址的地方。



 



3. 测试手机浏览的控制



在电脑chrome inspect输入框中随便输个在线网址,点Open,手机chrome就会打开该页面。用电脑chrome可以控制刷新、关闭,但是用来调试的inspect点开是空白,应该是被墙了。



 



第三步:用手机测试本地页面



 



1. 开启本地服务器



对的,很遗憾手机chrome不能进行静态页面的调试。



所以必须开本地服务器,所幸现在有gulp+webserver,用法这里不讲了。



总之,完成这一点后,你应该在电脑上用 http://localhost 来浏览网页了。



 



2. 电脑chrome开启端口转发



在chrome inspect中点“Port forwarding...”—>把端口和localhost链接输进去(比如8000和localhost:8000)—>勾选“Enable port forwarding”—>Done



 



3. 打开手机浏览localhost



如:输入http://localhost:8000 点Open



这样手机就能打开页面了。



 



第四步:恢复inspect功能进行调试



还能怎么办,FQ呗。