移动浏览器远程调试

做移动互联网开发呢,比较头疼的可能就是调试问题了,我是这么感觉的。因此,我对市面上比较流行的远程调试方法做了总结,对比了 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. 出现以下页面代表连接成功。

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

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

  10. 在 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://blog.csdn.net/yohoph/article/details/10112161

你可能感兴趣的:(浏览器,移动互联网)