各种 真机远程调试 方法 汇总

孤街浪徒 提交于 2020-01-27 22:12:00

“真机远程调试”(remote inspect web on real device),是指用桌面电脑(PC或MAC)远程连接上移动设备,通过类似Chrome浏览器开发人员工具的界面,来调试移动设备上运行的网页

 

https://github.com/jieyou/remote_inspect_web_on_real_device?utm_campaign=email_admin&utm_source=trigger-email&utm_medium=email

 

总览表格

方法 关键点 实现难度(综合考虑搭环境、软件、硬件成本,分数 小 为佳) 调试效果(综合考虑仿真效果、能调试的项等,分数 大 为佳) 可用的桌面设备可用的移动设备及可调试的浏览器 简要步骤
Chrome模拟器 非真机,只是模拟 0 2(新版本加入了模拟网络链接的功能,故上调评分) PC、MAC GO
weinre 安装较为繁琐 3 2 PC、MAC 全部 GO
spy-debugger (简化weinre配置,支持https) 需要桌面设备和移动设备同一网段 2 2 PC、MAC 全部 GO
调试Android上的Chrome 需要翻墙 2 4 PC、MAC Android上的Chrome GO
调试Android APP里的webview 需要翻墙 3 4 PC、MAC Android APP里的webview GO
调试Android上的x5内核(微信等) 安装较为繁琐 3 5 PC、MAC Android上的应用了x5内核的app,如微信、手Q、QQ浏览器等 GO
调试Android上的UC 需要桌面设备和移动设备同一网段 1 3 PC、MAC Android上的UC GO
调试iOS上的Safari 需要MAC(甚至可以无需iOS设备) 2 4 MAC iOS上的Safari GO

简要步骤

Chrome模拟器

  1. 在PC或MAC上打开Chrome浏览器,打开想要调试的页面,然后打开开发人员工具
  2. 点击开发人员工具顶栏上的手机图标,即可开始调试( 示意图 ),一般来说需要重新刷新页面
  3. 在页面顶部可以看到设备选择下拉菜单 Device 和 模拟网络环境的下拉菜单 Network ,及左侧的清除选择按钮和打开关闭 media queries 的按钮( 示意图 )
  4. 打开设置左边的那个类似 >三 的图标,切换到 Emulation 标签,可以更细粒度地调整,来定制化你的模拟( 示意图 )

weinre

过程稍微繁琐,但是这个方案能调试几乎所有平台的所有浏览器,只要能运行js的就行

1. 安装nodejs 
2. 安装weinre到global,即在命令行中运行 npm -g install weinre (MAC可能需要在前面加上 sudo )
3. 获取本机IP地址(PC:开始→运行→cmd,输入 ipconfig ,查看“IPv4地址”字段; MAC:在网络偏好设置内),假设获取到的IP地址为 4.4.4.4
4. 在命令行运行weinre: weinre --boundHost 4.4.4.4 ,其中IP地址为上一步所获取的地址,如果弹出防火墙,请允许访问(示意图 )
5. 在PC或MAC上用浏览器打开 http://4.4.4.4:8080/client/#anonymous ,其中IP地址为第三步所获取的地址( 示意图 )
6. 将移动设备连接到与PC或MAC同一局域网,打开移动设备上的需要调试的浏览器,然后随便打开一个网页。将它保存为书签
7. 修改上述书签,将地址改成:

javascript:(function(e){e.setAttribute("src","http://4.4.4.4:8080/
target/target-script-min.js#anonymous");document.getElementsByTagName("body")[
0].appendChild(e);})(document.createElement("script"));void(0);

,其中IP地址为第三步所获取的地址(复制后请去掉代码中的换行,使之成为一行)
8. 在移动设备浏览器上打开想要调试的页面,然后点击上一步保存的书签,即可在PC或MAC上的页面中的target中找到对应页面,点击可以开始调试( 示意图 )( 示意图 )

更多:

  1. 可以考虑在某个机器上搭建一个统一的weinre服务器,供团队成员共用,此方案我尚未尝试
  2. 在上述第7步开始,可以不采用书签的形式,而是考虑在代码中引入它提供的调试js文件,如 <script src="http://4.4.4.4:8080/target/target-script-min.js#anonymous"></script> (这种情况适用于不能使用书签的场景,如app内的webview、微信中等,但是上线之前要记得移除这个js的引用)

其他参考链接

spy-debugger(集成weinre)

内部集成了weinre,简化了weinre繁琐的配置过程。通过代理的方式拦截所有html自动注入weinre所需的js代码。

1. 安装
Windows: npm install spy-debugger -g
Mac: sudo npm install spy-debugger -g

2. 手机和PC保持在同一网络下(比如同时连到一个Wi-Fi下)

3. 命令行输入spy-debugger,按命令行提示用浏览器打开相应地址。

4. 设置手机的HTTP代理,代理IP地址设置为PC的IP地址,端口为spy-debugger的启动端口。

5. 用手机浏览器访问你要调试的页面即可。

其他参考链接

调试Android上的Chrome

  1. 在Android设备上安装Chrome浏览器(版本>=32,https://play.google.com/store/apps/details?id=com.android.chrome&hl=en )(只有安卓4.0以上才有Chrome)
  2. 开启当前Android设备的USB调试
  3. 在PC或MAC上安装chrome浏览器(版本>=32)和对应的Android设备驱动(如果找不到,可以在这个 列表 内尝试)
  4. 用USB线连接Android设备,在PC或MAC上的chrome地址栏输入 chrome://inspect 然后回车,或通过菜单图标→工具→检查设备,进入调试界面
  5. 勾选界面中的 Discover USB devices ,直到搜索到你的Android设备( 示意图 )
  6. 在移动设备上弹出的是否允许远程调试上,选择“允许”
  7. 在下面的页面列表(将展示已在Android上的chrome中打开的页面),点击对应的 inspect 开始调试
  8. 此时将在桌面版Chrome上弹出一个新的标签页,即为调试界面;如果很久都没用响应,请翻墙后再试( 示意图 )( 一个免费的梯子服务 )( 免费10天稳定梯子服务 )

其他参考链接

调试Android APP里的webview

  1. 通过修改代码,在APP内设置允许远程调试(需安卓版本为4.4及以上): 方法 ,然后安装APP
  2. 开启当前Android设备的USB调试
  3. 在PC或MAC上安装chrome浏览器(版本>=32)和对应的Android设备驱动(如果找不到,可以在这个 列表 内尝试)
  4. 用USB线连接Android设备,在PC或MAC上的chrome地址栏输入 chrome://inspect 然后回车,或通过菜单图标→工具→检查设备,进入调试界面
  5. 勾选界面中的 Discover USB devices ,直到搜索到你的Android设备( 示意图 )
  6. 在移动设备上弹出的是否允许远程调试上,选择“允许”
  7. 在下面的页面列表(将展示已在Android上的chrome中打开的页面),点击对应的 inspect 开始调试
  8. 此时将在桌面版Chrome上弹出一个新的标签页,即为调试界面;如果很久都没用响应,请翻墙后再试( 示意图 )( 一个免费的翻墙服务 )

其他参考链接

调试Android上的x5内核

过程略繁琐,但是这个方案应该是目前调试webview最强大的工具,支持断点调试、控制台打印等。以下步骤以微信6.1举例:

前期准备

  • 下载 TbsSuiteNew.apk 安装到手机
  • 打开微信,进入任意聊天界面,输入框内输入//deletetbs,点发送
  • 打开TbsSuiteNew,安装本地tbs内核( 示意图 )

应用包名 微信:com.tencent.mm,qq:com.tencent.mobileqq,qq空间:com.qzone
我们选择微信即可

  • 启动应用,用微信访问一个页面,停留1分钟左右,目的是让微信来静默安装刚导入进去的tbs_xxxx_inspector.apk包( 示意图 )
  • 一分钟过后打开TbsSuiteNew 检查是否安装成功。( 示意图 )

这里还需要在检查下 打开微信 随便进入一个 webview页面 然后长按页面文字是否有水滴 ,若有则成功

ADB安装

  • 官网下载 android-sdk ,执行tools文件夹下面的android,然后选择android sdk platform tools 安装( 示意图 )
  • 配置android环境变量 vim ~/.bash_profile
export ANDROID_TOOLS=/Users/sherlock/dev/android-sdk-macosx/platform-tools
export PATH=$PATH:$ANDROID_TOOLS
  • 输入source .bash_profile,执行下环境变量;接着在终端输入adb,看是否已经配置ok;
  • usb连接手机,启动调试模式。终端输入adb devices,就能看到已经连接的设备。

有时 adb devices不能显示连接设备,需要拔掉数据线,多插几次,并且退出终端,然后重新打开,重启adb。

python启动调试服务

  • 下载 调试包 ,解压,找到其中的inspector_client20150401 解压,然后进入
  • 执行以下python命令, python ./inspector.py —abd 你自己的adb路径
python ./inspector.py --adb /Users/sherlock/dev/android-sdk-macosx/platform-tools/adb
  • 启动成功,PC打开chrome浏览器,访问 http://localhost:9222/ ;手机打开微信任意webview,就能在chrome看到这个页面的选项卡,点进去就是熟悉的调试界面,请自由的使用~( 示意图 )

其他参考链接

调试Android上的UC

  1. 在Android设备上安装UC浏览器开发版,http://www.uc.cn/business/developer/ ,点击第一行右侧的“安装包下载”( 示意图 )
  2. 获取Android设备的IP,一般在WLAN设置内,假设为 4.4.4.4
  3. 用和手机处于同一网段的PC或MAC访问步骤2获得的IP后加上 :9998 ,如例子中即为 4.4.4.4:9998
  4. 在Android设备上弹出的是否允许远程调试上,选择“允许”( 示意图 ),即可开始调试( 示意图 )

其他参考链接

调试iOS上的Safari

  1. 在iOS设备上打开允许调试:设置→Safari→高级→打开”web检查器“
  2. 在MAC上打开Safari的开发菜单:顶部菜单栏“Safari”→偏好设置→高级→打开”在菜单栏中显示“开发”菜单
  3. 在iOS设备上的Safari浏览器中打开要调试的页面,然后切换到MAC的Safari,在顶部菜单栏选择“开发”→找到你的iOS设备名称→右边二级菜单选择需要调试的对应标签页,即可开始远程调试( 示意图 )
  4. 如果没有iOS设备,也可以在Xcode中模拟一台,点击顶部“Xcode”→“Open Developer Tool”→“iOS Simulator”即可打开一个iOS设备的模拟器,并且模拟器里面Safari打开的页面,也是能通过上个步骤中MAC上的Safari调试。 ( 示意图 )
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!