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. CA Loves GCD (BC#78 1002) (hdu 5656)

    CA Loves GCD  Accepts: 135  Submissions: 586  Time Limit: 6000/3000 MS (Java/Others)  Memory Limit: ...

  2. hdu 5718(Oracle)大数加法

    曾经有一位国王,统治着一片未名之地.他膝下有三个女儿. 三个女儿中最年轻漂亮的当属Psyche.她的父亲不确定她未来的命运,于是他来到Delphi神庙求神谕. 神谕可以看作一个不含前导零的正整数n n ...

  3. Linux之DNS

    DNS服务器配置 一.DNS概述:DNS 是域名系统 (Domain Name System) 的缩写,是一种组织域层次结构的计算机和网络服务命名系统.它的作用是:把域名转换成为网络可以识别的 IP ...

  4. STM32串口接收不定长数据原理与源程序（转）

    今天说一下STM32单片机的接收不定长度字节数据的方法.由于STM32单片机带IDLE中断,所以利用这个中断,可以接收不定长字节的数据,由于STM32属于ARM单片机,所以这篇文章的方法也适合其他的A ...

  5. Git撤销提交

    本文链接:http://volnet.github.io/#!docs/git/reset-to-old-version.md 在使用Git进行版本管理的时候,经常会遇到一些错误的提交. 在开始演示之 ...

  6. Mac 下 WebStorm 配置go语言开发环境

    一.下载安装WebStorm,我的是 二.在WebStorm 中安装go插件 三.在本机安装go开发环境,直接装pkg文件,https://golang.org/doc/install 四.在WebS ...

  7. ENode 2.0 - 介绍一下关于ENode中对Command的调度设计

    CQRS架构,C端的职责是处理从上层发送过来的command.对于单台机器来说,我们如何尽快的处理command呢?本文想通过不断提问和回答的方式,把我的思考写出来. 首先,我们最容易想到的是使用多线 ...

  8. 如何用MediaCapture解决二维码扫描问题

    二维码扫描的实现,简单的来说可以分三步走:“成像”.“截图”与“识别”. UWP开发中,最常用的媒体工具非MediaCapture莫属了,下面就来简单介绍一下如何利用MediaCapture来实现扫描 ...

  9. Nim教程【七】

    这是国内第一个关于Nim的系列教程 先说废话 很开心,在今天凌晨快一点多的时候拿到了 nim-lang.com:nim-lang.cn:nim-lang.net 这三个域名,到不是为了投资,准备用ni ...

  10. 在同一台服务器上配置多个Tomcat

    如果要在一台服务器上配置多个Tomcat,主要就是要避免Tomcat服务器的端口冲突的问题.只需要修改CATALINA_HOME\conf\server.xml中的启动端口和连接端口就OK了! 下面我 ...