android：如何通过chrome远程调试APP中的webView的h5代码

时间：2021-07-12 17:49:47
    今天出现一个问题，在老板的Mate9 Pro上，我们APP的所有H5页面都是一片空白，但是在其他手机上都是好的，那么我们就怀疑是h5报错了，但是到底是什么错，无法得知，所以就想要可以像在pc的chrome这样调试android webview的h5页面就好了，折腾了一个晚上，终于找到了一篇基本可用的教程 android webview远程调试，然后又发现运来在chrome的官方文档文档中也有描述 远程调试 Android 设备使用入门。
一、简要步骤： 1）首先在安卓手机上打开手机的开发者模式，在开发者选项中勾选  USB调试； 2）在PC上安装安卓的usb驱动，或者直接装一个最新版的android studio2.3； 3）到路径下 C:\Users\你的用户文件夹\AppData\Local\Android\sdk\platform-tools，通过命令adb.exe start-server启动adb；（这个似乎不用也可以）
4）在chrome的菜单 more tools->remote devices中勾选Discover usb devices5）把手机通过usb接入pc；6）在pc的chrome中输入如下路径：chrome://inspect/#devices，此时应该可以看到通过usb连接的手机设备；如下图：android：如何通过chrome远程调试APP中的webView的h5代码7）在APP的webview中增加如下代码，开启webview的远程调试功能，重新编译并安装到手机上；
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {    if ( 0 != ( getApplcationInfo().flags &= ApplicationInfo.FLAG_DEBUGGABLE ) ) {
        WebView.setWebContentsDebuggingEnabled(true);
    }
}
来源： http://www.cnblogs.com/carlos-guo/p/3920915.html
8）打开该APP，切换到一个webview页面，此时在pc的chrome中应该可以看到webView，然后点击inspect即可开始调试。android：如何通过chrome远程调试APP中的webView的h5代码9）但是第一次的时候由于chrome需要连接到google官网去下载一些配置信息，此时如果不FQ的话，就会显示一片空白，所以请确保第一次这么使用的时候可以FQ。以后就没事了。10）最后的调试界面如下android：如何通过chrome远程调试APP中的webView的h5代码  详细的教程如下二、远程调试 Android 设备使用入门：

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

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

android：如何通过chrome远程调试APP中的webView的h5代码 

要求

  • 开发计算机上已安装 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。 远程调试在隐身模式或访客模式下无法运行。

  1. 3）打开 DevTools。

  2. 4）在 DevTools 中，点击 Main Menu android：如何通过chrome远程调试APP中的webView的h5代码，然后选择 More tools > Remote devices。

    android：如何通过chrome远程调试APP中的webView的h5代码 

  3. 5）在 DevTools 中，点击 Settings 标签（如果正在显示另一个标签）。

  4. 6）确保已启用 Discover USB devices。

    android：如何通过chrome远程调试APP中的webView的h5代码7）使用一根 USB 电缆将 Android 设备直接连接到您的开发计算机。 请勿使用任何中间 USB 集线器。如果这是您首次将您的 Android 设备连接到此开发计算机，您的设备将显示在 Unknown 中，其下面具有文本 Pending Authorization。

  5. android：如何通过chrome远程调试APP中的webView的h5代码 

  6. 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。

    android：如何通过chrome远程调试APP中的webView的h5代码 

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

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

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

点击您要重新加载、聚焦或关闭的标签旁的 More Options android：如何通过chrome远程调试APP中的webView的h5代码.

android：如何通过chrome远程调试APP中的webView的h5代码 


检查元素

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

您还可以在 Android 设备屏幕上点按一个元素，以在 Elements 面板中选中它。 点击您的 DevTools 实例上的 Select Element android：如何通过chrome远程调试APP中的webView的h5代码，然后在您的 Android 设备屏幕上点按此元素。 请注意，Select Element 将在第一次触摸后停用，因此，每次想要使用此功能时您都需要重新启用它。

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

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

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

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

关于抓屏的一些注意事项：
标签：

相关文章