之前因为公司很多都是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 插件实现实时可视化前端开发的更多相关文章

  1. 精美jQuery插件及源码 前端开发福利

    jQuery是一个非常不错的javascript框架,很多前端开发者喜欢的原因不仅是因为jQuery使用起来方便,更重要的是因为它的插件很多,我们可以将这些插件应用到自己的项目中去.下面这些精美的jQ ...

  2. 转:精美jQuery插件及源码 前端开发福利

    原文来自于:http://www.html5tricks.com/pretty-jquery-plugin.html jQuery是一个非常不错的javascript框架,很多前端开发者喜欢的原因不仅 ...

  3. Web前端开发实用的Chrome插件

    Web前端开发实用的Chrome插件 越来越多的前端开发人员喜欢在Chrome里开发调试代码,Chrome有许多优秀的插件可以帮助前端开发人员极大的提高工作效率.尤其Chrome本身是可以登录的,登录 ...

  4. Vim常用插件——前端开发工具系列

    作为一名开发者,应该对编辑器之神Vim与神之编辑器Emacs有所耳闻吧.编辑器之战的具体细节有兴趣的童鞋可以google之. Vim最大的特点是打开速度快,功能强大,一旦掌握了其中的命令,编程过程双手 ...

  5. 前端开发必备调试工具(Chrome的F12自带的功能和firebug插件差不多)

    前端开发必备调试工具(Chrome的F12自带的功能和firebug插件差不多) 一.总结 Chrome的F12自带的功能和firebug插件差不多 二.前端开发必备调试工具 在前端开发中我们经常会要 ...

  6. 【Win10 应用开发】使用“实时可视化树”工具查看应用界面元素

    记得有朋友问老周,系统中的“计算器”应用的界面菜单是怎么做的.其实,你可以用VS 2015的新工具来查看它的界面结构. 实时可视化树工具只能查看XAML定义的界面,如WPF和Win App.现在,Wi ...

  7. Erlang 开发者的福音:IntelliJ IDEA 的 Erlang 插件

    IntelliJ IDEA 的 Erlang 插件,主要特性: 智能编辑器:  Erlang 代码补全.语法和错误高亮.代码检查 代码导航:项目和文件结构视图.在文件.模型.函数和用例之间快速跳转 工 ...

  8. intellij idea 13&14 插件推荐及快速上手建议 (已更新!)

    原文:intellij idea 13&14 插件推荐及快速上手建议 (已更新!) 早些年 在外企的时候,公司用的是intellij idea ,当时也是从eclipse.MyEclipse转 ...

  9. win10 uwp 隐藏实时可视化

    新的vs有个功能,实时可视化 但是他会挡我们界面,想要隐藏 点击转到实时可视化,就是点击横线看到,接着就可以看到下面的选项 点击在应用程序中显示运行时,就是不选中 很简单就看到,没有那个 本作品采用知 ...

随机推荐

  1. Nginx配置 简单写了个

    #user nobody;worker_processes 1; #error_log logs/error.log;#error_log logs/error.log notice;#error_l ...

  2. WinForm中ListBox的使用

    获取选中数据:listbox.SelectedItem as XXX 重绘每一行item DrawMode设置为DrawMode.OwnerDrawVariable 然后实现DrawItem(obje ...

  3. 【ARC074F】Lotus Leaves 最小割

    Description 给你一个n*m网格图,有起点荷叶和终点荷叶,有中转荷叶,其他的格子没东西,一个荷叶可以跳到同一行或者列的另一个荷叶.问最多删掉几个中转荷叶能让起点终点不连通.如果不行输出-1. ...

  4. LAMP课程(3)

    LAMP课程(3) 一.bash的使用 1.1.输出重定向 >:覆盖输出(写入内容) 具体实例1:将内容写入到文件中   >>:追加输出 具体实例2:   1.2 && ...

  5. 设置placeholder的样式

    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #f00; } ::-moz-placeholder { /* Mozilla Fir ...

  6. RUCM简介

    一.动机 UCM:用例建模,主要用于结构化和文档需求方面. UCSs:用例规格说明书,通常是文本文档,所以描述中不可避免含有歧义. RUCM:限制性用例建模.目标 G1.使UCMs更加可理解并且更精确 ...

  7. redis读取自增时候指定的key问题

    首先,此文章是接了如下文章写的 Spring boot redis自增编号控制 踩坑 上面这个问题解决后,公司这边功能其实已经实现了,但是考虑到一种情况,因为我们这边号的生成就是根据上面的自增编号来的 ...

  8. 斐讯 N1 刷 Armbian 5.64

    前言 N1 天天链是斐讯出的一款挖矿产品,虽然已经翻车,但是本身硬件配置还是很不错的,晶晨 S905D 主控,蓝牙 4.1,双频 WiFi,2G + 8G,USB2.0,HDMI.而一个只要不到 80 ...

  9. selenium python 时间控件的输入问题

    对于时间的选择问题,查到的大部分为两种情况: 1.存在readonly属性的 2.没有readonly属性的 可直接赋值send_keys() 测试用例中刚好是没有readonly属性的 且定位不到弹 ...

  10. liunx php 安装 redis 扩展

    切换到安装目录:  cd /usr/local/ 下载php redis扩展:wget http://pecl.php.net/get/redis-2.2.8.tgz 更改名称压缩包名称: mv re ...