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

第一步：连接电脑与手机

 

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

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

以下内容均为个人学习笔记。

如果你打开的是本地示例的话，你可以在地址栏看到这个地址是以 file:// 开头的，接着本地硬盘上该示例文件的路径。相比之下，如果你查看的是我们在 GitHub 上托管的示例（或其他远程服务器上的示例），Web 地址会以 http:// 或 https:// 开头，说明该文件是通过 HTTP 传输的。

某些示例如果你将其作为本地文件打开的话，它将不会运行。 这可能是由于各种原因，最有可能是：

为了解决异步请求的问题，我们需要通过在本地Web服务器上运行这些示例来测试这些示例。为我们的目的，最简单的方法之一就是使用Python的 SimpleHTTPServer 模块。

默认情况下，这将在本地Web服务器上的端口8000上运行目录的内容。您可以通过转到 localhost:8000 Web浏览器中的URL来访问此服务器。在这里你会看到列出的目录的内容 - 点击你想运行的HTML文件。

注意 ：如果您已经在端口8000上运行了某些东西，则可以通过运行server命令，然后选择另一个端口号（例如 python -m http.server 7800 （Python 3.x）或 python -m SimpleHTTPServer 7800 （Python 2.x））来选择另一个端口。然后您可以访问您的内容 localhost:7800 。

---