工欲善其事，必先利其器。作爲一名web前端開發者，我們要想工作得心應手，勢必離不開順手的工具。Hbuilder作爲web編輯器的新秀就是這樣一個利器。下面來一探究竟。
HBuilder是DCloud推出的一款支持HTML5的免費WEB開發IDE。
HBuilder的編寫用到了Java、C、Web和Ruby。它基於Eclipse，所以順其自然地兼容的Eclipse的plugin。
HBuilder本身主體是由Java編寫，
所以你的機器裏需要有java運行的環境。
對於非java的開發者來說，需要安裝一下JDK。
JDK下載地址：
http://www.oracle.com/technetwork/java/javase/downloads/index.html
HBuilder下載地址：
http://www.dcloud.io
點擊圖中Download按鈕下載，下載後免安裝直接點擊即可使用。
打開HBuilder之後，它會要求你註冊一個用戶，然後纔可以使用。
第一次使用必須註冊用戶，登錄纔可以，這是它的硬性要求。按照官方的說法，HBuilder不單單希望只是一個工具，而是把工具和社區聯繫起來，所以纔要求用戶註冊。
假設一切順利，啓動HBuilder後，大家會看到如下的界面：
打開自帶的HelloBuilder工程。裏面有一個lesson1.txt文檔。裏面有所有的操作方法說明。
我建議大略看一遍即可。在實踐中邊用邊查就行，熟能生巧。
接下來，我們開始激動人心的第一步：建立一個移動APP應用。如下，點擊“新建移動APP”：
接下來就會彈出一個選擇模板的對話框：
這裏一定要注意：默認的模板選項是“空模板”。不包含任何的HBuilder提供的畫面組件 – 這其實沒有意義的。所以，這裏一定要選擇“mui項目”。它包含了 mui (默認提供的畫面組件，也就是CSS 和 Javascript)。
建立的工程類似如下：
其中index.html 是入口文件。 css 是樣式表目錄，fonts 是字體目錄， js 是 javascript目錄，這三個目錄是 mui 自帶的。manifest.json 是配置文件，也就是你的APP的配置文件，例如入口文件的指定，圖標的指定。
具體的設置以後再說，我們要馬上在手機上啓動我們的APP！
HBuilder有強大的聯機調試功能。我只用過 android 來調試，當然 iphone 也可以。
把你的手機和電腦連接上，然後點擊這個圖標：
如果連接順利，那麼上面會顯示手機的名稱。然後再點擊綠色的運行圖標就可以了。接下來你就可以看到手機上運行了你的APP。當然，因爲什麼也沒有，畫面是一片空白。到此爲止，我們已經可以在手機上運行APP了，走出了第一步。
總結
優點：
1，HBuilder內置了HTML5及瀏覽器擴展前綴語法庫，你用它寫web程序的時候，它會給你自動提示或者補全。
2，懶人設計有其特色的代碼輸入法創新、代碼塊創新、emmet的集成、快捷鍵語法設計、無鼠標操作，通過一系列智能聯想方便我們快速編碼。
3.邊看邊改模式（個人非常喜歡）
開啓這個模式後，調試UI的時候，我就不用在編輯器和瀏覽器之間來回切了，太方便了。
缺點：
1，控制檯居然不能用 ——！，不得不吐槽一下。既然做了邊看邊改模式，但是控制檯扯了後腿，反而很棒的功能變得雞肋了。
2，快捷鍵不夠完善，而且不能像webStorm那樣有多套快捷鍵方案提供選擇，多有不便，還得手動去一個個改，麻煩。
總之，瑕不掩瑜，尤其是國產IDE, 做到這個程度，難能可貴，實際開發，個人建議和webStrom配合使用。
HBuilder有關網址如下：
官網：http://dcloud.io/。
HBuilder幫助文檔: ：http://ask.dcloud.net.cn/docs