WebStorm 有哪些过人之处

1自带的版本控制，这功能挽救了我好多次了。

2优秀的代码定位能力，能轻松将光标定位到变量/属性/方法的定义处，对阅读代码非常有用。

聪明的代码联想、格式化功能。

3可定制的code template， 加强版的zen coding，而且不仅限于html和css。

4svn、git 等版本工具的支持，内置的 gist 非常方便。

5nodejs 最好的开发工具，没有之一。只要你会用 chrome 调试浏览器器端的 js，那么你就会用 webstorm 调试 nodejs。

6预处理语言的支持，使less、sass、cofeescript 等等语言的自动编译变得很简单。

7最爽的一点，remote host和live edit的组合使用，让你直接编辑远程文件并实时刷新，一下省去了你这么多步骤：保存本地文件， 上传本地文件到远程服务器， 刷新浏览器。

WebStorm被喻为“Web前端开发神器”

在门外汉来看，App软件开发是一件非常困难的事情，然而使用APICloud快速高效App开发平台，轻松6个步骤就可以完成App软件开发。

根据不同的应用需要，为您提供了Deep Engine（适合 Web 开发者）、SuperWebView（适合已有原生应用的开发者）以及数据云(适合需要快速简便实现服务端的开发者)。

APICloud平台为不同需求的人提供了不同的产品，如果你要从零开始制作App，那么选用Deep Engine产品，用HTML5等标准Web语言去开发和制作App，iOS和Android两个系统是同时生成的。

如果你已经有现成的App，希望加速开发和制作的周期，或是降低升级的难度和时间，那么选用SuperWebview产品。在已有的App中嵌入SuperWebview，就可以使用Web语言去继续开发和制作了，这样降低成本，缩短周期。

Sublime Text、Eclipse和Webstorm，耳熟能详的App开发工具都在APICloud上集成，你也可以选择使用APICloud Studio开发工具。使用你熟悉的HTML工具，再加上APICloud的插件，以2-3倍的效率进行App制作。

APICloud不会对开发工具做任何限制，使用任何 HTML5 开发工具都可以进行 APICloud 应用的开发工作。

如果您对 APICloud 开发尚未熟悉，在众多 HTML5 开发工具中，我们更建议您选择以下开发工具：

APICloud Studio3

APICloud Studio 3 是 APICloud 推出的一款更适合前端工程师的移动应用集成开发工具，基于业界领先的代码编辑器-Vscode深度定制 ，与 APICloud 平台的各种云端移动开发服务紧密结合，可以快速构建多端应用， Windows、Mac和Linux可以选择自己喜欢的操作系统进行开发。

Sublime Text 3

Sublime APICloud Plugins 是 APICloud 为开发者提供的一套开源的 Sublime Text 扩展插件，包括：应用管理、应用框架、页面模板、代码提示、代码管理、Widget 打包、真机同步、日志输出、管理自定义AppLoader等功能，其他的功能插件也在不断增加，这些插件已被 Package Control 成功收录，开发者可以直接在 Sublime Text3 中下载安装；所有插件都已开源，开发者也可以在此基础上按需求扩展自己的插件。

APICloud聚合了几乎所有国内主流的云服务模块，如支付、社交分享、视频直播、IM、语音会议等。这些模块都在聚合API中，你可以一站式选用App制作中所需的所有功能模块，一键就可以集成，快速高效。

你可以选择自己的本地服务器进行相连，也可以试用由APICloud的服务器端产品——数据云。数据云能够帮助你减少70%服务器端编码工作量，支持基于Docker技术的私有云环境。并且提供数据存储服务，支持在线设计NoSQL数据表，动态生成RESTFul API。

大量的模型库及内置模块，方便用户快速实现所需，可靠的BaaS服务，帮助用户避开服务器维护的泥潭。支持服务按需扩容，无须担心流量过载。

做完以上四步骤后，其实App制作的过程已经结束了。下面就是将这一套代码编译生成iOS和Android两套安装包，在这里，APICloud不仅提供真机调试功能，可以使你看到App最终的效果，还针对12个常用的Android市场，还提供一键生成渠道包服务，帮助你轻松上线到Android应用市场。

第六步：上线App的运营管理

APICloud不光为App制作提供服务，也提供App上线之后的运营管理。APICloud运营云产品涵盖推送、云修复、大数据统计分析等App运营必备功能。版本更新更能实现应用内增量更新，无需重新提交App。在这里要单独讲解一下云修复和大数据统计分析两个功能，通过云修复可实现App内快速回滚，让App拥有自我修复能力在App内部快速回滚的过程中，支持断点续传，全面保障App自我修复的完整性。而大数据统计分析的功能使得App的新增及活跃用户数据，几分钟即可摆在你的眼前，让你成为App的运营专家。同时还支持对App进行自定义事件统计,帮助你去了解用户在App中的特定行为数据、支持版本、终端分布及错误报告。

有人觉得vue项目难调试，是因为用了webpack。所有代码揉在了一起，还加了很多框架代码，根本不知道怎么下手。所以vue+webpack调试要从webpack入手。

1我们先从一般情况开始说。

-sourcemap

webpack配置提供了devtool这个选项，如果设置为 ‘#source-map’，则可以生成map文件，在chrome浏览器中调试的时候可以显示源代码。

devtool: '#source-map'

2然而这个设置实际上没这么简单。webpack官方给出了7个配置项供选择:

01devtool介绍

这里不同的配置有些不同的效果，比如是否保留注释、保留行信息等，具体每一条什么意思这里不详解释，有兴趣的童鞋可以参考这篇文章

官方默认的是用 ‘#cheap-module-eval-source-map’

devtool: '#cheap-module-eval-source-map'

设置好之后，在vue项目调试的时候，代码里面标注debugger的时候就能看到对应的代码了，非常方便。

02debugger

或者，直接找到对应的文件。在chrome用 ’ctrl(command) + p‘，输入文件名，可以找到对应的源代码。

command+p

打断点：

断点

需要注意的是，这里断点会打在下一行。同时一行代码运行在它的下一行才算执行。

03-vue-cli

vue家的项目脚手架，推荐使用。vue-cli老家在这里

vue-cli可以帮我们自动搭建项目，首先npm全局安装

npm install -g vue-cli

然后创建一个新的项目

vue init webpack my-project

一路回车，搞定。(更多配置项请参考上面给出的vue-cli链接)

这里从网上下载了一个带webpack的vue项目(跑之前记得npm install一下)

04vue-cli webpack

从bulid文件夹里面就大概能看出：

•webpackdevconf: 开发模式用

•webpackprodconf: 生产模式用

其中，开发模式提供了devtool为’#cheap-module-eval-source-map’，生产模式根据config文件夹下的productionSourceMap变量控制是否使用。

若为true，则devtool为’#source-map’

其他使用方法一致。非常方便。

3线上调试

平时开发的时候，我们用webpack的热加载，可以省去挂载调试的步骤，非常方便。但是发布后部署到服务器上，就失去了这个本地优势。

如果使用挂载文件方式会比较麻烦。由于webpack打出来的文件有版本号这些信息，而且发布一个包看代码量可能需要等待不等，这个方案不实际。但是如果挂载的是热加载到端口下的文件的话，这个问题就很好办了。

-热加载

在此之前，先来分析一下webpack的热加载原理。

对项目抓包可以发现这么一个文件：__webpack_hmr

__webpack_hmr

这是webpack热加载的服务器推送事件，eventsource类型，功能和websocket有点类似。大致作用是建立一个不会停止的stream流链接，服务器发送更新数据回来append到流的末端，前端读取最新append的数据，然后动态的更新页面上的东西。

接下来我们观察下上文提到的更新数据有哪些。随便更新一个文件，触发热加载，再抓个包，发现有两个hot-updatejson和一个hot-updatejs文件

热加载更新文件

这些具体做了些啥我不知道，这里就不深究了。应该是根据json里面的数据，达到一个准确更新的效果。

所以热更新其实就是监听服务器上的数据，有修改的话服务器发送数据过来，前端把数据拿来后替换到页面上这么一个过程。

-AutoResponder

接下来谈谈线上挂载测试，这里推荐一款软件：fiddler

fiddler有一个功能叫做AutoResponder，它可以将一个地址指向另一个地址。之所以用这个软件，是因为它能匹配正则，非常方便。

AutoResponder

上一节说到，webpack热加载用到了这几类文件

•__webpack_hmr

•xxxxxxxxxxxhot-updatejson

•xxxxxxxxxxxhot-updatejs

原理是这样的 svn服务器一般放在公共的服务器上，大家连这个服务器，在MyEclipse上使用svn控件 可以下载svn上的项目至本地，所以很多公司将开发要用到的软件都放在svn上，有同事来只要连上svn 就可以把需要的东西下下来了

更新是指 服务器上变动了的 而你本地没有变动，需要你更新，

提交是指 服务器上没有的，也就是你改过的东西，你需要将代码提交，其他同事更新你的代码

同步，是在更新提交之前做的工作，更新提交前先同步，可以知道哪些东西要提交哪些东西要更新，哪些东西是冲突的（你和同事 改了同一个文件，可能会出现冲突），出现冲突不能提交也不能更新，只有先将冲突的文件选择用本地的文件覆盖或用服务器的文件覆盖本地后才能更新或提交，具体的用法还需要楼主多实践，这东西用过一次就会了

上面术语在MyEclipse里的选项是

同步：synchronize with repository (如果你的项目连了svn 右键你的项目 team就能看到)

点击同步后会进入到synchronize 的界面 再右键项目就有

commit 提交

update更新

Mark as mergerd （冲突时点它 冲突的文件会用本地的覆盖服务器的，意思就是说 用你的！）

override and update (冲突时 右键文件 选此项表示 用服务器的！)

前者不支持php后者支持php，做web开发用webstorm好，它有以下优点

1) 自动保存，不需要你一次又一次地ctrl+s啦，所有的操作都直接存储，当然，万一键盘误操作也会被立即存储，不过我们可以通过本地版本控制解决这个问题。

2) 任何一个编辑器只要文件关闭了就没有历史记录了，但是webstorm有。就是说，只要webstorm不关闭，你的文件随时可以返回到之前的操作，webstorm关闭重启后这些历史记录就没有了。这样的坏处也是显然的，由此带来的内存消耗也必然比较大。

3) 任何一个编辑器，除了服务器svn之外，没有本地版本，但是webstorm提供一个本地文件修改历史记录。

4) 与时俱进的眼光。zencoding于2009年出现于it界，在这之后，鲜有工具直接集成到里边。webstorm 20之后就集成了。nodejs,html5,git,cvs等 就不一一列举了。

5)提供的插件也是比较齐全，安装非常方便。这样带来了另外的问题，以前的eclipse是安装第三方的，webstorm貌似不能安装第三方的插件。

6) 可以导出当前设置：File -> Export setting。