youngwind/blog

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

youngwind opened this issue · 2 comments

youngwind commented

问题由来

以前大多写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。
securityBoB commented

应用闪退哦

tonymiao2012 commented

可以通过ip+port方式远程调试web app。也是需要usb连接的