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. 百度ueditor 实例化 Cannot set property 'innerHTML' of null 完美解决方案

    此时此刻,我正在用博客园推荐的TinyMCE编辑器写这个博客,突然想起最近在项目中使用百度ueditor编辑器中的一些经历.所以记录在此,与大家分享. 不得不说,百度ueditor是一款很好的在线编辑 ...

  2. linux下显示dd命令的进度：

    linux下显示dd命令的进度: dd if=/dev/zero of=/tmp/zero.img bs=10M count=100000 想要查看上面的dd命令的执行进度,可以使用下面几种方法: 比 ...

  3. C++混合编程之idlcpp教程Python篇(6)

    上一篇在这 C++混合编程之idlcpp教程Python篇(5) 第一篇在这 C++混合编程之idlcpp教程(一) 工程PythonTutorial4中加入了四个文件:PythonTutorial4 ...

  4. 最快让你上手ReactiveCocoa之进阶篇

    前言 由于时间的问题,暂且只更新这么多了,后续还会持续更新本文<最快让你上手ReactiveCocoa之进阶篇>,目前只是简短的介绍了些RAC核心的一些方法,后续还需要加上MVVM+Rea ...

  5. 可在广域网部署运行的QQ高仿版 -- GG叽叽V2.4，增加远程协助、桌面共享功能（源码）

    QQ的远程协助.或者说桌面共享是一个非常实用的功能,所以,2.4版本的GG复制了它,而且,GG增强了桌面共享的功能,它可以允许指定要共享桌面的区域,这样,对方就只能看到指定区域的桌面,这对节省流量会非 ...

  6. 从 Android 静音看正确的查bug的姿势？

    0.写在前面 没抢到小马哥的红包,无心回家了,回公司写篇文章安慰下自己TT..话说年关难过,bug多多,时间久了难免头昏脑热,不辨朝暮,难识乾坤...艾玛,扯远了,话说谁没踩过坑,可视大家都是如何从坑 ...

  7. nginx（2、反向代理）

    反向代理是nginx最重要的特性之一,与正向代理相反,它代理的不是客户端,而是目标源,即我代理目标源满足客户端给出的请求. 在nginx中反向代理的简单配置如下: server { listen 80 ...

  8. MySQL1：MySQL函数汇总

    前言 MySQL提供了众多功能强大.方便易用的函数,使用这些函数,可以极大地提高用户对于数据库的管理效率,从而更加灵活地满足不同用户的需求.本文将MySQL的函数分类并汇总,以便以后用到的时候可以随时 ...

  9. 客户端GUI程序开发漫谈

    这篇文章包含了这个领域的很多开源项目的介绍,还有我多年来的心血和汗水  去年夏天的时候,我用QT做了一个小工具 后来还用QT做了流程设计器 我把程序分享给飞扬青云之后,他甚至搞出来一套QT的皮肤来 说 ...

  10. 【重要更新】Senparc.Weixin SDK v4.3.3升级说明

    为了更好地适应微信越来越快的API更新速度和越来越多的API数量,本次Senparc.Weixin.dll v4.3.3对一些通用功能进行了深度的重构. 本次更新同时影响以下所有Senparc.Wei ...