首页 > 代码库 > 浏览器远程调试

浏览器远程调试

2024-07-06 11:01:00 239人阅读

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

一、Opera 远程调试

准备工作：

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

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

安装下载欧朋 HD 模拟器、桌面版 Opera、欧朋 HD。
打开 Opera，“Ctrl + Shift + i” 打开调试工具 Dragonfly。
点击右上 “远程调试设置”，默认端口 “7001” 可以不改，点击 “应用”。
出现 “在端口7001上等待主机连接”。
运行欧朋 HD 模拟器，随便选择左侧 “Profile” 里的一个设备，我选择 “HTC Desire”，点击 “Launch” 运行。
在模拟器地址栏输入 opera:debug，见到以下页面，因为是本机调试，IP 地址和端口号用默认即可，点击连接。
出现以下页面代表连接成功。

在模拟器打开一个页面，在 Dragonfly 右上点击 “选择环境”，下来菜单中选择模拟器打开的页面。
OK，可以在电脑上调试手机网页啦～在 Dragonfly 选择元素，模拟器可以看到所选区域变化。
在 Dragonfly 修改元素的样式，模拟器立即生效，同样修改 JS 也会立即生效。

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

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

手机和电脑连接同一 Wi-Fi 地址。
电脑打开 Opera，“Ctrl + Shift + i” 打开 Dragonfly，点击 “远程调试设置”。
端口可以默认，点击 “应用” 出现以下页面。
“cmd” ― “ipconfig” ― 找到电脑的 IP 地址，记下来备用。
打开手机安装的欧朋 HD，地址栏输入 opera:debug，回车，出现以下页面，在 IP 地址处填入电脑的 IP 地址，点击 “连接”。
显示 “断开连接”，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

首先确保你的桌面版浏览器是 Firefox 15+。
在桌面版 Firefox 地址栏输入 about:config，会提示你确认，点击 “我保证会小心”。
在出现的列表搜索框输入 “remote-” 进行筛选，找到 “devtools.debugger.remote-enabled”，双击把值置为 “true”。
重启桌面版 Firefox，在 “菜单” ― “工具” ― “Web开发者” 中多了一项 “远程调试器”。
打开手机版 Firefox（建议装最新版），查看版本，“菜单” ― “Settings（设置）” ― “About Firefox”，当前最新是 Firefox 15.0。
地址栏输入 about:config，搜索框输入 debugger，点击 “Add a New Setting”，弹出的框都选择 OK 或取消。
“devtools.debugger.force-local” 点击 “toggle” 置为 “false”，“devtools.debugger.remote-enabled” 点击 “toggle” 置为 “true”，开启了移动版 Firefox 的远程调试（“devtools.debugger.remote-port” 调试端口号可以设置，默认为 “6000”）。
找到手机所连 Wi-Fi 的 IP 地址，一般步骤：“系统设置” ― “点击连接的 WLAN” ― “IP 地址”（不同的手机步骤稍有不同）。
重启移动版 Firefox，随意打开一个网址，同时打开桌面版 Firefox，点击桌面版 Firefox 菜单：“工具” ― “Web开发者” ― “远程调试器”，弹出对话框，把 “localhost” 换成以上找到的 Wi-Fi IP（电脑和手机必须连接同一个 Wi-Fi），点击确定。
连接成功的话，手机会弹出对话框，点击 OK。
随后，在桌面版 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

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