#webstorm+nodejs+JetBrains IDE Support+chrome打造前端開(kāi)發(fā)神器 -- 工欲善其事 必先利其器##各工具介紹 `webstorm`是**JetBrains**公司發(fā)布的一個(gè)web開(kāi)發(fā)IDE，支持代碼提示、補(bǔ)全、定位、與git集成等等各種功能，已經(jīng)跟傳統(tǒng)強(qiáng)類(lèi)型語(yǔ)言的開(kāi)發(fā)環(huán)境感覺(jué)無(wú)多大差異。`node`是一個(gè)服務(wù)端的 javascript運(yùn)行環(huán)境`JetBrains IDE Support`俗稱(chēng)JB插件(⊙o⊙)，是一個(gè)chrome的插件。與webstorm聯(lián)合使用，是溝通它倆的橋梁。各個(gè)工具獨(dú)立使用可能都有人知道，但本文講述的是把他們聯(lián)合起來(lái)使用的案例。##下載安裝各工具 各個(gè)工具的獨(dú)立安裝去搜索一下即可。webstorm不是免費(fèi)工具，當(dāng)然，在天朝，呵呵。我機(jī)器上的是webstorm6.0.2+Node.js 0.10.17 (x64)+JetBrains IDE Support 2.0+Chrome 32.0.1700.107 mJB插件安裝完效果是這樣的webstorm界面##關(guān)聯(lián)webstorm和node在如圖所示的位置中選擇 **Edit Configurations**如圖所示，增加一份Node.js的配置，配置好node運(yùn)行程序路徑，項(xiàng)目路徑和web服務(wù)程序路徑其中的**web-server.js**是`angular`的一個(gè)示例中自帶的，應(yīng)該有組件依賴(lài)，可以自己去github上克隆下來(lái) https://github.com/angular/angular-phonecat##開(kāi)始使用與調(diào)試 點(diǎn)擊 **Edit Configurations**旁邊的run或者debug，即可啟動(dòng)node，并且路徑等都配置好了，不用像以前那樣一個(gè)字一個(gè)字的在命令行敲。而且node的啟動(dòng)也很快，一秒左右即可（我的機(jī)器是4G內(nèi)存），不像以前tomcat那樣一大堆無(wú)聊內(nèi)容。默認(rèn)情況下**node是8000端口的**，chrome瀏覽器敲 http://localhost:8000/ 會(huì)列出工作目錄下的文件（這個(gè)是web-server.js里面定義的邏輯，用其他服務(wù)程序不一定會(huì)有）。自己在webstrom中新建一個(gè)web工程即可瀏覽。##webstorm+nodejs+JetBrains IDE Support+chrome 可能之前的調(diào)試還不算有什么亮點(diǎn)，但再加上JetBrains，就不一樣了，在上面打開(kāi)的瀏覽器窗口，確認(rèn)地址欄右邊的JB插件圖標(biāo)是亮的，即表示chrome和webstrom是連接著的。這時(shí)候你在webstrom中作出的任何修改（主要是HTML主文件），會(huì)立刻在瀏覽器中體驗(yàn)出來(lái)，連保存+F5刷新的動(dòng)作都省下了當(dāng)然客戶(hù)端的JS調(diào)試還是要用瀏覽器的F12開(kāi)發(fā)人員工具，webstrom自帶的是調(diào)試服務(wù)端（node）js的功能。在開(kāi)發(fā)過(guò)程中，我們經(jīng)常要修改，保存，刷新。利用此套工具，綜合了webstorm+nodejs+JetBrains IDE Support+angular+chrome等各部分功能，如此神器，能大大提高效率。

轉(zhuǎn)載于:https://www.cnblogs.com/p2227/p/3551659.html

與50位技術(shù)專(zhuān)家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。