远程调试 Android 设备使用入门

远程调试 Android 设备使用入门

Kayce Basques

By Kayce Basques Technical Writer at Google

从 Windows、Mac 或 Linux 计算机远程调试 Android 设备上的实时内容。 本教程将向您展示如何: 设置您的 Android 设备进行远程调试,并从开发计算机上发现设备。 从您的开发计算机检查和调试 Android 设备上的实时内容。 将 Android 设备上的内容抓屏到您的开发计算机上的 DevTools 实例中。

远程调试图示

要求 开发计算机上已安装 Chrome 32 或更高版本。 开发计算机上已安装 USB 驱动程序(如果您使用 Windows)。 确保设备管理器报告正确的 USB 驱动程序 拥有一根可以将您的 Android 设备连接至开发计算机的 USB 电缆。 Android 4.0 或更高版本。 您的 Android 设备上已安装 Chrome(Android 版)。

第 1 步:发现您的 Android 设备 在您的 Android 设备上,选择 Settings > Developer Options > Enable USB Debugging。 在运行 Android 4.2 及更新版本的设备上,Developer options 默认情况下处于隐藏状态。 请参阅启用设备上的开发者选项以了解如何启用它。

在您的开发计算机上打开 Chrome。您应使用您的一个 Google 帐户登录到 Chrome。 远程调试在隐身模式访客模式下无法运行。

打开 DevTools

在 DevTools 中,点击 Main Menu

主菜单

,然后选择 More tools > Remote devices

打开远程设备抽屉式导航栏

在 DevTools 中,点击 Settings 标签(如果正在显示另一个标签)。

确保已启用 Discover USB devices

已启用 Discover USB devices

使用一根 USB 电缆将 Android 设备直接连接到您的开发计算机。 请勿使用任何中间 USB 集线器。如果这是您首次将您的 Android 设备连接到此开发计算机,您的设备将显示在 Unknown 中,其下面具有文本 Pending Authorization

未知的设备,待授权

如果您的设备显示为 Unknown,则在 Android 设备上接受 Allow USB Debugging 权限提示。 Unknown 被替换为您的 Android 设备的型号名称。 绿色圆圈和 Connected 文本表示您已大功告成,可以从开发计算机远程调试您的 Android 设备。

注:如果您在发现流程中遇到任何问题,您可以通过在 Android 设备上选择 Settings > Developer Options > Revoke USB Debugging Authorizations 重启该流程。 第 2 步:从您的开发计算机调试 Android 设备上的内容。 如果您尚未在 Android 设备上打开 Chrome,则现在打开它。

返回 DevTools,点击与设备的型号名称匹配的标签。 在此页面的顶部,您会看到 Android 设备的型号名称,后面紧跟着其序列号。 在型号名称下面,您可以看到在设备上运行的 Chrome 的版本,版本号在括号里。每个打开的 Chrome 标签都会有自己的区域。您可以从此区域与该标签交互。 如果有任何使用 WebView 的应用,您也会看到针对每个应用的区域。 下面的屏幕截图没有任何打开的标签或 WebViews。 [图片上传中。。。(7)]

New tab 旁输入一个网址,然后点击 Open。此页面将在 Android 设备上的新标签中打开。

点击您刚刚打开的网址旁的 Inspect。这将打开一个新的 DevTools 实例。 您的 Android 设备上运行的 Chrome 的版本决定在开发计算机上打开的 DevTools 的版本。因此,如果您的 Android 设备正在运行一个非常旧的 Chrome 版本,则 DevTools 实例看上去可能与您常用的实例有很大的差别。

更多操作:重新加载、聚焦或关闭一个标签 点击您要重新加载、聚焦或关闭的标签旁的 More Options

更多选项。 [图片上传中。。。(9)] 检查元素 转到您的 DevTools 实例的 Elements 面板,将鼠标悬停在一个元素上以在 Android 设备的视口中突出显示它。 您还可以在 Android 设备屏幕上点按一个元素,以在 Elements 面板中选中它。 点击您的 DevTools 实例上的 Select Element [图片上传中。。。(10)],然后在您的 Android 设备屏幕上点按此元素。 请注意,Select Element 将在第一次触摸后停用,因此,每次想要使用此功能时您都需要重新启用它。 Android 设备到开发计算机的抓屏 点按 Toggle Screencast ![Toggle Screencast][screencast]{:.devtools-inline} 以在您的 DevTools 实例中查看 Android 设备的内容。 您可以通过多种方式与抓屏互动: 将点击转变为点按,在设备上触发适当的触摸事件。 将计算机上的按键发送至设备。 要模拟双指张合手势,请按住 Shift 拖动。 要滚动,请使用您的触控板或鼠标滚轮,或者使用您的鼠标指针抛式滚动。

关于抓屏的一些注意事项: 抓屏仅显示页面内容。抓屏的透明部分表示设备界面,如 Chrome 多功能框、Android 状态栏或 Android 键盘。 抓屏会对帧率产生负面影响。在测量滚动或动画时停用抓屏,以更准确地了解页面的性能。 如果您的 Android 设备屏幕锁定,您的抓屏内容将消失。 将您的 Android 设备屏幕解锁可自动恢复抓屏。

https://developers.google.com/web/tools/chrome-devtools/remote-debugging/?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏微信平台开发

【腾讯游戏人生】微信小程序开发总结

目前【腾讯游戏人生】小程序已经发布上线,大家可以扫小程序码进行体验。接下来主要介绍在开发该款小程序过程中的一些思考和积累。

5998
来自专栏FreeBuf

手把手教你修改旅行青蛙三叶草抽奖券数

0×00 最近有只蛙 2018年元旦过后,一款旅行青蛙(原名旅かえる)的放置类手游迅速受到广大有爱青年的热捧,朋友圈、微博、知乎等掀起了一场母爱泛滥的晒蛙风。 ...

2185
来自专栏葡萄城控件技术团队

作为JavaScript开发人员,这些必备的VS Code插件你都用过吗?

如今,Visual Studio Code无疑是最流行的轻量级代码编辑器。它确实从其他代码编辑器那借鉴了很多,最主要是从Sublime和Atom那里。然而它的成...

2941
来自专栏向治洪

Mac 高效工作指南

序 很多做开发的程序员,都喜欢用mac,其绚丽的外观,加上手感体验,很适合开发和装逼用。其实除了这些为什么那么多程序员喜欢用mac呢,分析了一下使用mac的好处...

60510
来自专栏葡萄城控件技术团队

哪些JavaScript IDE最好用?

阅读本文之前,分享大家一张图片,看图会发现JavaScript开发需求最高,占比达到42.84%,因此掌握JavaScript语言好工作就不愁啦,工欲善其事必先...

2635
来自专栏python+iOS学习交流

7年iOS架构师教你如何快速提高并掌握 iOS开发核心技能

首先你要花点时间针对objective-c语言的学习;毕竟这个是iOS开发的基础(你也可以尝试用Swift,但此项目只是针对OC),编程套路其实都是差不多,多写...

1611
来自专栏Bug生活2048

利用云开发优化博客小程序(二)——评论功能

这次迭代主要是完善了评论功能「不知道审核能不能过」,一开始觉得很快能搞定,然而真正开发的时候还是碰到很多问题,这篇文章既是回顾总结,也是记录下自己在开发过程中遇...

3543
来自专栏张戈的专栏

修复WordPress升级4.2外观菜单中显示选项无法点击问题

WordPress 升级 4.2 之后,目前发现存在如下 3 个问题: 有部分主题的前台会产生大量的 404 错误请求(站外资源); 评论表情名称变更导致表情无...

2926
来自专栏DeveWork

WordPress 网站开发“微信小程序”实战(二)

本文是“WordPress 开发微信小程序”系列的第二篇,本文记录的是开发“DeveWork极客”小程序v1.1 的过程。一如既往,目标读者为了解WordPre...

2787
来自专栏知晓程序

「大众点评点餐」小程序开发经验 05:解析开发工具

周中坚,美团点评工程师,4年 Web 前端开发经验,主要负责过会员卡、外卖、预订、商家平台等业务的前端开发,现在是美团点评点餐团队的一员。

1693

扫码关注云+社区

领取腾讯云代金券