在PC或MAC上打开Chrome浏览器，打开想要调试的页面，然后打开开发人员工具

August 29, 2016 · View on GitHub

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

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

h2. 总览表格

h2. 简要步骤

h3. Chrome模拟器

在PC或MAC上打开Chrome浏览器，打开想要调试的页面，然后打开开发人员工具

点击开发人员工具顶栏上的手机图标，即可开始调试（ "示意图":images/Chrome模拟器_4.png ），一般来说需要重新刷新页面

在页面顶部可以看到设备选择下拉菜单 @Device@ 和模拟网络环境的下拉菜单 @Network@ ，及左侧的清除选择按钮和打开关闭 @media queries@ 的按钮（ "示意图":images/Chrome模拟器_5.png ）

打开设置左边的那个类似 @>三@ 的图标，切换到 @Emulation@ 标签，可以更细粒度地调整，来定制化你的模拟（ "示意图":images/Chrome模拟器_6.png ）

h3. weinre

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

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

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中找到对应页面，点击可以开始调试（ "示意图":images/weinre_3.jpg ）（ "示意图":images/weinre_4.png ）

在上述第7步开始，可以不采用书签的形式，而是考虑在代码中引入它提供的调试js文件，如 @@ （这种情况适用于不能使用书签的场景，如app内的webview、微信中等，但是上线之前要记得移除这个js的引用）

其他参考链接

http://people.apache.org/~pmuellr/weinre-docs/latest/Installing.html

h3. spy-debugger(集成weinre)

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

安装 Windows: @npm install spy-debugger -g@ Mac: @sudo npm install spy-debugger -g@
手机和PC保持在同一网络下（比如同时连到一个Wi-Fi下）
命令行输入spy-debugger，按命令行提示用浏览器打开相应地址。
设置手机的HTTP代理，代理IP地址设置为PC的IP地址，端口为spy-debugger的启动端口。
用手机浏览器访问你要调试的页面即可。

其他参考链接

https://github.com/wuchangming/spy-debugger

h3. 调试Android上的Chrome

在Android设备上安装Chrome浏览器（版本>=32，https://play.google.com/store/apps/details?id=com.android.chrome&hl=en ）（只有安卓4.0以上才有Chrome）

开启当前Android设备的USB调试

在PC或MAC上安装chrome浏览器（版本>=32）和对应的Android设备驱动（如果找不到，可以在这个 "列表":http://developer.android.com/tools/extras/oem-usb.html 内尝试）

用USB线连接Android设备，在PC或MAC上的chrome地址栏输入 @chrome://inspect@ 然后回车，或通过菜单图标->工具->检查设备，进入调试界面

勾选界面中的 @Discover USB devices@ ，直到搜索到你的Android设备（ "示意图":images/调试Android上的Chrome_1.png ）

在移动设备上弹出的是否允许远程调试上，选择“允许”

在下面的页面列表（将展示已在Android上的chrome中打开的页面），点击对应的 @inspect@ 开始调试

此时将在桌面版Chrome上弹出一个新的标签页，即为调试界面；如果很久都没用响应，请翻墙后再试（ "示意图":images/调试Android上的Chrome_2.png ）（ "一个免费的梯子服务":http://lfjs.me/gwrbea ）（ "免费10天稳定梯子服务":http://honx.in/_U6fKbIKo102euHSx ）

其他参考链接

https://developer.chrome.com/devtools/docs/remote-debugging

h3. 调试Android APP里的webview

通过修改代码，在APP内设置允许远程调试（需安卓版本为4.4及以上）： "方法":https://developer.chrome.com/devtools/docs/remote-debugging#configure-webview ，然后安装APP

开启当前Android设备的USB调试

在PC或MAC上安装chrome浏览器（版本>=32）和对应的Android设备驱动（如果找不到，可以在这个 "列表":http://developer.android.com/tools/extras/oem-usb.html 内尝试）

用USB线连接Android设备，在PC或MAC上的chrome地址栏输入 @chrome://inspect@ 然后回车，或通过菜单图标->工具->检查设备，进入调试界面

勾选界面中的 @Discover USB devices@ ，直到搜索到你的Android设备（ "示意图":images/调试Android上的Chrome_1.png ）

在移动设备上弹出的是否允许远程调试上，选择“允许”

在下面的页面列表（将展示已在Android上的chrome中打开的页面），点击对应的 @inspect@ 开始调试

此时将在桌面版Chrome上弹出一个新的标签页，即为调试界面；如果很久都没用响应，请翻墙后再试（ "示意图":images/调试Android上的Chrome_2.png ）（ "一个免费的翻墙服务":http://lfjs.me/gwrbea ）

其他参考链接

https://developers.google.com/chrome-developer-tools/docs/remote-debugging

h3. 调试Android上的x5内核

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

前期准备

下载 "TbsSuiteNew.apk":http://res.imtt.qq.com///tbs_inspect/TbsSuiteNew.zip 安装到手机
打开微信，进入任意聊天界面，输入框内输入//deletetbs，点发送
打开TbsSuiteNew，安装本地tbs内核（ "示意图":images/调试Android上的x5内核_1.png ）

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

启动应用，用微信访问一个页面，停留1分钟左右，目的是让微信来静默安装刚导入进去的tbs_xxxx_inspector.apk包（ "示意图":images/调试Android上的x5内核_2.png ）
一分钟过后打开TbsSuiteNew 检查是否安装成功。（ "示意图":images/调试Android上的x5内核_3.png ）

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

ADB安装

官网下载 "android-sdk":http://developer.android.com/sdk/installing/index.html ，执行tools文件夹下面的android，然后选择android sdk platform tools 安装（ "示意图":images/调试Android上的x5内核_4.png ）
配置android环境变量 vim ~/.bash_profile

bc. export ANDROID_TOOLS=/Users/sherlock/dev/android-sdk-macosx/platform-tools export PATH= $PATH:$ ANDROID_TOOLS

输入source .bash_profile，执行下环境变量；接着在终端输入adb，看是否已经配置ok；
usb连接手机，启动调试模式。终端输入adb devices，就能看到已经连接的设备。

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

python启动调试服务

下载 "调试包":http://res.imtt.qq.com///tbs_inspect/wx_sq_webview_debug.zip ，解压，找到其中的inspector_client20150401 解压，然后进入
执行以下python命令， python ./inspector.py --abd 你自己的adb路径

bc. python ./inspector.py --adb /Users/sherlock/dev/android-sdk-macosx/platform-tools/adb

启动成功，PC打开chrome浏览器，访问 http://localhost:9222/ ；手机打开微信任意webview，就能在chrome看到这个页面的选项卡，点进去就是熟悉的调试界面，请自由的使用～（ "示意图":images/调试Android上的x5内核_5.png ）

其他参考链接

http://www.jianshu.com/p/ccf124f1f74b

h3. 调试Android上的UC

在Android设备上安装UC浏览器开发版，http://www.uc.cn/business/developer/ ，点击第一行右侧的“安装包下载”（ "示意图":images/调试Android上的UC_1.png ）

获取Android设备的IP，一般在WLAN设置内，假设为 @4.4.4.4@

用和手机处于同一网段的PC或MAC访问步骤2获得的IP后加上 @:9998@ ，如例子中即为 @4.4.4.4:9998@

在Android设备上弹出的是否允许远程调试上，选择“允许”（ "示意图":images/调试Android上的UC_2.png ），即可开始调试（ "示意图":images/调试Android上的UC_3.png ）

其他参考链接

http://www.uc.cn/business/download/developer.pdf

h3. 调试iOS上的Safari

在iOS设备上打开允许调试：设置->Safari->高级->打开”web检查器“

在MAC上打开Safari的开发菜单：顶部菜单栏“Safari”->偏好设置->高级->打开”在菜单栏中显示“开发”菜单

在iOS设备上的Safari浏览器中打开要调试的页面，然后切换到MAC的Safari，在顶部菜单栏选择“开发”->找到你的iOS设备名称->右边二级菜单选择需要调试的对应标签页，即可开始远程调试（ "示意图":images/调试iOS上的Safari_1.png ）

如果没有iOS设备，也可以在Xcode中模拟一台，点击顶部“Xcode”->“Open Developer Tool”->“iOS Simulator”即可打开一个iOS设备的模拟器，并且模拟器里面Safari打开的页面，也是能通过上个步骤中MAC上的Safari调试。（ "示意图":images/调试iOS上的Safari_2.png ）