转载:http://www.seejs.com/archives/296
注意: 我们在远程调试中使用的交互协议信息,请参阅调试协议文档和chrome.debugger。
远程调试概述
网页内容在移动设备上的用户体验与桌面型的相比有很大的区别。Google Chrome DevTools 有一整套你已经熟悉的工具允许你用来 inspect, debug, 以及 analyze 在移动设备上的网页,这意味着你可以使用你的开发机器上的Chrome DevTools来调试一个移动设备上打开的页面。只要你的移动设备通过 USB 连接到开发机器,你就可以开始调试,你可以查看甚至修改结构,脚本和样式,直到你得到一个在所有设备上都表现完美的没有 bug 的页面。 当你在你的开发机器上调试一个web应用的时候,你可以使用端口反向转发来允许移动设备通过 USB 从开发机器访问一个网站。端口反向转发要求开发机器安装Chrome 29或更高版本,并且要求移动设备安装Chrome 28或更高版本。
使用 Chrome 的 ADB 扩展进行远程调试
在开始调试之前,你需要做以下准备:
- 一台安装了Chrome 28或更新版本浏览器的 Android 手机或平板。
- 一条 USB 连接线(Windows用户还需要安装相应的USB设备驱动程序).
- 在你的开发机器上已安装29或更新版本的Chrome。
- 在你的开发机器上已经安装Chrome的ADB扩展。
注意:如果你已经在使用旧版的远程调试流程,或者使用更早版本的Chrome,请参看Remote Debugging on Android (Legacy Workflow)。
1. 安装ADB扩展
ADB扩展简化了远程调试的设置过程。ADB扩展包含了 Android Debug Bridge (ADB),它使得你可在开发机器上通过 USB 调试你的移动设备。这个扩展提供以下好处:
- 包含了ADB,因此你不需要再安装完整版的Android SDK。
- 为轻松的控制开始和停止ADB守护进程提供了一个UI,并且可以查看连接中的设备。
Chrome Web Store的安装进程不能在Windows 8中正常工作。如果你在安装过程中遇到任何问题,可以在github上ADB扩展的回复中查看如何下载和安装扩展的详细信息。
2. 启用你的移动设备上的USB调试功能
为了能通过 USB 进行调试,你需要设置你的Android设备为开发环境。根据向导提示,启用你的移动设备上的USB调试功能,然后系统将检测你的设备。 启用USB调试:
- 在大多数运行Android 3.2或更早版本的设备中,你可以找到以下选项“设置” > “应用” > “开发环境”。
- 在Android 4.0和更新版本中,它是“设置” > “开发者选项”。
- 在Android 4.2及以后,开发者选项默认被隐藏。前往“设置” > “关于手机”,根据提示点击版本号,直到开启“开发者选项”。返回上一屏查找“开发者选项”。
如果你是在Windows上做开发,你需要为你的移动设备安装相关的USB驱动。参考Android开发者网站上的OEM USB Drivers。 获取更多信息,请查看发布在Android开发者网站上的Setting up a Device for Development。
3. 通过USB链接你的移动设备
- 用USB连接线连接你的开发机器和移动是被。
- 在移动设备上,启动Chrome。打开“设置” > “高级” > “开发工具”,确认启动USB网页调试,如图所示:
当把你的设备连接到开发机器的时候,你有可能会在移动设备上看到一个为这台电脑请求USB调试权限的警告。为了避免每次调试都看到这条警告,选择“总是允许来自这台电脑的请求”,点击确定。
4. 开始使用 ADB 扩展进行调试
当ADB扩展安装完成后,在Chrome菜单旁边将会出现一个灰色的Android菜单图标。 开始调试:
- 点击Android图标,然后点击“启动ADB”。
一旦ADB启动成功,菜单图标变为绿色并且如果有设备已经连接,还会列出当前已连接设备的数量。
- 点击“查看检测目标”打开about:inspect页面,这里会列出每一个已连接的设备以及它的选项卡。
- 查找你想要调试的设备选项卡,点击它的URL旁边的查看连接。
如果你没有看到任何已连接的设备:
- 检查你的设备已经连上了USB。
- 通过发送adb devices命令确认你的设备被列为可用。如果不是,检查你设备的USB调试模式是否启用。
- 确认在Android版的Chrome中已经启用USB调试功能。
5. 调试你的应用
例如,查看你所选中页面中的元素,在你的移动设备上的Chrome中这个元素对应的页面结构会立即高亮显示。同样,在DevTools的控制台中编写脚本或者执行命令,都会影响你设备中检查的页面。你也可以使用所有其他面板,例如Timeline和Profiles。
注意
- 你可能会注意到在远程调试过程中你可访问与你的开发机器上的版本不同的DevTools。这是因为工具会同步Android设备上使用的Chrome版本。
- 因为我们通过USB链接电脑,所以你可以让你的设备处于一个真实的网络中,并且在Network面板中查看真实网络条件下的网络瀑布流。
- 移动设备上的硬件运行你的网页通常会比PC更慢,因此使用Timeline面板来分析如何优化渲染和CPU来达到最佳效果。
- 如果你在你的开发机器上运行一个web服务器,并且网络限制阻止你的移动设备想这台服务器发送请求,请参看reverse port forwarding。
端口反向转发(实验)
同样,你有一台web服务器运行在你的本地开发机器上,而你想通过你的移动设备访问这个网站。如果你的移动设备和开发机器处于同一个网络环境,这很简单。但这在某些情况可能很困难,比如在一个受限的企业网络中。 一个在Android版Chrome中被叫做“端口反向转发”的新特性,使得这个问题变得简单。它通过在你的移动设备上建立一个监听TCP端口映射到你的开发机器上的特定的TCP端口。经过转发端口的信息流通过USB传播,因此,它不依赖于移动设备的网络配置。 要使用这个特性,你需要做以下准备:
- 在你的开发机器上安装Chrome 29或更新版本。
- 在你的开发机器上安装Android Debug Bridge(Chrome ADB扩展或完整版的Android SDK)。
- 在你的移动设备上安装Android版的Chrome 28或更新版本。
次过程假定你已经拥有了像Remote debugging with the ADB Chrome extension中描述的远程调试配置。
1. 链接你的移动设备
- 通过USB连接你的设备和开发机器。
- 停止目前运行在移动端Chrome下的所有示例。
- 打开Android版Chrome。
- 前往“设置” > “开发者工具”,然后开启USB网页调试。
- 开启你的开发机器上的ADB:
- 如果你使用ADB扩展,点击ADB图标,然后点击Start ADB。你应该可以看到图标变绿了,并且显示已连接的设备总数。
- 如果你不使用扩展,打开一个终端并且执行adb devices命令。你应该可以看到已连接的设备的ID列表。
2. 启用端口反向转发
在你的开发机器上执行下面的步骤:
- 打开about:flags,开启Enable Developer Tools experiments,然后重启Chrome。
- 打开about:inspect。你应该可以看到你的设备和它打开的选项卡。
- 点击任何一个已列出站点旁边的Inspect。
- 在打开的DevTools窗口中,打开Settings面板。
- 在Experiments中,勾选Enable reverse port forwarding。
- 关闭DevTools窗口,回到about:inspect。
3. 添加一个端口转发规则
- 再次点击Inspect链接打开DevTools,然后再次打开Settings。你应该可以看到一个Port forwarding选项卡。
- 点击Port Forwarding。
- 在设备端口输入框中,输入Android设备需要监听的端口号(默认为8080)。
- 在目标输入框中,追加端口号到运行你的应用程序的localhost上。
4. 利益
在Android版Chrome中,打开localhost:<设备端口号>,<设备端口号>是你填入设备端口输入框的值(默认为8080)。你应该可以看到你开发机器上服务器中的内容。
Chrome 29之前,没有充分发挥端口反向转发的功能。如果你遇到端口反向转发的问题,请确认你正在使用Chrome 29或更新版本。如果端口转发规则看起来没有效果,添加第二个规则,复制端口转发规则有时候能够解决一些较早版本Chrome中的问题。
相关推荐
能够不使用数据线进行调试。使用方法:调试电脑和手机使用一个wifi,手机安装后打开远程调试,电脑打开cmd,输入adb connect XXX.XXX.XXX.XXX 即可(XXX是手机上显示的ip)
这里包含两个exe文件。分别是远程调试工具exe和安卓投屏exe,下载解压点击即可安装使用,不用到处搜索下载试安装
可以打开android设备的网络调试模式,使用adb connect [手机ip]连接; 注意!!必须root过的设备才可以使用。 在一些没有条件使用usb数据线连接的场合下比较有用。android开发人员必备工具
adb驱动,且支持远程网络调试!调试方法见作者“android ADB 远程调试”帖子
能否开发一种工具,既不需要用户深度配合也不需要提前埋点就能方便、快速地定位线上问题?作为程序员,查bug一般使用下面几种方式:阅读源码、记录日志或调试程序。一般本地无法复现的问题通过阅读源码很难找到原因...
Android库,用于远程调试服务(远程logcat) 如何使用该库: 将其添加到根级build.gradle到存储库的末尾: allprojects { repositories { ... maven { url 'https://jitpack.io' } } } 将依赖项添加...
英浩电子公司YH-905 USB HART调制解调器数据手册,HY-905 USB ...8、APP版支持远程调试,可以通过互联网进行远程调试(使用两台手机或Pad,其中一台通过YH-905连接仪表,另一台即可远程通过互联网与仪表连接调试)。
wifi无限调试,自动化工具 包含 连接 断开两个工具。
ds2 是用于与 LLDB 执行远程调试 Linux 和 Android 目标的调试服务器。
adb命令操作,把所有文件放从盘admin根目录下,即可任何地方使用adb命令。
AndroidStudio功能真的是很强大,目前是Android开发者最好用的开发工具了,现在安卓开发真是越来越方便了,真机调试应用都不用数据线了,只要手机和电脑在同一局域网下就可以省去繁琐的数据线。
学习了 的 后写的一个开启 Android 设备远程调试功能的APP###TODO:界面美化
Android 调试桥(adb)是多种用途的工具,该工具可以帮助你你管理设备或模拟器 的状态。 可以通过下列几种方法加入adb: • 在设备上运行shell命令 • 通过端口转发来管理模拟器或设备 • 从模拟器或设备上拷贝来或拷贝...
Android远程调试器 Android远程调试器是用于远程调试Android应用程序的库。 它使您可以直接在浏览器中查看日志,数据库,共享首选项和网络请求。 选择语言 产品特点 记录中 查看您的应用程序日志 按优先级和标签...
使用PC上的 Chrome 远程调试手机端的页面 工具准备 手机端:chrome for Android,; PC端:安装谷歌浏览器(最好是最新版的开发者版本) USB 连接线, 也就是你充电器的那条线 开启调试模式 使用 USB 连接你的电脑,...
安卓设备chrome远程debug网页代码步骤。
MyEclipse WIFI网络远程调试安卓配置方法(非USB调试模式),对于有些时候不具备USB调试安卓应用时,比如USB要接USB设备时,非常方便,不需要占用USB HOST接口
用于远程日志记录,数据库调试,共享首选项和网络请求的库Android Remote Debugger Android Remote Debugger是用于远程调试Android应用程序的库。 它使您可以直接在浏览器中查看日志,数据库,共享首选项和网络请求...
此工具可通过用串口线连接机顶盒等android设备,在命令行控制设备,也能连接远程linux服务器。