移动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

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

  • 快速查找元素。

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

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

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

配置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调试开发选项
时间: 2024-08-01 05:16:14

移动page调试工具DebugGap的相关文章

移动端调试工具DebugGap推荐。

因为现在项目大部分都是在写移动端,但是调试起来实在是不方便,虽然可以用chrome来模拟手机端,但实际上差别还是有点大的,最近找到了一款比较不错的调试工具,这里分享一下了,虽然网上已经有分享过了,但还是想自己写写,反正自己写着高兴就行. 这款工具叫:DebugGap 首先到官网下载程序 http://www.debuggap.com/ 下载完解压后是这样的 在client文件夹下面有一个debuggap.js把这个js文件拿出来放到你要测试的文件里面把他引入进去. 现在我们打开这个页面可以看到这

UC的U3、百度的T5和腾讯的X5内核webview的调试工具---DebugGap

随着移动互联网时代的到来,BAT公司加速在移动互联网的布局,特别在手机浏览器上,分别讲述自己公司产的内核有如此如此的快,性能如此的好. 在这里,将要讲诉用什么工具来调试开发BAT公司的这三款产品. 目前市场上,功能最强大,使用率最高的,肯定是属于DebugGap了. 首先,DebugGap是一款跨平台的开发工具,可以在Linux,Mac和Windows下运行,免安装,可以copy给同事或者朋友. 其次,可以完好的调试各个平台和深度定制化的webkit(比如U3,T5,X5等国产内核),还可以同时

BrowserSync前端调试工具使用

上次介绍了一款DebugGap移动端调试工具DebugGap推荐.但是这几天使用了之后感觉还是有些不足,尤其是里面的调试工具虽然和Chrome里面的调试长的很像,但是多少有些不同,使用起来还是不太方便的,看到一位仁兄介绍的BrowserSync,于是看看了,感觉还行吧.它主要是用来同步更新的,比如文件修改了,浏览器会自动刷新,以及还有一点好处就是,PC,移动端都是同步的,可惜的是没有调试工具,在Chrome调试工具里面调试的不会同步更新到手机端,要是这个可以就好了. 虽然没个调试工具,但我们可以

移动端远程调试工具

两款移动端远程调试工具debuggap http://www.debuggap.com/Vorlonjs http://vorlonjs.com/ Debuggap亲测可行,但是有些坑Vorlon新出的.还没试

DebugGap调试腾讯X5内核webview

国内腾讯x5内核浏览器如火如荼地进行着,对于腾讯的这个开放平台,已经被很多公司应用. 腾讯X5作为Android webview的优化,在很多性能上,的确改良了不少,但是对于h5的支持,我不得不在这里吐槽一下,为什么把大名鼎鼎的WebSocket给屏蔽没了,很是忧伤. 作为开发必须要有调试工具DebugGap,因为基于WebSocket进行远程调试,但是X5不知怎么的,把WebSocket这么重要的功能给吃了,很是遗憾.导致DebugGap只能对X5内核进行一下基本的Inspect 接下来,我将

浏览器内核总结

一般来讲,浏览器分为外壳部分和渲染部分.外壳部分就是用户看得见摸得到的外观和操作界面;而渲染部分则包括了浏览器内核和JS引擎,其中JS引擎主要负责执行javascript语言实现网页上的动作,而内核则负责渲染网页,把数据变成用户可以看得见的网页内容.     浏览器内核也就是浏览器所采用的渲染引擎“Rendering Engine”,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息.不同的浏览器内核对网页编写语法的解释也有不同,因此同一网页在不同的内核的浏览器里的渲染(显示)效果也可能不

试说移动端是如何调试的?

移动端调试; (1)模拟手机调试: (2)真机调试之android手机+Chrome: (3)真机调试之iphone+safai: (4)UC浏览器: (5)微信内置浏览器调试: (6)调试工具debuggap: (7)抓包; 细节参考:https://segmentfault.com/a/1190000005964730 原文地址:https://www.cnblogs.com/GGQQ/p/10097058.html

让被巡视对象摸不着规律

http://v.qq.com/page/l/o/t/x0414yqyi7y.htmlhttp://v.qq.com/page/4/z/l/t0414qgn8mp.htmlhttp://v.qq.com/page/p/c/r/j0414oxk8t7.htmlhttp://v.qq.com/page/l/5/1/f0414554cxg.htmlhttp://v.qq.com/page/f/f/o/w04144bi3ve.htmlhttp://v.qq.com/page/j/n/u/j04148kz

前端技术-调试工具(下)

页面制作之调试工具 五.Profiles 这个主要是做性能优化的,包括查看CPU执行时间与内存占用等. 例述如下:原文地址:http://www.smashingmagazine.com/2012/06/12/javascript-profiling-chrome-developer-tools/. 你的网站正常运转.现在我们来让它运转的更快.网站的性能由页面载入速度和代码执行效率决定.一些服务可以让你的网站载入更快,比如压缩JS和CDN,但是让代码执行的更快你要做的事情.代码中很小的改动都可能