移动前端调试方案(Android + Chrome 实现远程调试)

 
 

从 Windows、Mac 或 Linux 计算机远程调试 Android 设备上的实时内容。 本教程将向您展示如何:

  • 设置您的 Android 设备进行远程调试,并从开发计算机上发现设备
  • 从您的开发计算机检查和调试 Android 设备上的实时内容。
  • 将 Android 设备上的内容抓屏到您的开发计算机上的 DevTools 实例中。

要求

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

第 1 步:发现您的 Android 设备

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

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

  3. 打开 DevTools

  4. 在 DevTools 中,点击 Main Menu,然后选择 More tools > Remote devices

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

  6. 确保已启用 Discover USB devices

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

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

注:如果您在发现流程中遇到任何问题,您可以通过在 Android 设备上选择 Settings > Developer Options > Revoke USB Debugging Authorizations 重启该流程。

第 2 步:从您的开发计算机调试 Android 设备上的内容。

  1. 如果您尚未在 Android 设备上打开 Chrome,则现在打开它。

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

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

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

更多操作:重新加载、聚焦或关闭一个标签

点击您要重新加载、聚焦或关闭的标签旁的 More Options 

检查元素

转到您的 DevTools 实例的 Elements 面板,将鼠标悬停在一个元素上以在 Android 设备的视口中突出显示它。

您还可以在 Android 设备屏幕上点按一个元素,以在 Elements 面板中选中它。 点击您的 DevTools 实例上的 Select Element 

,然后在您的 Android 设备屏幕上点按此元素。 请注意,Select Element 将在第一次触摸后停用,因此,每次想要使用此功能时您都需要重新启用它。

Android 设备到开发计算机的抓屏

点按 Toggle Screencast ![Toggle Screencast][screencast]{:.devtools-inline} 以在您的 DevTools 实例中查看 Android 设备的内容。

您可以通过多种方式与抓屏互动:

  • 将点击转变为点按,在设备上触发适当的触摸事件。
  • 将计算机上的按键发送至设备。
  • 要模拟双指张合手势,请按住 Shift 拖动。
  • 要滚动,请使用您的触控板或鼠标滚轮,或者使用您的鼠标指针抛式滚动。

关于抓屏的一些注意事项:

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

远程调试 Android 设备使用入门(谷歌翻译版)的更多相关文章

  1. 如何通过Chrome远程调试android设备上的Web网站

    网上的帖子很多,但很多都是老版本的,试过了,根本不管用,花了一天时间,终于在本机试验通过了,特记录下来,以备用.有需要的朋友也可以参考.先上一张图,看看PC端chrome上调试的效果: 左边是手机的模 ...

  2. GDB + gdbserver 远程调试android native code

    原文地址:GDB + gdbserver 远程调试android native code 作者:tq08g2z 以调试模拟器中的native library code为例. Host: ubuntuT ...

  3. 使用Safari远程调试iOS设备网页

    最近在做HTML 5游戏时,发布到手机上访问网页总是莫名其妙出现问题,苦于没有remote debug功能一直没有查找到问题. 这边博客详细介绍了iOS, Android, Windows Phone ...

  4. 使用 桌面的 chrome 远程调试 Android 的页面

    手机浏览器是没有开发者工具的,所以调试手机网页是非常麻烦.使用 chrome 的远程调试功能可以像调试桌面端那样调试手机页面. 准备 手机端:chrome for Android, 安装谷歌浏览器 桌 ...

  5. chorme浏览器调试Android设备

    Android设备开启开发者模式,并打开USB调试: 接着在Android设备上运行项目 在chrome浏览器打开F12: 在Remote devices里即可调试页面. ! 一般需要FQ

  6. gdb 远程调试 android native 程序

    ilocker:关注 Android 安全(新入行,0基础) QQ: 2597294287 先看一张原理图: 我是 Linux 和 Android 双料 0 基础,目前对 gdb 了解的很浅显.(注意 ...

  7. 在桌面chrome中调试android设备中的web页面

    准备工作 1, 桌面版chrome 2, Android设备(安装有chrome浏览器) 3, Android-sdk Android-sdk安装及设置 SKD安装 从http://developer ...

  8. gdb 远程调试android进程 -转

    什么是gdb 它是gnu组织开发的一个强大的unix程序调试工具,我们可以用它来调试Android上的C.C++代码. 它主要可以做4件事情: 随心所欲地启动你的程序. 设置断点,程序执行到断点处会停 ...

  9. 通过WifI开发调试Android设备

    前言:使用的windows系统,为了可以通过wifi可以直接连接android设备调试,尝试使用以下方法一.使用ADB USB to WIFI 一直不成功. 二.使用命令行方式 1.进入android ...

随机推荐

  1. 12 DOM操作应用

    1.创建子元素oLi=document.creatElement('li') 2.将元素附给父级元素oUl.appendChild(oLi) 3.将元素插入到父级元素里的第一位子元素之前oUl.ins ...

  2. K2 blackpearl 安装向导

    最近我在Windows Server 2012 R2上面安装K2 blackpearl遇到了不小的麻烦,于是乎写了这篇向导,把自己遇到的问题记录下来,留给自己和需要帮助的人参考. 首先要解压缩blac ...

  3. 新手写的一个DBCP工具类

    package com.xx.questionnaire.util.dao; import java.io.IOException; import java.sql.Connection; impor ...

  4. Goldengate完成Mysql到Mysql的数据同步

    文档参考地址:http://blog.csdn.net/u010587433/article/details/49305019 需求: 使用Goldengate完成Mysql到Mysql的数据同步,源 ...

  5. tab切换组件nz-tab

    <nz-card [nzBordered]="true" nzTitle="卡片标题"> <nz-card style="width ...

  6. 拦截导弹问题(Noip1999)

    1322:[例6.4]拦截导弹问题(Noip1999) 时间限制: 1000 ms         内存限制: 65536 KB提交数: 3843     通过数: 1373 [题目描述] 某国为了防 ...

  7. Laravel Homestead的安装和使用(照搬)

    原文:https://blog.csdn.net/woqianduo/article/details/81091154/ 1.简介 1.1.Homestead是什么 Laravel Homestead ...

  8. VC++线程函数内怎么调用外部函数

    VC++线程函数内怎么调用外部函数 1.把外部函数做成静态函数,就可以直接调用了.2.把外部函数所在的对象通过线程函数参数传到线程里面来,这样线程里可以使用此对象及其函数了.

  9. redis的安装总结

    1. 下载redis安装包:> 可以用命令: wget http://download.redis.io/releases/redis-5.0.5.tar.gz, 或者直接从官网下载.2. 解压 ...

  10. jdk11 eclipse下开启ZGC

    平台支持 ZGC目前只在Linux/x64上可用,如果有足够的需求,将来可能会增加对其他平台的支持. 对的,目前只支持64位的linux系统. -_-' eclipse.ini配置: -XX:+Unl ...