移动page调试工具DebugGap

webview是什么?

webView是安卓中用来显示html文本内容的的控件,对html5也有很好的支持,ios的控件UIWebView差不多。可以简单的理解为webview是app中内置的一个浏览器,是一款高性能webkit内核浏览器,在SDK中封装成了WebView组件;通过实例化一个webview的java代码可以看出,webview内置浏览器版本是依赖于机器的Android系统版本:

 WebView webview = new WebView(this);
 setContentView(webview);

认识DebugGap

官方地址http://www.debuggap.com

close

DebugGap可以同时调试多个设备。无论是什么平台和浏览器,支持大量的移动平台,只要移动平台支持HTML5

  • 快速查找元素。

inspect

* 当你的Web应用程序是很复杂时,如果你想找到一个特定的元素,如果使用“Insepct”功能,debuggap很快就会发现你的节点元素。

inspect

* 当你查看的元素,你可以使用盒映射来看它的位置,填充,边缘和大小;
  • chrome整合

inspect

* DebugGap集成了chrome的调试。这意味着可以单步,观察变量等。它仅支持Android设备。
  • 控制台

inspect

配置DebugGap

  • 运行远程DebugGap
    • 双击可执行文件“debuggap”以运行应用
    • 通常情况下,debuggap可以获得IP自动设置默认端口,如果没有,你可以手动设置,例如192.168.1.4: 11111
    • 单击“连接”按钮,为各类用户启动侦听器
  • 在客户端配置
    • 引入debuggap.js到Web项目中。(我们建议添加它之前,包括其他JavaScript文件)
<script src="你的debuggap.js文件地址" type="text/javascript"></script>
* 当您的Web应用程序加载,将在您的应用程序的一个蓝点
* 发掘现场,一四片叶子的三叶草将显示
* 点击“配置”页显示配置页。输入主机和端口应与那些在偏远的debuggap如192.168.1.4: 11111是相同的,然后点击“连接”按钮
  • 远程debuggap将检测到客户和开发者可以点击每个客户端调试。

注意

  • 添加代理192.168.1.4: 11111网络记录所有HTTP请求
  • 检查html元素(点击“检查”叶四片叶子的三叶草,然后点击你想检查元素)
  • 为了使用单步调试Android,请启用USB调试开发选项
原文地址:https://www.cnblogs.com/kinnjee/p/4152891.html