基於HTML5手機技術方案（如Phonegap）的調試方案

基於HTML5手機技術方案（如Phonegap）的調試方案

咱們在作基於html5開發，或者手機跨平臺方案時，老是會用到Phonegap, JQuery mobile, XUI, Jqmobi, Sencha Touch,JQuery Touch,等，這些都是前端開發的方式，咱們不得不去跟前端工程師同樣，去進行前端調試，可是Fire Fox + Firebug 或者Chrome開發者工具是經常使用的方前端方法，但這些方法一用到Phonegap等方案上卻遇到了最大的問題，跨域訪問，因而咱們不得 不另闢蹊徑。

是什麼呢？Dreamweaver CS6.5以上的版本的移動支持？那只是一個美麗的幻想。呵呵

咱們回到前端調試的另外一個利器，由於別的工具太少，咱們不得不被迫稱之爲「神器」----Weinre (WEb INspector REmote)

步驟以下：

1.Weinre環境搭建:

     之前用它時還好，能夠下載jar包在java環境下運行，如今不行了，github上下載的要用了NodeJS環境來運行，什麼？你不知道什麼叫 NodeJS?做爲了下前端開發工程師，這是一個罪過，由於這個東西的出現，可讓精通js的前端工程師們直接跨入高併發網站的開發中去,呵呵，書歸正 傳，這裏介紹windows下環境搭建。

 網上下載NodeJS安裝環境，進行安裝。安裝完成後，利用NodeJS的模塊管理工具NPM從NodeJS的模塊倉庫中下載Weinre,看到這裏，你們必定想起了linux上的apt-get,yum,及項目工具maven的組件倉庫。

在NodeJS的命令行環境下，直接npm -install weinre就搞定了一切，簡單吧？：） 而後，你就能夠在NOdeJS的node-modules\.bin目錄下找到weinre.cmd命令，執行它，能夠設定一個主機綁定參數好比 --boundHost=192.168.1.100，好了，weinre環境好了。其實就是啓動了一個web服務，中介代理傳輸調試瀏覽器與移動設備中 瀏覽器中的數據，從頁能夠週期性溝通數據。

若是你以爲本身搭建環境麻煩，也能夠用公網上已搭建好的weinre服務，只是速度慢得讓你想跳樓：）

2.使用weinre:

    打開一個webkit內核的瀏覽器好比Chrome.打開http://192.168.1.100:8080/client#abcdefg  (abcdefg這是一個標識id只要與移動設備里加入的腳本所指向的id一致就好了）。

    在移動設備的啓動頁面的js中，加入以下內容 <script src="http://192.168.2.100:8080/target/target-script-min.js#abcdefg"></script>

3.調試：

    在移動設備中運行啓動頁面。在Chrome中就能夠進行調試了。