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等各部分功能，如此神器，能大大提高效率。