真机远程调试:chrome://inspect

@youngwind 2016-06-28 05:50:19发表于 youngwind/blog 移动H5

问题由来

以前大多写PC端的页面,移动端的写得比较少。在调试移动端页面的时候往往结合采取以下三种方法:

  1. chrome直接模拟
  2. 手机上弹alert调试js
  3. 使用browser-sync同步变化

但是这种做法有以下的弊端:

  1. chrome模拟本身就不够精确,经常出现跟真机不一致的情况,无论是样式还是js。
  2. debug js的效率非常低,在真机上没有办法使用chrome debug js强大的功能。
  3. 假如网页运行在app的webview中,那么就更困难了,因为没法模拟webview具体的环境(webview常常会注入很多js,用于与app的交互。)

所以,必须找到一种使用chrome控制台直接调试真机上网页的方法,那就是“chrome:inspect”

demo演示

1、通过USB线连接安卓机和电脑(手机上设置允许通过USB调试)
2、chrome浏览器访问chrome://inspect(如果你手机上没有打开任何网页的话,这里的列表会显示空)
3、手机浏览器打开任意一个网页(比如百度,你就会发现网页出现在上面的列表中,如下图)
4、点击inspect就可以调试对应的网页

image
2016-06-29 8 23 12

进阶:调试webview

现在我们来看看如何用这种方法调试安卓app里面的webview。我写了一个简单的安卓app,仓库在这儿。app下载地址在这儿,你也可以直接用手机扫描下面的二维码。
1467159501

下载安装了这个app之后,点击首页最后一个按钮,"打开webview“按钮,那么就会新开一个activity,然后在里面的webview打开百度的首页,这个时候访问 chrome://inspect 就可以调试该网页了。
screenshot_2016-06-29-08-27-43_com example youngw

要注意这么一个地方:安卓app里面必须添加相应的代码:

// 添加了chrome:inspect bebug功能
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            if (0 != (getApplicationInfo().flags &= ApplicationInfo.FLAG_DEBUGGABLE))
            { WebView.setWebContentsDebuggingEnabled(true); }
        }

参考资料

  1. Android开发之WebView详解
  2. 如何使用gradle打包apk
  3. 如何使用adb安装apk
  4. 安卓真机调试google官方教程
  5. chrome inspect 远程调测:Chrome on Android之一 普通调试
  6. 真机远程调试方法大全

遗留问题:

  1. IOS的调试暂时忽视了
  2. 除了chrome://inspect以外的其他调试方法有待研究
  3. 上面写的Webview只是一个最简单的Webview,还需要继续研究Webview。
  4. 我们都知道,要想原生app与前端页面交互,必须做到java和js方法的互相调用,这个东西应该是叫做JSBridge,有成熟的第三方库,比如业内做得比较好的是微信。我还需要去研究一下如何使用这些库,他们实现的原理是什么,然后自己实现一个简单的demo。