2013年6月26日 星期三

JetBrains的即時編寫、即時預覽

從MIS轉網頁程式設計,呼~~那真是一條漫長的道路...

我的心路歷程也沒甚麼好說的,但是有一點一定要說,網頁程式的撰寫,我從FrontPag、DreamWeaver到NotePad ++,寫到現在,也算是小有心得,但是初學的時候,一定要找個可以預覽的軟體,因為我實在很懶得去看懂HTML,我只想專心寫asp....

一段時間後,我也開始學著撰寫CSS、javascript之後,發現DreamWeaver雖然好用,可是造成我一個很大的困擾,DreamWeaver自動產生的code不好維護,尤其在前一份工作(U-Car)的長官的要求下,我開始全面使用NotePad++,也終於幾乎不用DreamWeaver的協助了(除了要寫map area)。

可是寫完程式,我還是想要預覽呀! 尤其是網頁只是單純的html的時候,我就要切換到瀏覽器來看我的成果,懶人如我....還是想要有個即時預覽的功能呀...

最近開始自學AngularJS,發現國外教學影片中的軟體好棒喔!,就完全是我想要的功能! 找了一下,原來是 WebStorm - JetBrains這套軟體。

這套軟體可以即時預覽,真是太棒了! 安裝好之後,可是我怎麼試不出來? google了好久,原來解答就在google中....

1. 下載軟體 jetBrains官網(下載試用版)
2. 安裝Chrome 擴充 JetBrains IDE Support
3. 使用即時預覽的流程(請自行參考)

完成以上之後,不曉得怎樣,我的JetBrains就是不理我,JB的按鈕總是暗的,底下就是我解法了。

1. 先到C:\Program Files (x86)\JetBrains\WebStorm 6.0.2\bin資料夾下,找到WebStorm.exe.vmoptions,編輯這個檔案,加入這行-Drpc.port=53342



 2. 修改JetBrains IDE Support的port,在Chrome瀏覽器的右上方,找到JB按鈕,進入選項,將port改成53342。

 這樣應該就可以了,試試看吧。

完成模樣:


參考
http://hi.baidu.com/shaw_cd/item/8af86aa0e6c098a029ce9d1e
http://www.egghead.io/
https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji/reviews