3大mobile浏览器远程调试

做移动互联网开发呢，比较头疼的可能就是调试问题了，我是这么感觉的。因此，我对市面上比较流行的远程调试方法做了总结，对比了 Firefox、Chrome、Opera 三大浏览器的远程调试工具，大家各取所需，希望能对大家的日常工作有多帮助。

一、Opera 远程调试

准备工作：

• 下载桌面版 Opera
• 下载欧朋 HD 最新版
• 下载欧朋 HD 模拟器

方式一、 通过欧朋 HD 模拟器和 Opera Dragonfly 进行远程调试

1. 安装下载欧朋 HD 模拟器、桌面版 Opera、欧朋 HD。
2. 打开 Opera，“Ctrl + Shift + i” 打开调试工具 Dragonfly。

   

3. 点击右上 “远程调试设置”，默认端口 “7001” 可以不改，点击 “应用”。

   

4. 出现 “在端口7001上等待主机连接”。

   

5. 运行欧朋 HD 模拟器，随便选择左侧 “Profile” 里的一个设备，我选择 “HTC Desire”，点击 “Launch” 运行。

   

6. 在模拟器地址栏输入 opera:debug，见到以下页面，因为是本机调试，IP 地址和端口号用默认即可，点击连接。

   

7. 出现以下页面代表连接成功。

1. 在模拟器打开一个页面，在 Dragonfly 右上点击 “选择环境”，下来菜单中选择模拟器打开的页面。

   

2. OK，可以在电脑上调试手机网页啦～ 在 Dragonfly 选择元素，模拟器可以看到所选区域变化。

   

3. 在 Dragonfly 修改元素的样式，模拟器立即生效，同样修改 JS 也会立即生效。

   
   

方式二、 通过 Wi-Fi 连接进行远程调试

方式一涵盖了远程调试的大体步骤，但 Wi-Fi 连接方式更能体现远程调试的优越性。

1. 手机和电脑连接同一 Wi-Fi 地址。
2. 电脑打开 Opera，“Ctrl + Shift + i” 打开 Dragonfly，点击 “远程调试设置”。

   

3. 端口可以默认，点击 “应用” 出现以下页面。

   

4. “cmd” ― “ipconfig” ― 找到电脑的 IP 地址，记下来备用。

   

5. 打开手机安装的欧朋 HD，地址栏输入 opera:debug，回车，出现以下页面，在 IP 地址处填入电脑的 IP 地址，点击 “连接”。

   
   

6. 显示 “断开连接”，OK 连上了，Enjoy debuging～ 剩下的调试可以参照方式一的 8-10 步骤。

   

参考资料

• Remote Debugging | Documentation | Opera Dragonfly – Opera’s built-in developer tools

二、Firefox and Firefox for Android 远程调试

首先远程调试需要桌面版的 Firefox 和移动版的 Firefox，手机通过 USB 线连接电脑。（Firefox 15+ ，Android 2.2+ 才支持远程调试)

• Firefox 下载
• Firefox for Android 下载或在 Google Play 搜索 Firefox

1. 首先确保你的桌面版浏览器是 Firefox 15+。

   

2. 在桌面版 Firefox 地址栏输入 about:config，会提示你确认，点击 “我保证会小心”。

   

3. 在出现的列表搜索框输入 “remote-” 进行筛选，找到 “devtools.debugger.remote-enabled”，双击把值置为 “true”。

   

4. 重启桌面版 Firefox，在 “菜单” ― “工具” ― “Web开发者” 中多了一项 “远程调试器”。

   

5. 打开手机版 Firefox（建议装最新版），查看版本，“菜单” ― “Settings（设置）” ― “About Firefox”，当前最新是 Firefox 15.0。
6. 地址栏输入 about:config，搜索框输入 debugger，点击 “Add a New Setting”，弹出的框都选择 OK 或取消。

   

7. “devtools.debugger.force-local” 点击 “toggle” 置为 “false”，“devtools.debugger.remote-enabled” 点击 “toggle” 置为 “true”，开启了移动版 Firefox 的远程调试（“devtools.debugger.remote-port” 调试端口号可以设置，默认为 “6000”）。

   

8. 找到手机所连 Wi-Fi 的 IP 地址，一般步骤：“系统设置” ― “点击连接的 WLAN” ― “IP 地址”（不同的手机步骤稍有不同）。
9. 重启移动版 Firefox，随意打开一个网址，同时打开桌面版 Firefox，点击桌面版 Firefox 菜单：“工具” ― “Web开发者” ― “远程调试器”，弹出对话框，把 “localhost” 换成以上找到的 Wi-Fi IP（电脑和手机必须连接同一个 Wi-Fi），点击确定。

   

10. 连接成功的话，手机会弹出对话框，点击 OK。

    

11. 随后，在桌面版 Firefox 即能看到手机网页的 Javascript 文件，可以设断点调试了。

    

缺点：貌似只能调试 JS，手机访问新的网页，刷新页面都需要重新建立连接……

参考资料

• Remote Debugging on Firefox for Android ✩ Mozilla Hacks – the Web developer blog
• Mark Finkle’s Weblog » Firefox for Android: Remote Debugging is Here

三、Chrome and Chrome Mobile 远程调试

准备工作：

• Android SDK 下载安装
• Chrome 下载安装
• 有一部 Android 手机或安装 Android 虚拟机
• 移动版 Chrome：Google Play 搜索 Chrome

1. Android 设备通过 USB 连接电脑，要访问 Android 设备还需要 Android Debug Bridge(adb)，先前安装的 Android SDK 中包含此款命令行工具。在 Windows 中点击 “开始” ― “运行” ― “cmd” 找到 Android SDK 里的 platform-tools 目录。

   

2. 在移动设备上打开 Chrome，“设置” ― “开发人员工具” ― “启用 USB 网页调试”。

   

3. 在 Windows 下输入 adb devices 看下面的列表中有没有你的机器，如果没有检查一下 Android 设备的 USB 调试是否打开。

   

4. 在 platform-tools 目录下输入：adb forward tcp:9222 localabstract:chrome_devtools_remote

   

5. 在桌面版 Chrome 输入 localhost:9222，页面出现移动版 Chrome 访问的页面。

   

6. 点击 “inspectable pages” 下面的任一页面进入调试页面，移动设备页面可以在桌面调试了。

   

缺点：准备工作有点多，需要掌握 adb 命令，学习成本高，最要命的 ― 最后的调试页面 “appspot.com” 需要代理才能访问……

参考资料

• Remote Debugging – Google Chrome Mobile — Google Developers
• Using Hardware Devices | Android Developers

总之，以上介绍了多种远程调试方式，至于哪个好用，需要在实践中验证，我个人推荐 Opera 的远程调试，步骤不复杂，调试功能强悍。

http://dev.oupeng.com/articles/remote-debugging-with-browsers