前端的开发工具之实时无刷新自动加载页面

WebStorm10.0.3 live Edit与Google浏览器实时无刷新自动加载页面

---

Webstorm中的配置

点击: File->Settings->Build,Execution,Deployment->Debugger->Live Edit

image.png

在Google浏览器中安装JetBrains IDE Support扩展程序.

image.png

在WebStorm中, 右击选中你要在浏览器中实时刷新的页面, 选择"Debug 'index.html'"菜单, 到这里所有的设置步骤就完成了, 现在修改html文件代码, 谷歌浏览器就已经同步看到更新了.
注意: 浏览器上面的黄色背景提示一定不能关闭!

image.png

使用Brackets编辑器

Brackets 是一个免费、开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具)。该项目由 Adobe 创建和维护，根据MIT许可证发布，支持 Windows、Linux 以及 OS X 平台。

Brackets 的特点是简约、优雅、快捷！它没有很多的视图或者面板，也没太多花哨的功能，它的核心目标是减少在开发过程中那些效率低下的重复性工作，例如浏览器刷新，修改元素的样式，搜索功能等等。和 Sublime Text、Everedit 等通用代码编辑器不一样，Brackets 是专门针对 WEB 前端开发而生……

安装好软件之后, 打开需要调试的html文件, 点击如下图所示的按钮就可以实现无刷新自动加载页面了.

image.png