IntelliJ IDEA 使用 LiveEdit 插件实现实时可视化前端开发
之前因为公司很多都是C#后台项目,所以一直用的Visual Studio开发。而在VS里会自带实时刷新功能,即:在IDE中修改的CSS代码会同步反映在页面上,而不用我们手动F5刷新。
先在因为在考虑做自己的个站,所以打算转JSP模式,IDE选择了Jet Brains的IntelliJ IDEA,内置同步发布、数据库管理等等,功能确实很强大,但发现每次修改页面代码都得刷新才能看到效果,着实很麻烦。所以安装了LiveEdit插件来实现实时可视化开发,接下来分享一下安装步骤,非常简单。
第一步:下载LiveEdit插件
在IDE中进入“文件(File)→设置(Settings)→插件(Plugins)”中查找LiveEdit。如果你用的IDE版本没有内置这一插件,可以点击
,会自动加载插件列表,这个过程可能会等待一段时间,请保持耐心。然后找到插件,点击下载即可。随后根据提示重启IDE。
第二步:在Chrome中安装JetBrains IDE Support扩展程序
仅仅是在IDE中安装好插件还不行,我们还需要得到浏览器的支持。可以点击这里下载。下载文件为一个100多K的crx文件,随后点击“更多工具→扩展程序”,如图。

将下载的crx文件拖入窗口中即可安装。
IntelliJ IDEA 使用 LiveEdit 插件实现实时可视化前端开发的更多相关文章
- 精美jQuery插件及源码 前端开发福利
jQuery是一个非常不错的javascript框架,很多前端开发者喜欢的原因不仅是因为jQuery使用起来方便,更重要的是因为它的插件很多,我们可以将这些插件应用到自己的项目中去.下面这些精美的jQ ...
- 转:精美jQuery插件及源码 前端开发福利
原文来自于:http://www.html5tricks.com/pretty-jquery-plugin.html jQuery是一个非常不错的javascript框架,很多前端开发者喜欢的原因不仅 ...
- Web前端开发实用的Chrome插件
Web前端开发实用的Chrome插件 越来越多的前端开发人员喜欢在Chrome里开发调试代码,Chrome有许多优秀的插件可以帮助前端开发人员极大的提高工作效率.尤其Chrome本身是可以登录的,登录 ...
- Vim常用插件——前端开发工具系列
作为一名开发者,应该对编辑器之神Vim与神之编辑器Emacs有所耳闻吧.编辑器之战的具体细节有兴趣的童鞋可以google之. Vim最大的特点是打开速度快,功能强大,一旦掌握了其中的命令,编程过程双手 ...
- 前端开发必备调试工具(Chrome的F12自带的功能和firebug插件差不多)
前端开发必备调试工具(Chrome的F12自带的功能和firebug插件差不多) 一.总结 Chrome的F12自带的功能和firebug插件差不多 二.前端开发必备调试工具 在前端开发中我们经常会要 ...
- 【Win10 应用开发】使用“实时可视化树”工具查看应用界面元素
记得有朋友问老周,系统中的“计算器”应用的界面菜单是怎么做的.其实,你可以用VS 2015的新工具来查看它的界面结构. 实时可视化树工具只能查看XAML定义的界面,如WPF和Win App.现在,Wi ...
- Erlang 开发者的福音:IntelliJ IDEA 的 Erlang 插件
IntelliJ IDEA 的 Erlang 插件,主要特性: 智能编辑器: Erlang 代码补全.语法和错误高亮.代码检查 代码导航:项目和文件结构视图.在文件.模型.函数和用例之间快速跳转 工 ...
- intellij idea 13&14 插件推荐及快速上手建议 (已更新!)
原文:intellij idea 13&14 插件推荐及快速上手建议 (已更新!) 早些年 在外企的时候,公司用的是intellij idea ,当时也是从eclipse.MyEclipse转 ...
- win10 uwp 隐藏实时可视化
新的vs有个功能,实时可视化 但是他会挡我们界面,想要隐藏 点击转到实时可视化,就是点击横线看到,接着就可以看到下面的选项 点击在应用程序中显示运行时,就是不选中 很简单就看到,没有那个 本作品采用知 ...
随机推荐
- [.net 多线程]volatile 摘录
一.volatile 介绍 volatile 关键字指示一个字段可以由多个同时执行的线程修改. 声明为 volatile 的字段不受编译器优化(假定由单个线程访问)的限制. 这样可以确保该字段在任何时 ...
- mysql sp 练习游标和预编译
create procedure Jack_count_cur_dual() BEGIN ); ; DECLARE mycur CURSOR for SELECT table_name FROM tt ...
- .net core 图片合并,图片水印,等比例缩小,SixLabors.ImageSharp
需要引用 SixLabors.ImageSharp 和SixLabors.ImageSharp.Drawing 引用方法 NuGet包管理 添加程序包来源 https://www.myget.org/ ...
- cinder侧卸载卷流程分析
cinder侧卸载卷分析,存储类型以lvm+iscsi的方式为分析基础在虚机卸载卷的过程中,主要涉及如下三个函数1)cinder.volume.api.begin_detaching 把volume的 ...
- 基于stor2RRD 的 SAN、存储监控
一. 配置用法在官网都有的详见网页: http://www.stor2rrd.com/install.htm?1.2 二 . 在这里我只是想记录一下我是如何编译安装Apache的,避免踩坑: 安装包如 ...
- 单链表倒数第K个节点的查找和显示
1.使用一个固定长度队列装链表段,当遍历到链表根时,返回队列头元素. class Node{ int value; Node next; public Node(int value){ this.va ...
- windows如何通过端口查看对应程序
今天打开SSR报错,说端口被占用. 打开的软件有点多,又不想重启.就需要找到占用的软件,关闭了即可. 打开cmd,输入netstat -aon能看到所有的使用端口 其中1080端口是预留给SSR使用的 ...
- 【bzoj4806~bzoj4809】 象棋四连发 DP-高精度-匈牙利算法-dfs
都是经典题了吧..我好无聊.. 4806 4806-1801是双倍经验..DP方程看代码吧.. /* http://www.cnblogs.com/karl07/ */ #include <cs ...
- Redhat系的Linux系统里,网络主要设置文件简介【转载】
以下是原文地址,转载请指明出处: http://blog.chinaunix.net/uid-26495963-id-3230810.html 一.配置文件详解在RHEL或者CentOS等Redhat ...
- 【java】AtomicReference介绍
本文转载自:http://www.cnblogs.com/skywang12345/p/3514623.html 概要 本章对AtomicReference引用类型的原子类进行介绍.内容包括: Ato ...