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插件安装完效果是这样的  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等各部分功能，如此神器，能大大提高效率。
版权声明：本文为p2227原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。