WebStorm加谷歌浏览器实时同步更新

发布于 / 教程 / 6 条评论

这学期新开了一门专业课:WEB技术,所以需要学习HTML,写HTML当然是用Jetbrain家的WebStorm了!在这里强力推荐一波,学生确实可以为所欲为。不扯远了,回到正题。


前言

在使用WebStormHTML的时候,需要先保存(雾)然后在浏览器中刷新之后才能看见效果,感觉这样很麻烦,于是就想着能不能做到在边写的时候浏览器就可以同步显示效果,办法当然是有的了!下面听我继续扯。


教程

  • 首先去谷歌应用商店中安装一个叫JetBrains IDE Support的插件。如果无法打开的话请移步传送门进行下载。

JetBrains IDE Support是一款支持编译即时显示在浏览器上调试的谷歌浏览器插件。是一款web开发人员常用的开发者插件,程序员习惯称之为JB插件。这款调试插件需要与一些开发工具结合使用,比如JetBrains公司发布的一个web开发IDE,webstorm!支持代码提示、补全、定位、与Git集成等等各种功能,已经跟传统强类型语言的开发环境感觉无多大差异!

  • 然后打开WebStorm,点击File->Settings->搜索Live Edit->设置一下On changes in(ms)时间->勾选Restart if hotswap fails。我设置的是3ms。

  • 在WebStorm左侧目录下,右键需要显示同步效果的HTML文件,选择Debug,注意一下不是Run,然后就可以做到实时同步了。

  • 浏览器上方显示的“JetBrains IDE Support”正在调试此浏览器字样不要点击取消,不然就不能同步了。

对了,我们还可以自定义端口,Webstorm默认的是63342


效果


补充

感谢惶心提供的方法,我们还可以在html文件头部元素中加入代码<meta http-equiv="refresh" content="3">来实现自动刷新效果,content的值可以根据实际情况设定。


The end.
2018-04-02 星期一

转载原创文章请注明,转载自: 太傅 » WebStorm加谷歌浏览器实时同步更新
  1. 异乡之人.

    neng了这么多,我一个 meta http-equiv=”refresh” content=”0.1″ 就搞定了.愤怒

    1. TaiFu_S
      @异乡之人.

      这..miao4这么厉害的吗,学到了!

  2. 异乡之人.

    https://tech.hxco.de/meta-tag-real-time-reflash 哈哈哈哈哈哈哈哈哈哈哈

    1. TaiFu_S
      @异乡之人.

      我去看看!

  3. 异乡之人.

    话说这QQ快速评论不支持获取头像的么

    1. TaiFu_S
      @异乡之人.

      本来应该是支持的。