正文 

当前位置： 首页 > java > java教程

手机调试

蒂其之死 蒂其之死     2022-08-21     420

关键词：

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

当前：Oct 27,2014

“真机远程调试”的方法总是在发展，日新月异，有必要在每次更新本文档时标注当前时间及当前相关软件版本

  • 当前最新 桌面版Chrome 版本：MAC：38.0.2125.104，PC：未知
  • 当前最新 Android上的Chrome 版本：38.0.2125.102
  • 当前最新 Android上的UC开发人员版 版本：9.8.9.457
  • 当前最新 iOS：8.1

总览表格

方法 关键点 实现难度（综合考虑搭环境、软件、硬件成本，分数 小 为佳） 调试效果（综合考虑仿真效果、能调试的项等，分数 大 为佳） 可用的桌面设备可用的移动设备及可调试的浏览器 简要步骤
Chorme模拟器 非真机，只是模拟 0 2（新版本加入了模拟网络链接的功能，故上调评分） PC、MAC 无 GO
weinre 安装较为繁琐 3 2 PC、MAC 全部 GO
调试Android上的Chrome 需要FQ 2 4 PC、MAC Android上的Chrome GO
调试Android APP里的webview 需要FQ 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

简要步骤

Chorme模拟器

  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的引用）

其他参考链接

调试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上弹出一个新的标签页，即为调试界面；如果很久都没用响应，请FQ后再试（ 示意图 ）（ 一个免费的梯子服务 ）（ 免费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上弹出一个新的标签页，即为调试界面；如果很久都没用响应，请FQ后再试（ 示意图 ）（ 一个免费的FQ服务 ）

其他参考链接

调试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调试。 （ 示意图 ）

安卓手机在浏览器中调试页面展示

...，请看上篇文章iOS调试。但是不同于iOS的是：此方法安卓手机上必须装Chrome浏览器，但是一般app都是用的手机系统自带的浏览器来展示webview页面，所以并不能针对手机兼容性进行调试。但是调试真机页面展示还是OK的。1、准备... 查看详情

手机调试

“真机远程调试”（remoteinspectwebonrealdevice），是指用桌面电脑（PC或MAC）远程连接上移动设备，通过类似Chrome浏览器开发人员工具的界面，来调试移动设备上运行的网页当前：Oct27,2014“真机远程调试”的方法总是在... 查看详情

浏览器如何进入手机调试模式

参考技术A大家好哦，下面为大家介绍PC端浏览器如何进入手机调试模式。打开浏览器。点击右上角三点，在下拉菜单中选中“工具”选项。在快捷菜单中点击“开发人员工具”。就进入了“手机调试模式”。点击调试区域上面的... 查看详情

华为手机怎么打开usb调试模式？

参考技术A华为手机usb调试打开的具体操作如下：工具：华为P40、HarmonyOS2.0。1、在华为手机上，打开设置选项。2、进入手机设置页面后，打开系统和更新选项。3、进入系统和更新页面后，打开开发人员选项设置项。4、进入开发... 查看详情

安卓手机系统怎样打开usb调试模式

vivo手机首次开启USB调试，需进入设置--系统管理--关于手机--软件版本号或进入设置--我的设备--更多参数，连续点击软件版本号7次，再进入设置--系统管理--开发者选项--进入开启USB调试。部分机型需进入设置--更多设置--关于手... 查看详情

华为手机，手机的usb调试开不起怎么办?

1、手机->设置->关于手机->版本号->点击7次即可开启开发人员选项2、点击返回键->开发人员选项->开启usb调试->点击允许usb调试由于google安全限制，需要进行如上操作才可以打开usb调试如果弹框未出现，请重新插拔... 查看详情

华为手机怎么打开usb调试模式

...第一：电脑下载刷机精灵，若无法开机不能打开USB调试，手机关机状态下同时按住电源键+音量-/电源键+音量+，一直按着不放20秒左右，然后用数据线插入手机，刷机精灵就会自动安装驱动就打开了。第二：用OTG线连接鼠标，然... 查看详情

安卓手机usb调试怎么打开

参考技术A　　作为Android手机，如果我们需要将手机连接电脑传输文件、下载安装应用软件、备份文件甚至ROOT等，都需要打开手机的USB调试。那么大家知道安卓手机USB调试怎么打开呢？下面一起来看看！　　步骤方法　　一、2.1... 查看详情

在我的华为手机上调试时，Android Studio 调试器在断点处崩溃/停止

】在我的华为手机上调试时，AndroidStudio调试器在断点处崩溃/停止【英文标题】：AndroidStudiodebuggercrashes/stopsonbreakpoint,whendebuggingonmyHuaweiphone【发布时间】：2020-06-1415:24:11【问题描述】：调试器到达断点后，应用程序进程停止，并... 查看详情

mac系统上不能调试华为手机

...android开发环境完整的情况下，接入MOTO，SAMSUNG，HTC，ZTE等手机都可以自动识别，并可以在DDMS中查看LOGCAT，唯独华为的手机不可识别。USB开发调试也设置了，在WINDOWS下可以识别，因为有工程模式： 解决方法：在拨号界面输入... 查看详情

移动端手机调试的几种方法

...A很多时候，我们在进行移动端开发时，都是先在PC端使用手机模拟器进行调试，没有问题后，我们才会在手机端的浏览器进行测试，这个时候，如果没有出现问题，皆大欢喜。但是一旦出现问题，我们就很难解决，因为缺乏可视... 查看详情

(最详细)小米手机5c的usb调试模式在哪里开启的经验

经常我们使用安卓手机链上PC的时候，或者使用的有些app比如我们学院营销团队经常使用的app引号精灵，以前的老版本就需要开启USB调试模式下使用，现经常新版本不需要了，如果手机没有开启USB调试模式，PC则不能够成功识别... 查看详情

手机可以连接，但无法调试

是因为usb命令被占用，我刚才用了usb安装apk.切换模式即可E:\\>adbusbrestartinginUSBmode 查看详情

手机可以连接，但无法调试

是因为usb命令被占用，我刚才用了usb安装apk.切换模式即可E:\\>adbusbrestartinginUSBmode 查看详情

微信开发手机在线调试(代码片段)

一站式页面调试、抓包工具。远程调试任何手机浏览器页面，任何手机移动端webview（如：微信，HybirdApp等）。支持HTTP/HTTPS，无需USB连接设备。  01特性 1、页面调试＋抓包2、操作简单，无需USB连... 查看详情

怎么用小米手机调试我写的android程序

参考技术A怎么用小米手机调试我写的android程序下个手机助手，插上手机，自动安装驱动程序。打开你的编辑软件，调试选择部署到手机就行了，手机要打开开发者模式，可调试。如果没找到自己手机，把手机助手关掉，看下进... 查看详情

【原创】安卓开启wifi调试

参考技术A拿手机来调试，一天下来没多久就满电了，怕电池hold不住，找了个远程调试的办法。下面是操作步骤，给有需要的人帮助。1、手机开启USB调试模式2、将手机连接到电脑上3、命令行执行adbtcpip5555（启动手机上的adbd守护... 查看详情

华为手机怎么连接电脑打开了usb调试还是不行

...或换其他电脑连接测试，排查电脑或USB端口问题。第三方手机助手可能出现兼容性问题，建议安装华为手机助手Hisuite来连接电脑，管理手机文件与程序。如果使用第三方手机助手无法连接手机，需要打开了开发者模式：进入设... 查看详情