码迷,mamicode.com
首页 > 其他好文 > 详细

浏览器远程调试

时间:2014-06-03 11:33:18      阅读:614      评论:0      收藏:0      [点我收藏+]

标签:des   android   c   style   class   blog   

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

一、Opera 远程调试

准备工作:

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

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

    bubuko.com,布布扣

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

    bubuko.com,布布扣

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

    bubuko.com,布布扣

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

    bubuko.com,布布扣

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

    bubuko.com,布布扣

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

bubuko.com,布布扣

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

    bubuko.com,布布扣

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

    bubuko.com,布布扣

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

    bubuko.com,布布扣
    bubuko.com,布布扣

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

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

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

    bubuko.com,布布扣

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

    bubuko.com,布布扣

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

    bubuko.com,布布扣

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

    bubuko.com,布布扣
    bubuko.com,布布扣

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

    bubuko.com,布布扣

参考资料

二、Firefox and Firefox for Android 远程调试

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

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

    bubuko.com,布布扣

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

    bubuko.com,布布扣

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

    bubuko.com,布布扣

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

    bubuko.com,布布扣

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

    bubuko.com,布布扣

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

    bubuko.com,布布扣

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

    bubuko.com,布布扣

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

    bubuko.com,布布扣

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

    bubuko.com,布布扣

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

参考资料

三、Chrome and Chrome Mobile 远程调试

准备工作:

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

    bubuko.com,布布扣

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

    bubuko.com,布布扣

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

    bubuko.com,布布扣

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

    bubuko.com,布布扣

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

    bubuko.com,布布扣

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

    bubuko.com,布布扣

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

参考资料

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

浏览器远程调试,布布扣,bubuko.com

浏览器远程调试

标签:des   android   c   style   class   blog   

原文地址:http://www.cnblogs.com/hzh1990/p/3760444.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!