webstorm+nodejs+JetBrains IDE Support+chrome打造前端開發神器

#webstorm+nodejs+JetBrains IDE Support+chrome打造前端開發神器
-- 工欲善其事 必先利其器


##各工具介紹
`webstorm`是**JetBrains**公司發佈的一個web開發IDE，支持代碼提示、補全、定位、與git集成等等各類功能，已經跟傳統強類型語言的開發環境感受無多大差別。

`node`是一個服務端的 javascript運行環境

`JetBrains IDE Support`俗稱JB插件(⊙o⊙)，是一個chrome的插件。與webstorm聯合使用，是溝通它倆的橋樑。

各個工具獨立使用可能都有人知道，但本文講述的是把他們聯合起來使用的案例。

##下載安裝各工具
各個工具的獨立安裝去搜索一下便可。webstorm不是免費工具，固然，在天朝，呵呵。我機器上的是webstorm6.0.2+Node.js 0.10.17 (x64)+JetBrains IDE Support 2.0+Chrome  32.0.1700.107 m

JB插件安裝完效果是這樣的

![JB插件](https://images0.cnblogs.com/blog/84053/201402/161815146907042.jpg)

webstorm界面

![webstorm](https://images0.cnblogs.com/blog/84053/201402/161819021465198.jpg)

##關聯webstorm和node

在如圖所示的位置中選擇 **Edit Configurations**

![Edit Configurations](https://images0.cnblogs.com/blog/84053/201402/161823208996018.jpg)

如圖所示，增長一份Node.js的配置，配置好node運行程序路徑，項目路徑和web服務程序路徑

![](https://images0.cnblogs.com/blog/84053/201402/161823273255880.jpg)

其中的**web-server.js**是`angular`的一個示例中自帶的，應該有組件依賴，能夠本身去github上克隆下來 https://github.com/angular/angular-phonecat

##開始使用與調試
點擊 **Edit Configurations**旁邊的run或者debug，便可啓動node，而且路徑等都配置好了，不用像之前那樣一個字一個字的在命令行敲。並且node的啓動也很快，一秒左右便可（個人機器是4G內存），不像之前tomcat那樣一大堆無聊內容。

默認狀況下**node是8000端口的**，chrome瀏覽器敲 http://localhost:8000/ 會列出工做目錄下的文件（這個是web-server.js裏面定義的邏輯，用其餘服務程序不必定會有）。本身在webstrom中新建一個web工程便可瀏覽。

##webstorm+nodejs+JetBrains IDE Support+chrome
可能以前的調試還不算有什麼亮點，但再加上JetBrains，就不同了，在上面打開的瀏覽器窗口，確認地址欄右邊的JB插件圖標是亮的，即表示chrome和webstrom是鏈接着的。

![JB插件圖標是亮的](https://images0.cnblogs.com/blog/84053/201402/161847315177255.jpg)

這時候你在webstrom中做出的任何修改（主要是HTML主文件），會馬上在瀏覽器中體驗出來，連保存+F5刷新的動做都省下了

![無刷新調試](https://images0.cnblogs.com/blog/84053/201402/161851255142543.jpg)

固然客戶端的JS調試仍是要用瀏覽器的F12開發人員工具，webstrom自帶的是調試服務端（node）js的功能。

在開發過程當中，咱們常常要修改，保存，刷新。利用此套工具，綜合了webstorm+nodejs+JetBrains IDE Support+angular+chrome等各部分功能，如此神器，能大大提升效率。