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. maven之上传新的jar包

    今天要求上传若干jar包到maven服务器,师父曾经真的是一步一步点给我看.然后我特喵的忘记了,师父又一步一步点给我看,所以我记录下来,以后留用. 步骤如下,如图所示: 1)先在首页查询下将要上传的j ...

  2. zTree的功能解析

    zTree ,一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点.兼容 IE.FireFox.Chrome 等浏览器, ...

  3. IIS部署ASP.NET常见错误

    今天本地 IIS部署一个.NET Framework 3.5 项目,首先出现一个错误: 静态机制没有办法处理脚本 检查MIME没有问题,检查应用程序池版本,2.0, 果断改成 4.0. 运行之后新错误 ...

  4. MVC4 学习备忘

    WebConfig文件里添加数据库链接字符: <add name="MovieDBContext(可以自己取字符串名字)" connectionString="Da ...

  5. rhel 5.8下静默安装oracle11gr2

    1.图形界面下录制脚本如下: #-------------------------------------------------------------------------------# Do ...

  6. UWP的一种下拉刷新实现

    简介 我们最近实现了一个在UWP中使用的下拉刷新功能,以满足用户的需求,因为这是下拉刷新是一种常见的操作方式,而UWP本身并不提供这一机制. 通过下拉刷新这一机制,可以让移动端的界面设计变得更加简单, ...

  7. 设计模式之美：Object Pool（对象池）

    索引 意图 结构 参与者 适用性 效果 相关模式 实现 实现方式(一):实现 DatabaseConnectionPool 类. 实现方式(二):使用对象构造方法和预分配方式实现 ObjectPool ...

  8. java提高篇（十九）-----数组之二

    前面一节主要介绍了数组的基本概念,对什么是数组稍微深入了一点点,在这篇博文中主要介绍数组的其他方面. 三.性能?请优先考虑数组 在java中有很多方式来存储一系列数据,而且在操作上面比数组方便的多?但 ...

  9. Facebook 发布「流程」

    时不时就会在面试过程中碰到有候选人问 Facebook 是否采用 Scrum 之类的敏捷方法,偶尔也会有中国的朋友问及 Facebook 上线流程.我通常会简单说几句,然后说「如果你真感兴趣的话,去搜 ...

  10. 简单JavaScript模版引擎优化

    在上篇博客最简单的JavaScript模板引擎 说了一下一个最简单的JavaScript模版引擎的原理与实现,作出了一个简陋的版本,今天优化一下,使之能够胜任日常拼接html工作,先把上次写的模版函数 ...