移动浏览器远程调试

青旅半醒 2022-08-25 09:16 316阅读 0赞

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

# 一、Opera 远程调试 #

准备工作：

*  [下载桌面版 Opera][Opera]
 *  [下载欧朋 HD 最新版][HD]
 *  [下载欧朋 HD 模拟器][HD 1]

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

1.  安装下载欧朋 HD 模拟器、桌面版 Opera、欧朋 HD。
2.  打开 Opera，“Ctrl + Shift + i” 打开调试工具 Dragonfly。
    
    [![dragonfly][]][dragonfly]
3.  点击右上 “远程调试设置”，默认端口 “7001” 可以不改，点击 “应用”。
    
    [![QQ截图20120917145132][QQ_20120917145132]][QQ_20120917145132]
4.  出现 “在端口7001上等待主机连接”。
    
    [![QQ截图20120917145401][QQ_20120917145401]][QQ_20120917145401]
5.  运行欧朋 HD 模拟器，随便选择左侧 “Profile” 里的一个设备，我选择 “HTC Desire”，点击 “Launch” 运行。
    
    [![QQ截图20120917151258][QQ_20120917151258]][QQ_20120917151258]
6.  在模拟器地址栏输入 `opera:debug`，见到以下页面，因为是本机调试，IP 地址和端口号用默认即可，点击连接。
    
    [![QQ截图20120917151745][QQ_20120917151745]][QQ_20120917151745]
7.  出现以下页面代表连接成功。
    
    [![QQ截图20120917152241][QQ_20120917152241]][QQ_20120917152241]
8.  在模拟器打开一个页面，在 Dragonfly 右上点击 “选择环境”，下来菜单中选择模拟器打开的页面。
    
    [![QQ截图20120917152708][QQ_20120917152708]][QQ_20120917152708]
9.  OK，可以在电脑上调试手机网页啦～ 在 Dragonfly 选择元素，模拟器可以看到所选区域变化。
    
    [![QQ截图20120917153011][QQ_20120917153011]][QQ_20120917153011]
10. 在 Dragonfly 修改元素的样式，模拟器立即生效，同样修改 JS 也会立即生效。
    
    [![QQ截图20120917153318][QQ_20120917153318]][QQ_20120917153318]  
    [![QQ截图20120917153631][QQ_20120917153631]][QQ_20120917153631]

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

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

1.  手机和电脑连接同一 Wi-Fi 地址。
2.  电脑打开 Opera，“Ctrl + Shift + i” 打开 Dragonfly，点击 “远程调试设置”。
    
    [![QQ截图20120917145132][QQ_20120917145132 1]][QQ_20120917145132 1]
3.  端口可以默认，点击 “应用” 出现以下页面。
    
    [![QQ截图20120917145401][QQ_20120917145401 1]][QQ_20120917145401 1]
4.  “cmd” ― “ipconfig” ― 找到电脑的 IP 地址，记下来备用。
    
    [![QQ截图20120917154850][QQ_20120917154850]][QQ_20120917154850]
5.  打开手机安装的欧朋 HD，地址栏输入 `opera:debug`，回车，出现以下页面，在 IP 地址处填入电脑的 IP 地址，点击 “连接”。
    
    [![豌豆荚截图20120917145740][20120917145740]][20120917145740]  
    [![豌豆荚截图20120917155605][20120917155605]][20120917155605]
6.  显示 “断开连接”，OK 连上了，Enjoy debuging～ 剩下的调试可以参照[方式一的 8-10 步骤][8-10]。
    
    [![豌豆荚截图20120917155708][20120917155708]][20120917155708]

# 参考资料 #

*  [Remote Debugging | Documentation | Opera Dragonfly – Opera’s built-in developer tools][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]
 *  [Firefox for Android 下载][Firefox for Android]或在 Google Play 搜索 Firefox

1.  首先确保你的桌面版浏览器是 Firefox 15+。
    
    [![firefox edition][]][firefox edition]
2.  在桌面版 Firefox 地址栏输入 `about:config`，会提示你确认，点击 “我保证会小心”。
    
    [![firefox\_about\_config][firefox_about_config]][firefox_about_config]
3.  在出现的列表搜索框输入 “remote-” 进行筛选，找到 “devtools.debugger.remote-enabled”，双击把值置为 “true”。
    
    [![remote][]][remote]
4.  重启桌面版 Firefox，在 “菜单” ― “工具” ― “Web开发者” 中多了一项 “远程调试器”。
    
    [![remote tools][]][remote tools]
5.  打开手机版 Firefox（建议装最新版），查看版本，“菜单” ― “Settings（设置）” ― “About Firefox”，当前最新是 Firefox 15.0。
6.  地址栏输入 `about:config`，搜索框输入 `debugger`，点击 “Add a New Setting”，弹出的框都选择 OK 或取消。
    
    [![豌豆荚截图20120911152032][20120911152032]][20120911152032]
7.  “devtools.debugger.force-local” 点击 “toggle” 置为 “false”，“devtools.debugger.remote-enabled” 点击 “toggle” 置为 “true”，开启了移动版 Firefox 的远程调试（“devtools.debugger.remote-port” 调试端口号可以设置，默认为 “6000”）。
    
    [![豌豆荚截图20120911152609][20120911152609]][20120911152609]
8.  找到手机所连 Wi-Fi 的 IP 地址，一般步骤：“系统设置” ― “点击连接的 WLAN” ― “IP 地址”（不同的手机步骤稍有不同）。
9.  重启移动版 Firefox，随意打开一个网址，同时打开桌面版 Firefox，点击桌面版 Firefox 菜单：“工具” ― “Web开发者” ― “远程调试器”，弹出对话框，把 “localhost” 换成以上找到的 Wi-Fi IP（电脑和手机必须连接同一个 Wi-Fi），点击确定。
    
    [![link][]][link]
10. 连接成功的话，手机会弹出对话框，点击 OK。
    
    [![豌豆荚截图20120911162010][20120911162010]][20120911162010]
11. 随后，在桌面版 Firefox 即能看到手机网页的 Javascript 文件，可以设断点调试了。
    
    [![success][]][success]

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

# 参考资料 #

*  [Remote Debugging on Firefox for Android ✩ Mozilla Hacks – the Web developer blog][Remote Debugging on Firefox for Android _ Mozilla Hacks _ the Web developer blog]
 *  [Mark Finkle’s Weblog » Firefox for Android: Remote Debugging is Here][Mark Finkle_s Weblog _ Firefox for Android_ Remote Debugging is Here]

# 三、Chrome and Chrome Mobile 远程调试 #

准备工作：

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

1.  Android 设备通过 USB 连接电脑，要访问 Android 设备还需要 [Android Debug Bridge(adb)][Android Debug Bridge_adb]，先前安装的 Android SDK 中包含此款命令行工具。在 Windows 中点击 “开始” ― “运行” ― “cmd” 找到 Android SDK 里的 `platform-tools` 目录。
    
    [![platform-tools][]][platform-tools]
2.  在移动设备上打开 Chrome，“设置” ― “开发人员工具” ― “启用 USB 网页调试”。
    
    [![豌豆荚截图20120911185759][20120911185759]][20120911185759]
3.  在 Windows 下输入 `adb devices` 看下面的列表中有没有你的机器，如果没有检查一下 Android 设备的 USB 调试是否打开。
    
    [![QQ截图20120911185418][QQ_20120911185418]][QQ_20120911185418]
4.  在 `platform-tools` 目录下输入：`adb forward tcp:9222 localabstract:chrome_devtools_remote`
    
    [![QQ截图20120911190203][QQ_20120911190203]][QQ_20120911190203]
5.  在桌面版 Chrome 输入 `localhost:9222`，页面出现移动版 Chrome 访问的页面。
    
    [![QQ截图20120911190354][QQ_20120911190354]][QQ_20120911190354]
6.  点击 “inspectable pages” 下面的任一页面进入调试页面，移动设备页面可以在桌面调试了。
    
    [![QQ截图20120911190830][QQ_20120911190830]][QQ_20120911190830]

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

# 参考资料 #

*  [Remote Debugging – Google Chrome Mobile — Google Developers][Remote Debugging _ Google Chrome Mobile _ Google Developers]
 *  [Using Hardware Devices | Android Developers][Using Hardware Devices _ Android Developers]

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

转载地址：http://blog.csdn.net/yohoph/article/details/10112161

[Opera]: http://www.opera.com/browser/
[HD]: http://download.oupeng.com/
[HD 1]: http://www.opera.com/developer/tools/mobile/
[dragonfly]: http://dev.oupeng.com/wp-content/uploads/2012/09/QQ%E6%88%AA%E5%9B%BE20120917144951.png
[QQ_20120917145132]: http://dev.oupeng.com/wp-content/uploads/2012/09/QQ%E6%88%AA%E5%9B%BE20120917145132.png
[QQ_20120917145401]: http://dev.oupeng.com/wp-content/uploads/2012/09/QQ%E6%88%AA%E5%9B%BE20120917145401.png
[QQ_20120917151258]: http://dev.oupeng.com/wp-content/uploads/2012/09/QQ%E6%88%AA%E5%9B%BE20120917151258.png
[QQ_20120917151745]: http://dev.oupeng.com/wp-content/uploads/2012/09/QQ%E6%88%AA%E5%9B%BE20120917151745.png
[QQ_20120917152241]: http://dev.oupeng.com/wp-content/uploads/2012/09/QQ%E6%88%AA%E5%9B%BE20120917152241.png
[QQ_20120917152708]: http://dev.oupeng.com/wp-content/uploads/2012/09/QQ%E6%88%AA%E5%9B%BE20120917152708.png
[QQ_20120917153011]: http://dev.oupeng.com/wp-content/uploads/2012/09/QQ%E6%88%AA%E5%9B%BE201209171530111.png
[QQ_20120917153318]: http://dev.oupeng.com/wp-content/uploads/2012/09/QQ%E6%88%AA%E5%9B%BE20120917153318.png
[QQ_20120917153631]: http://dev.oupeng.com/wp-content/uploads/2012/09/QQ%E6%88%AA%E5%9B%BE20120917153631.png
[QQ_20120917145132 1]: http://dev.oupeng.com/wp-content/uploads/2012/09/QQ%E6%88%AA%E5%9B%BE201209171451321.png
[QQ_20120917145401 1]: http://dev.oupeng.com/wp-content/uploads/2012/09/QQ%E6%88%AA%E5%9B%BE201209171454011.png
[QQ_20120917154850]: http://dev.oupeng.com/wp-content/uploads/2012/09/QQ%E6%88%AA%E5%9B%BE20120917154850.png
[20120917145740]: http://dev.oupeng.com/wp-content/uploads/2012/09/%E8%B1%8C%E8%B1%86%E8%8D%9A%E6%88%AA%E5%9B%BE201209171457403.png
[20120917155605]: http://dev.oupeng.com/wp-content/uploads/2012/09/%E8%B1%8C%E8%B1%86%E8%8D%9A%E6%88%AA%E5%9B%BE201209171556053.png
[8-10]: http://dev.oupeng.com/articles/remote-debugging-with-browsers#dragonfly-debugging
[20120917155708]: http://dev.oupeng.com/wp-content/uploads/2012/09/%E8%B1%8C%E8%B1%86%E8%8D%9A%E6%88%AA%E5%9B%BE201209171557081.png
[Remote Debugging _ Documentation _ Opera Dragonfly _ Opera_s built-in developer tools]: http://www.opera.com/dragonfly/documentation/remote/
[Firefox]: http://firefox.com.cn/download/
[Firefox for Android]: https://play.google.com/store/apps/details?id=org.mozilla.firefox&feature=search_result#?t=W251bGwsMSwxLDEsIm9yZy5tb3ppbGxhLmZpcmVmb3giXQ..
[firefox edition]: http://dev.oupeng.com/wp-content/uploads/2012/09/QQ%E6%88%AA%E5%9B%BE201209111441241.png
[firefox_about_config]: http://dev.oupeng.com/wp-content/uploads/2012/09/QQ%E6%88%AA%E5%9B%BE20120911144301.png
[remote]: http://dev.oupeng.com/wp-content/uploads/2012/09/QQ%E6%88%AA%E5%9B%BE20120911144555.png
[remote tools]: http://dev.oupeng.com/wp-content/uploads/2012/09/QQ%E6%88%AA%E5%9B%BE20120911150847.png
[20120911152032]: http://dev.oupeng.com/wp-content/uploads/2012/09/%E8%B1%8C%E8%B1%86%E8%8D%9A%E6%88%AA%E5%9B%BE201209111520321.png
[20120911152609]: http://dev.oupeng.com/wp-content/uploads/2012/09/%E8%B1%8C%E8%B1%86%E8%8D%9A%E6%88%AA%E5%9B%BE201209111526091.png
[link]: http://dev.oupeng.com/wp-content/uploads/2012/09/QQ%E6%88%AA%E5%9B%BE20120911161453.png
[20120911162010]: http://dev.oupeng.com/wp-content/uploads/2012/09/%E8%B1%8C%E8%B1%86%E8%8D%9A%E6%88%AA%E5%9B%BE201209111620101.png
[success]: http://dev.oupeng.com/wp-content/uploads/2012/09/QQ%E6%88%AA%E5%9B%BE20120911170012.png
[Remote Debugging on Firefox for Android _ Mozilla Hacks _ the Web developer blog]: https://hacks.mozilla.org/2012/08/remote-debugging-on-firefox-for-android/
[Mark Finkle_s Weblog _ Firefox for Android_ Remote Debugging is Here]: http://starkravingfinkle.org/blog/2012/08/firefox-for-android-remote-debugging-is-here/
[Android SDK]: http://developer.android.com/sdk/index.html
[Chrome]: http://www.google.cn/intl/zh-CN/chrome/browser/
[Android]: http://developer.android.com/tools/devices/emulator.html
[Android Debug Bridge_adb]: http://developer.android.com/tools/help/adb.html
[platform-tools]: http://dev.oupeng.com/wp-content/uploads/2012/09/QQ%E6%88%AA%E5%9B%BE20120911184954.png
[20120911185759]: http://dev.oupeng.com/wp-content/uploads/2012/09/%E8%B1%8C%E8%B1%86%E8%8D%9A%E6%88%AA%E5%9B%BE201209111857591.png
[QQ_20120911185418]: http://dev.oupeng.com/wp-content/uploads/2012/09/QQ%E6%88%AA%E5%9B%BE20120911185418.png
[QQ_20120911190203]: http://dev.oupeng.com/wp-content/uploads/2012/09/QQ%E6%88%AA%E5%9B%BE20120911190203.png
[QQ_20120911190354]: http://dev.oupeng.com/wp-content/uploads/2012/09/QQ%E6%88%AA%E5%9B%BE20120911190354.png
[QQ_20120911190830]: http://dev.oupeng.com/wp-content/uploads/2012/09/QQ%E6%88%AA%E5%9B%BE20120911190830.png
[Remote Debugging _ Google Chrome Mobile _ Google Developers]: https://developers.google.com/chrome/mobile/docs/debugging
[Using Hardware Devices _ Android Developers]: http://developer.android.com/tools/device.html