在移动设备上使用Chrome浏览器通过USB读取PC上的HTML文件?

时间:2018-09-19 02:18:37

标签: android google-chrome web-applications adb mobile-devices

当前,我正在开发一个网页应用程序,我想在我的移动设备(具体来说是Android)上对其进行测试。我需要在实际设备上运行它,仅在PC Chrome上使用仿真器对其进行测试是不够的。在手机上打开URL时,我知道如何使用ADB在PC上检查运行结果,这非常有帮助;但是,每次更改网页时,我仍然需要将文件上传到远程服务器,以便手机上的Chrome打开它。我想知道在通过USB连接PC时,是否可以使用手机直接打开PC上的HTML文件?谢谢。

2 个答案:

答案 0 :(得分:0)

答案:Chrome’s Remote Debugging

Chrome的远程调试,您可以将计算机的Chrome开发人员工具连接到运行移动Chrome的Android设备。有了这个,您就可以完全使用移动浏览器的Chrome开发者工具!

您需要什么:

您计算机上的Chrome浏览器 在您的Android设备(Android 4.0及更高版本)上运行的Chrome移动设备 USB电缆(可能还有计算机上已安装的移动设备的驱动程序)

步骤1:使用Chrome查找移动设备

将移动设备连接到计算机。在移动设备上,转到“设置”>“开发人员”选项,然后启用“ USB调试”。

看不到开发者选项?转到“设置”>“关于手机”,然后点击“内部版本号”几次。您应该会得到提示,提示您要成为“开发人员”需要点击的次数。

在计算机上,启动Chrome,然后启动开发人员工具(Cmd / Ctrl + Opt / Alt + i)。在带有不同标签的行中,单击右侧的三个点以加载更多选项。在“更多工具”下,您应该找到一个名为“远程设备”的选项。

将您的移动设备插入计算机;这将立即在其上引发授权提示。除非您允许,否则设备将在开发工具中处于“待定授权”状态。单击确定。

在您确认之前,设备将处于“待授权”状态 该设备现已获得授权,可以开始使用! Chrome开发者工具现在应该列出您的设备名称和类型。

第2步:检查

设置完成后,您现在可以直接在计算机的Chrome浏览器中检查标签了!

在移动设备上启动Chrome。 在计算机上的chrome开发人员工具中,点击您的设备名称。它应该列出您在移动设备上打开的不同标签。单击要调试的选项卡的检查按钮。 Chrome应该会打开一个新窗口,左侧是您的移动浏览器标签的实时版本,右侧是您所有常规的开发者工具。

就是这样!

您现在可以访问开发人员工具的所有调试优势…现在可以用于移动设备!

图片来源和教程:Debug your website on a mobile device

答案 1 :(得分:0)

我发现自己在问同样的问题,通过一些实验,我找到了一个可行的解决方案。

首先,像安格斯的回答一样照常连接设备。诀窍是Chrome的DevTools的另一个功能,即端口转发。进入远程设备标签,然后进入设置,然后勾选端口转发框。我将在这里为两端使用端口8000,但是您可以根据需要更改它们。点击添加规则,然后为设备端口填写8000,为本地地址填写localhost:8000。确认,并设置您的端口转发。

对于服务器,如果只需要一个简单的目录镜像,我建议使用类似Python's SimpleHTTPServer module(在Python 3中为http.server)的方法,您可以在目标目录中像这样运行:

python -m SimpleHTTPServer
python3 -m http.server

服务器运行后,您可以在手机上或通过Chrome浏览器使用URL localhost:8000或设备使用的任何端口打开新标签页。这样,该结构下的所有文件都将可用。

了解更多:https://developers.google.com/web/tools/chrome-devtools/remote-debugging/local-server