WebStorm 6.0的live edit功能实现步骤

http://hi.baidu.com/shaw_cd/item/8af86aa0e6c098a029ce9d1e

JetBrains最新发布的WebStorm 6.0确实是Web前端开发的最佳工具,试用了一下,简直爽惨了。破天荒地第一次自费掏腰包买了正版的,才99块(OSChina争取到了中国用户3折)。


微博上有位小兄弟提到每次用WebStorm编写完代码后,要打开浏览器,清理一下缓存,然后才能看到结果,抱怨开发效率有点低。我猜他是习惯用DreamWeaver这种所见即所得的工具。说实话,前端开发用DreamWeaver,跟WebStorm相比,开发效率简直就不是一个档次的。至于这位小兄弟的问题,用WebStorm的“live edit”功能就可以搞定的。


好吧,好人做到底,我把步骤写出来。

1.打开WebStore的设置对话框,找到live edit选项,选中Enable live editing。

2.打开Chrome浏览器,进入Chrome网上商店,搜索JetBrains IDE Suport扩展程序。点击“添加至Chrome“按钮,安装该扩展程序到Chrome。这时候,Chrome浏览器工具栏上就会出现一个JB图标。

3.在WebStorm中新建一个html文件,然后按ALT+F2打开浏览器选择浮动窗,选Chrome,查看正在编辑的网页。

4.切换到WebStorm,修改html/css/JS,然后切换了到Chrome,你会发现chrome那边跟着也变了。如果你觉得效果还不够理想,那就并排打开WebStorm和Chrome,惊呼So Cool去吧。

Over。
### WebStorm Live 插件安装、使用与配置 #### 安装Live Edit插件 对于希望实现实时预览功能的开发者来说,在WebStorm中集成Live Edit插件是一个不错的选择。该插件允许开发人员在编写HTML、CSS或JavaScript代码的同时即时查看更改的效果,无需手动刷新页面[^2]。 #### 使用Live Edit调试并解决CORS问题 当利用Live Edit进行前端开发时,可能会遇到加载外部资源时产生的CORS(跨源资源共享)错误。针对这一情况,可以通过调整服务器端设置来允许特定域名访问资源,或者采用代理的方式绕过浏览器的安全策略限制。具体操作方法取决于项目需求和技术栈的选择。 #### 配置SASS/SCSS支持 除了基本的功能外,如果项目涉及SASS或SCSS文件,则还需要额外配置以确保这些样式表能够被正确编译和应用。这通常涉及到先安装Ruby环境以及通过Gem工具获取最新的Sass库版本。完成上述步骤后,再依据个人偏好挑选合适的IDE扩展来进行更细致化的定制化工作流构建[^3]。 #### 构建基于Ajax的应用程序 为了更好地测试依赖于异步请求的数据交互逻辑,建议考虑引入`live-server`这样的轻量级HTTP服务器解决方案。借助NPM包管理器及其国内加速服务——淘宝镜像站点的帮助,整个过程将会变得更加顺畅快捷。值得注意的是,在执行任何全局范围内的变更之前,请务必确认当前环境中已存在Node.js运行平台[^4]。 ```bash npm install -g live-server ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值