移動端調試工具-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地址 和 自定義的端口。

點擊連接，便可看到如下界面

點擊其中一個進入便可調試

若是以爲本文不錯的話，幫忙點擊下面的推薦哦,謝謝！
>>>>點擊閱讀原文