ubuntu上使用chrome进行手机页面调试的方案

虽然大多数时候我们都可以使用chrome的开发者工具,通过模拟手机来调试手机页面,但是对于一些特殊的动作是无法在电脑上做的,比如说手机的多点触控操作,在页面上模拟双指缩放时没法使用鼠标完成,因此需要通过手机来进行真机调试,但是调试的同时,我们希望可以看到调试信息,希望可以实时修改查看。这个时候就可以借助chrome的远程设备使用手机chrome打开页面,在电脑chrome中调试。具体的调试过程在
远程调试 Android 设备使用入门
可以看到。下面只是记录ubuntu下使用该方案遇到的问题。

一.打开远程调试界面

打开chrome的控制台,点击右上角的列表按钮,找到more tool->remote device即可。

二.找不到已连接的手机

这个在windows上一般比较容易,因为基本上各种安全软件都会自动帮助用户连上,在Ubuntu下我们需要使用adb来连接手机。使用adb start-server来开启服务监听手机的连接。如果出现权限错误,可以adb kill-server,再adb start-server。只要手机上弹出连接确认框,即说明已经连上了。

三.Inspect的页面空白

这个问题困扰了我很久,因为我在windows上是没有问题的,后来查了一下,是因为chrome需要翻墙才行,在windows上我使用的是shadowsocks的pac方案,linux上则是自己建立的翻墙规则,导致有遗漏。所以如果出现Inspect页面空白,可以尝试全局翻墙

四.如果在手机上访问开发机器上的服务

这个问题有这种解决方案。
1.如果手机和电脑在同一个局域网内,可以直接访问电脑的ip地址即可。但是http服务监听的地址不能只是localhost,应该是电脑的ip地址或者0.0.0.0
2.使用远程设备的端口转发功能,设置如下图
端口转发设置
成功的界面如下
端口转发设置成功
这样,我在手机上访问localhost:4200,相当于在电脑上访问localhost:4200,在手机上访问localhost:1025,相当于在电脑上访问localhost:80。需要注意的是,端口转发的左侧输入框端口号必须大于1024,这是因为小于等于1024的端口号是被划分出来特殊使用的。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据