浏览器远程调试

2012-10-13 · dev.oupeng.com · 分享

浏览器远程调试
作者 / 张 金龙

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

一、Opera 远程调试

准备工作:

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

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

    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 地址,点击 “连接”。

    float
    float

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

    float

二、Firefox and Firefox for Android 远程调试

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

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

    firefox edition

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

    firefox_about_config

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

    remote

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

    remote tools

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

    float

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

    float

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

    link

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

    float

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

    success

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

三、Chrome and Chrome Mobile 远程调试

准备工作:

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

    platform-tools

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

    float

  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” 需要代理才能访问……

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

502 2012.10.09 3