1、 打开Chrome浏览器，点击右上角的“自定义及控制”按钮，选择“更多工具”-->”扩展程序”，打开“扩展程序”页面。

其实以上步骤可以简化为：用Chrome打开chrome://extensions/，如上图所示。

2、点击“获得更多扩展程序”，进入“Chrome网上商店”，搜索“JetBrains IDE Support”扩展程序。点击“添加至Chrome”按钮，安装该扩展程序到Chrome。勾选后面的“应用”，安装成功后Chrome浏览器工具栏上会出现一个"JB"图标。

3、打开WebStorm，新建一个Emmet.html文件，菜单Run-->Debug，然后选择“Emmet.html”，这时会同步启动Chrome打开Emmet。并且提示”JetBrains IDE Support 正在调试此标签页“。

点如下图的下拉箭头，选择Edit Configurations，打开Run/Debug Configurations对话框，你会发现已经在JavaScript Debug下新建了Emmet.html。

4、 下面开始测试，切换到WebStorm，修改Emmet.html，根本不需要保存操作，切换到Chrome，你会发现Chrome同步实时渲染好了该页面。

5、以后你可以点击如下图的工具按钮打开Chrome来实时查看渲染效果，快捷键为Shift+F9。

WebStorm 9 配置 Live Edit 功能与浏览器实现同步的更多相关文章

  1. Rest Client(Rest接口调试工具，有保存功配置功能) chrome浏览器插件

    Rest Client(Rest接口调试工具,有保存功配置功能) chrome浏览器插件 下载地址 插件的操作很简单,下面是一些简单的实例. 1.安装 在谷歌应用商城搜索postman,如下图1-1所 ...

  2. Webstorm添加新建.vue文件功能并支持高亮vue语法和es6语法

    转载:https://blog.csdn.net/qq_33008701/article/details/56486893 Webstorm 添加新建.vue文件功能并支持高亮vue语法和es6语法 ...

  3. 【从零开始学BPM，Day5】报表配置及自定义功能页面开发

    [课程主题] 主题:5天,一起从零开始学习BPM [课程形式] 1.为期5天的短任务学习 2.每天观看一个视频,视频学习时间自由安排. [第五天课程] 1.课程概要 Step 1 软件下载:H3 BP ...

  4. 实战使用Axure设计App,使用WebStorm开发(5) – 实现页面功能

    系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求  实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目   实战使 ...

  5. gitlab配置邮件通知功能操作记录

    之前已经介绍了gitlab的部署http://www.cnblogs.com/kevingrace/p/5651402.html但是没有配置邮箱通知功能,今天这里介绍下gitlab安装后的邮箱配置操作 ...

  6. 浅入深出Vue：工具准备之WebStorm安装配置

    浅入深出Vue之工具准备(一):WebStorm安装配置 工欲善其事必先利其器,让我们先做好准备工作吧 导航篇 WebStorm安装配置 所有工具的下载地址都可以在导航篇中找到,这里我们下载的是最新版 ...

  7. 在webstorm中配置sass的自动编译，并且可以指定编译后的css的目录.

    参考: WebStorm-2018.2-Help-Sass, Less, and SCSS 作者:tobyDing链接:https://www.jianshu.com/p/0fe52f149cab來源 ...

  8. WebStorm中配置node.js（Windows）

    WebStorm中配置node.js(Windows) 一.node 1.下载安装包 32 位 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x86.msi ...

  9. 配置Chrome Workspace功能

    配置Chrome Workspace功能 Chrome Workspace功能是将在Chrome开发者工具(F12)中对文档的修改直接应用于对应文件中.由于Chrome并不知道当然文档对应用的文件为哪 ...

随机推荐

  1. java 类反射记录

    Class的getDeclaredMethod方法是获取当前类下的所有方法,包括private修饰的,该方法不获取父类的方法. getMethod获取父类及本类下的所有public方法.

  2. python 装饰器初步学习

    第一步 简单函数 ''' 简单的函数:调用两次''' def myfunc(): print ('myfunc() called.') myfunc() myfunc() 第二步 装饰器为调用函数提供 ...

  3. JavaWeb开发学习(二)-配置Tomcat服务器

    1. 下载Tomcat服务器 Tomcat是一个免费.开源的JavaWeb服务器. Tomcat官网是http://tomcat.apache.org/ 我使用的是版本是Tomcat7.0,下载Zip ...

  4. myeclipse导入项目出现乱码

    (1)修改整个工作空间的编码方式: Window->Preferences->General->Workspace->Text file Encoding 在 Others 里 ...

  5. linux指令之文件的创建、查询、修改

    mkdir(make directory) 功能:创建目录 案例: mkdir test 点评:将创建一个目录名为test的目录 rmdir(remove directory) 功能:删除目录 案例: ...

  6. Windows服务器安全加固实战（Windows Server 2008 R2和Windows Server 2012）

    最近我们立方技术工作室在使用阿里云的过程中,发现服务器安全性也不是很高,而服务端的安全软件都很贵.为了为朋友们提供更加有效的解决方案,我们决定身体力行,高筑墙,大幅度提升服务器的安全防护级别! 主机安 ...

  7. ubuntu共享文件配置

    目标:实现windows和linux混合组成的操作 系统中可以共享文件,并可以通过机器名互相访问 安装文件共享服务 0.更改本机主机名,修改 /etc/hostname文件和/etc/hosts文件中 ...

  8. CSS 布局入门

    概述 Web 兴起之后,关于CSS的介绍和学习资料已经铺天盖地. 本文不涉及具体的CSS语法之类的,而是希望从初学者的角度,让没有接触或很少接触CSS的人能快速的了解 CSS 到底是什么以及如何使用. ...

  9. MVC+EF6使用MySQL+CodeFirst的详细配置

    环境: WIN7(64位旗舰版)+VS2012+MySQL5.6(32位版,在另一台服务器中,环境是win2003) 1.下载并安装MysqlforVisualStudio.zip,此软件功能是让VS ...

  10. Java设计模式5：原型模式

    原型模式 原型模式属于对象的创建模式,通过给出一个原型对象来指明所有创建的对象的类型,然后用复制这个原型对象的办法创建出更多同类型的对象,这就是原型模式的用意. 原型模式结构 原型模式要求对象实现一个 ...