跨平臺移動開發實際上就是基於HTML5開發軟件界面和主要的業務邏輯，因此一套完善的基於移動平臺的HTML5開發環境是非常有必要的。這裏我主要的關注點是以下四點：
- Javascript和Jquery mobile的編輯器
- HTML5的各個元素的Inspector
- Javascript遠程斷點debug
- 移動平臺Javascript開發模式
1）Javascript和Jquery mobile的編輯器
談到Javascript的編輯器，市面上有很多，大家都有自己心儀的選擇，我這裏只是推薦三個我比較喜歡的：
- aptana studio. Eclipse插件更新地址：http://download.aptana.com/studio3/plugin/install
- Dreamweaver CS6. 官方地址：http://success.adobe.com/en/na/sem/products/dreamweaver.html
- appMobi. 官方地址：http://www.appmobi.com/
aptana studio的優點在於比較輕量級，與Eclipse集成，並且代碼自動完成和JS語法糾錯做得非常好，整個風格類似於VI，比較極客一點：
Dreamweaver CS6算是最爲強悍的HTML5的開發環境，並且是我所知道的唯一支持Jquery mobile所見即所得的開發工具（官方提供的在線編輯器除外），並且Javascript, CSS和HTML開發起來非常順手，最大的缺陷就是要收費：
appMobi非常適合在不同分辨率下的調試，非常cool的界面也非常做演示之用：
代碼編輯：
模擬器演示：
這些工具的具體安裝和使用我就不多說了，直來直去，自己體驗一下就知道了
2）HTML5的各個元素的Inspector
如果放在桌面系統上瀏覽器，這樣的工具是很多的，如firefox上的firebug，chrome上的開發者工具，IE上http watch和IE自帶調試工具，但如果放在移動平臺上，特別是基於phonegap這樣內置的webview來開發，這樣的工具就不是很普遍了。這裏推薦一個phonegap官方所提到過的工具：weinre
weinre通過架一個server，把調試器和device連接起來，原理就多說，2.0之後就沒看到Java的版本，因此只能通過NPM來安裝，順便提一下NPM是Nodejs的包管理工具，類似於Maven對於Java一樣。安裝Nodejs後就安裝好了NPM。之後安裝weinre非常簡單：
npm install weinre -g
如果在windows平臺上沒加任何配置，weinre會安裝在 C:\Users\***\AppData\Roaming\npm\node_modules\weinre\，然後啓動server:
node path-to-weinre-node/weinre --boundHost -all- --httpPort 8082這裏用-all-是爲了在0.0.0.0上打開端口8082，避免非本地無法遠程請求這個端口，然後在要調試的頁面里加上weinre的代理：
<script src="http://computer-ip:8082/target/target-script-min.js#anonymous"></script>
這裏computer-ip用能讓device連上主機的地址，當然有關device與主機網絡連接的問題我會在後面的文章中具體來談。之後就是在device上啓動應用程序，這裏就拿android做例子，IOS是一樣的。device啓動後，打開chrome瀏覽器（基於webkit內核的都行），訪問：http://localhost:8082/client/#anonymous，如果之前都問題的話，就能在target下看到device的連接，單擊後，會發現這個連接變綠，這說明已能調試遠程的device，之後就能像使用firebug或chrome開發者工具那樣來使用了，不過它缺了很重要的功能就是遠程JS斷點調試，不過我會在後面來介紹另外一個工具來實現，下面看看調試上的截圖：
3）Javascript遠程斷點debug
這裏推薦使用Aardwolf(https://github.com/lexandera/Aardwolf/)來實現這個功能，它的原理和weinre類似，也是通過架server來遠程debug device。下載Aardwolf後，啓動server:
node Aardwolf_install_folder/app.js -h -d web_app_pathweb_app_path裏就是你需要調試的web應用，裏面包含需要調試的JS。
然後類似於weinre，需要在html裏添加Aardwolf代理：
- <script src="http://computer-ip:8500/aardwolf.js"></script>
- <script src="http://computer-ip:8500/js/main.js"></script>
其中aardwolf.js是系統js，js/main.js是需要調試的js，這個main.js經過aardwolf翻譯後，具備了被調試的能力。之後，啓動應用，就能在localhost:8000上進行debug：
4）移動平臺Javascript開發模式
雖然上面的種種方法都能在device上進行調試HTML5，但全程開發都這麼搞估計大家也快瘋掉，所以我還是比較推薦現在桌面的瀏覽器上開發完主要的界面和邏輯，主要phonegap與device結合點外，其他基本上和桌面瀏覽器是一致的。所以我會先開發一個Chrome APP版本，先重點搞定這個版本後然後再移植到其他平臺上，這樣在其他平臺上就只用調試和device相關的點。關於chrome app的相關內容我會在後面單獨來談。