android js调试

http://blog.allenm.me/

其他平台去这篇文章看

 1             //js调试调试功能支持4.4版本以上的
 2            if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
 3                 WebView.setWebContentsDebuggingEnabled(true);
 4            }
 5            //js生效
 6            webView.getSettings().setJavaScriptEnabled(true);
 7            //让 h5页面中的 alert生效
 8            webView.setWebChromeClient(new WebChromeClient(){
 9                @Override 
10                public boolean onJsAlert(WebView view,String url,String message,JsResult result)
11                {
12                    return super.onJsAlert(view,url,message,result);
13                }
14                });         
15            webView.loadUrl("file:///android_asset/cpsc/index.html");

Android 平台

Chrome Mobile

Chrome for android 32 以及之后的版本具有远程调试的功能,你需要做的是:

  • 开启 Android 的 USB 调试功能。
  • 用 USB 先连接到你的电脑(windows 用户需要安装 Android 驱动)。
  • 在 Chrome for android 上打开你要调试的网页。
  • 在电脑上打开 chrome (同样最低需要 32 版本),进入 菜单 -> 工具 -> 检查设备 页面,确保 Discover USB devices 被勾选

如果设置正确的话,现在就可以看到你手机上打开的页面了,点击 inspect 进入我们熟悉的 Chrome develper tools 。

由于 Android 手机各种各样,如果遇到麻烦,请仔细阅读 官方文档

Android Webview

Android 4.4 开始,默认的浏览器已经是 chrome 了,所以 webview 也是 chrome 了,这就给了 webview 远程调试的能力。我们需要在 Android 里针对 Webview 做以下设置:

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

然后在你的 App 里打开要调试的页面,其余步骤和使用 Chrome for Android 一样,进行远程调试。

使用 Android 模拟器

鉴于目前 Android 4.4 的手机还比较少,你可以选择使用模拟器来进行调试。官方的模拟器太慢,推荐大家使用 genymotion , X86 架构的模拟器,速度和真机没什么两样了。对于只做 webview 调试的前端来说,只需要使用个人免费版就可以了。

其他方式

如果你的调试条件不能满足上面讲的任何一种,还可以使用 weinre 。只需要在页面里插入一段脚本,就可以进行远程调试,基本没其他限制。但是使用这个也是有明显的缺点的:

  • 不能给 javascript 打断点,基本只能用 console 来调试
  • 不支持查看元素的样式是写在 css 第几行,也不支持显示在哪个文件
  • 由于是通过网络来连接的,所以在调试移动网络的情况时,不好操作(需要服务端运行在一个移动网络可以访问到的机器上)

总之,weinre 仅仅适用于你没办法使用 Safari 或者 Chrome 进行远程调试的情况下,聊胜于无,调试 Android hybrid APP 时,经常会遇到这个情况。

总结

综上所述,可以根据下图来选择最优的调试方案:

Mobile debug

由于我目前只接触了 iOS 和 Android 平台的开发调试,其他的移动平台不了解,所以本文没涉及到 windows phone 等平台。欢迎大家留言或者 email 交流各种远程调试方案。

原文地址:https://www.cnblogs.com/friends-wf/p/4685007.html