如何用手机进行本地前端调试

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

 

一般我们会用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呗。