移动端调试工具-Debuggap

随着移动互联网的迅速崛起，开发移动应用程序愈来愈多，但若是在移动端开发应用程序须要调试时，额… 仿佛又回到了IE时代，最方便也只能处处 alert 来调试。目前已经有一款产品能够作到这一点，好比phonegap，可是phonegap的调试问题很是麻烦，不能真正作到有效提升效率。下面将介绍debug工具。这是一款神器，它简单易用的同时又不影响它的强大，它可以：

• 不须要安装便可运行在Windows、Linux和Mac平台上
• 支持各类平台(Android,IOS,WebOS,BlackBerry,Firefox OS,Windows Phone等等)
• 支持全部HTML5框架(好比phonegap)和浏览器
• 支持快速查看元素节点树
• 能够同一时间调试多个设备
• 支持Android设备单步调试,观察变量等等

话很少说，动起来的吧。

1.下载解压

首先到官网根据本身的色板平台下载相应Debuggap,下载完毕后解压便可，无需安装。解压后，目录结构是这样的，其中DebugGap.exe是运行程序，双击便可运行；而client文件夹下存放的是DebugGap.js。

2016/01/25  15:50    <DIR>          .
2016/01/25  15:50    <DIR>          ..
2015/05/26  22:04    <DIR>          client
2015/04/01  22:05        39,340,032 DebugGap.exe
2015/03/29  15:39           860,672 ffmpegsumo.dll
2015/03/29  15:39         9,956,864 icudt.dll
2015/03/29  15:39           102,400 libEGL.dll
2015/03/29  15:39           873,984 libGLESv2.dll
2015/03/29  15:39         4,001,552 nw.pak
2015/03/29  15:39         4,207,616 nwsnapshot.exe
2015/05/26  22:02               231 package.json
2015/03/29  15:39               463 readme.txt
2016/01/26  13:48    <DIR>          source
               9 个文件     59,343,814 字节
               4 个目录 288,704,741,376 可用字节

2.使用

使用分为三部分：

• 在项目中引入client文件夹下的DebugGap.js文件
• 配置客户端
• 启动debuggap程序

全过程示范：
第一步：新建一个测试页面。为了使咱们手机能访问到，咱们将测试页面放入xamp搭建的本地服务器中，并在页面中经过<script src="debuggap.js" type="text/javascript"></script>引入debuggap.js。（为了引用方便我已将debuggap.js拷到与测试页面同一个文件夹下）
第二步：使用手机访问页面，会发现页面上多了个蓝色按钮，点击后进入 config，配置地址为电脑ip地址和自定义的端口（出于偷懒，下面全部的图都是从think2011拷的）

第三步：在电脑上运行 DebugGap.app，接着输入本机IP地址 和 自定义的端口。

点击连接，便可看到如下界面

点击其中一个进入便可调试

若是以为本文不错的话，帮忙点击下面的推荐哦,谢谢！
>>>>点击阅读原文