Skip to content

使用chrome调试android前端页面

Jump to bottom
huang-qing edited this page May 2, 2017 · 1 revision

使用chrome调试android前端页面

下载Chrome浏览器

官方教程：remote-debugging

开源工具Stetho

功能：

安卓远程调试目前支持所有操作系统（Windows,Mac, Linux, and Chrome OS.）中调试，支持：

  • 调试站点的页面

  • 调试安卓原生App中的WebView

  • 实时将安卓设备的屏幕图像同步显示到开发机器。

  • 通过端口转发（port forwarding）与虚拟主机映射（virtual host mapping）实现安卓移动设备与开发服务器进行交互调试。

调试要求：

  • 开发环境安卓桌面版Chrome32+

  • 一条USB数据线，连接电脑与移动设备，安装相应机型的USB驱动

  • 如果是调试网页，移动设备需要安装Chrome for Android ，且安卓系统须为Android 4.0+

  • 对于APP WebView的调试，需要系统为Android 4.4+ 并且原生应用内的Webview须进行相应的调试声明配置

主要的步骤：

  1. 电脑上安装Android SDK

  2. 移动设备为Android 4.2及更高版本

  3. 在pc安装最新版本的chrome

  4. 调试WebView需要满足安卓系统版本为Android 4.4+已上。并且需要在你的APP内配置相应的代码：

在WebView类中调用静态方法setWebContentsDebuggingEnabled，如下：

    if (Build.VERSION.SDK_INT >=Build.VERSION_CODES.KITKAT) {  
        WebView.setWebContentsDebuggingEnabled(true);    
    }  

安卓WebView是否可调试并不取决于应用中manifest的标志变量debuggable，如果你想只在debuggable为true时候允许WebView远程调试，请使用以下代码段：

if (Build.VERSION.SDK_INT>= Build.VERSION_CODES.KITKAT) {  
    if (0 != (getApplicationInfo().flags &=ApplicationInfo.FLAG_DEBUGGABLE))  {
        WebView.setWebContentsDebuggingEnabled(true);
    }  
} 
  1. 手机中打开“设置”->"开发人员选项"->"USB调试"

20150511160350007.png

20150511160359055.png

  1. 用USB数据线连接设备，驱动装好连接成功后，你可能会在设备上看到一个弹框请求允许使用这台计算机通过usb调试。

20150108192728031.jpg

  1. 打开pc侧chrome, 在地址栏中输入chrome://inspect/#devices，或者about:inspect。选中discover usb devices。可以看到我们的手机设备，如下图所示:

20150511160443825.png

  1. 如果USB连接成功，这时候我们可以看到移动设备的型号和设备上运行的页面和允许调试的WebView列表。找到需要调试的目标页面，点击inspect即可打开DevTools 。

20150511160819170.png

  1. **点击"inspect"时，如果遇到启动了一个白屏界面，说明要翻墙才能使用。**一般情况下，只在第一次使用"inspect"时需要翻墙，以后会缓存在本地。

术语解释：

adb：Android Debug Bridge

相关资料：

Clone this wiki locally