#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 mJB插件安裝完效果是這樣的webstorm界面##關聯webstorm和node在如圖所示的位置中選擇 **Edit Configurations**如圖所示，增加一份Node.js的配置，配置好node運行程序路徑，項目路徑和web服務程序路徑其中的**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是連接著的。這時候你在webstrom中作出的任何修改（主要是HTML主文件），會立刻在瀏覽器中體驗出來，連保存+F5刷新的動作都省下了當然客戶端的JS調試還是要用瀏覽器的F12開發人員工具，webstrom自帶的是調試服務端（node）js的功能。在開發過程中，我們經常要修改，保存，刷新。利用此套工具，綜合了webstorm+nodejs+JetBrains IDE Support+angular+chrome等各部分功能，如此神器，能大大提高效率。

轉載于:https://www.cnblogs.com/p2227/p/3551659.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的webstorm+nodejs+JetBrains IDE Support+chrome打造前端开发神器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。