http://blog.allenm.me/

其他平台去这篇文章看

             //js调试调试功能支持4.4版本以上的
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
WebView.setWebContentsDebuggingEnabled(true);
}
//js生效
webView.getSettings().setJavaScriptEnabled(true);
//让 h5页面中的 alert生效
webView.setWebChromeClient(new WebChromeClient(){
@Override
public boolean onJsAlert(WebView view,String url,String message,JsResult result)
{
return super.onJsAlert(view,url,message,result);
}
});
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 时,经常会遇到这个情况。

总结

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

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

android js调试的更多相关文章

  1. Android 平台JS调试技术

    1.  测试技术简介 Android平台微信公众号一般以H5的形式开发,测试发现流量一般都通过js进行加密传输,导致无法对越权.SQL注入等风险点进行测试.针对此难点,本手册会介绍包括Android环 ...

  2. react native android模拟机调试

    模拟机调试首先要确认你的环境变量的path中是不是有adb的路径,adb一般在android的adk目录下的platform-tools下,android目录默认是在c盘user/administra ...

  3. Ubuntu杂记——Ubuntu下以USB方式连接Android手机调试

    在Ubuntu下进行Android开发,发现自己的手机就算打开USB连接.USB调试还是连不上,一直都是显示??????.百度了很多,发现都是要改“ /etc/udev/rules.d/50-andr ...

  4. 【转】天啦噜!原来Chrome自带的开发者工具还能这么用!(提升JS调试能力的10个技巧)

    天啦噜!原来Chrome自带的开发者工具还能这么用! (提升JS调试能力的10个技巧)   Chrome自带开发者工具.它的功能十分丰富,包括元素.网络.安全等等.今天我们主要介绍JavaScript ...

  5. [转]九个Console命令,让js调试更简单

    转自:九个Console命令,让js调试更简单 一.显示信息的命令 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html ...

  6. node.js调试

    用了几天node.js感觉很新奇,但是调试问题实在是愁煞人,开始的时候懒的学习调试方法,看看异常内容就可以了,但随着代码复杂程度的上升,并不是所有错误都是语法错误了,不调试搞不定了,只好搜搜资料,学习 ...

  7. Atitit.android js 的键盘按键检测Back键Home键和Menu键事件

    Atitit.android js 的键盘按键检测Back键Home键和Menu键事件 1. onKeyDown @Override public boolean onKeyDown(int keyC ...

  8. Android Studio调试功能使用总结【转】

    Android Studio调试功能使用总结[转]   这段时间一直在使用Intellij IDEA, 今天把调试区工具的使用方法记录于此. 先编译好要调试的程序. 1.设置断点 选定要设置断点的代码 ...

  9. 一探前端开发中的JS调试技巧

    前言 调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今 ...

随机推荐

  1. 论文笔记之:From Facial Parts Responses to Face Detection: A Deep Learning Approach

    From Facial Parts Responses to Face Detection: A Deep Learning Approach ICCV 2015 从以上两张图就可以感受到本文所提方法 ...

  2. C#中有关string和byte[]转换的问题

    byte[] byteArray = System.Text.Encoding.Default.GetBytes( str ); 怎么样,够简单吧? 反过来也是一样,把byte[]转成string: ...

  3. 掌握 Ajax,第 1 部分: Ajax 入门简介

    转:http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html 掌握 Ajax,第 1 部分: Ajax 入门简介 理解 Ajax 及其工作 ...

  4. Nginx+Tomcat实现反向代理及动静分离

    Nginx+Tomcat实现反向代理及动静分离 时间 2014-07-07 15:18:35  51CTO推荐博文 原文  http://yijiu.blog.51cto.com/433846/143 ...

  5. Codeigniter MongoDB类库

    安装方法:1.将mongodb.php 放到config目录2.将Mongo_db.php放到library目录 使用方法: $this->mongo_db->where_gte('age ...

  6. python3生成标签云

    标签云是现在大数据里面最喜欢使用的一种展现方式,其中在python3下也能实现标签云的效果,贴图如下: -------------------进入正文--------------------- 首先要 ...

  7. DMALL刘江峰:生鲜市场具有巨大O2O改造空间

    今日,全球移动互联网大会(GMIC)在北京-国家会议中心开幕.DMALL创始人刘江峰在全球O2O峰会论坛作主题发言时谈到,生鲜市场具有巨大O2O改造空间.同时这也是刘江峰在离开荣耀之后首次登台介绍自己 ...

  8. json字符串转map

    <dependency> <groupId>com.google.code.gson</groupId> <artifactId>gson</ar ...

  9. 用php自带的filter函数验证、过滤数据 -转载

    PHP过滤器包含两种类型 Validation:用来验证验证项是否合法 Sanitization:用来格式化被验证的项目,因此它可能会修改验证项的值,将不合法的字符删除等. input_filters ...

  10. Hibernate 抓取策略fetch-2 (批量抓取batch-size以及hibernate.jdbc.fetch_size、hibernate.jdbc.batch_size)

    类关系: User N~1 Group 测试代码: System.out.println("1"); List stuList = session.createQuery(&quo ...