前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >WebStorm绑定Chrome浏览器实现实时自动刷新

WebStorm绑定Chrome浏览器实现实时自动刷新

作者头像
德顺
发布2019-11-13 17:24:22
6.5K0
发布2019-11-13 17:24:22
举报
文章被收录于专栏:前端资源前端资源前端资源
WebStorm本身就不需要Ctrl+S进行保存,再结合Live Edit,可以一边写代码一边实时查看更新!再也不需要Ctrl+S,F5了!

WebStorm是自带Live Edit功能的,只是默认没有开启,设置方法如下:

1、Ctrl + Alt + S 打开设置 找到 Build, Execution, Deployment --> Debugger  -->  Live Edit --> 将 Update 修改为 Auto in (ms),如下图:

WebStorm绑定Chrome浏览器实现实时自动刷新 工具插件 第1张
WebStorm绑定Chrome浏览器实现实时自动刷新 工具插件 第1张

2、在 Chrome 浏览器中安装 JetBrains IDE Suport  扩展。

WebStorm绑定Chrome浏览器实现实时自动刷新 工具插件 第2张
WebStorm绑定Chrome浏览器实现实时自动刷新 工具插件 第2张

扩展地址:点击访问 由于是谷歌商店地址,有些用户可能无法访问。

博主提供了本地下载包:JetBrains_IDE_Support_2.0.9

我也会重新开一篇文章,不定时进行更新:JetBrains IDE Support 浏览器自动刷新插件(不定时更新)

安装好之后在地址栏的右边会有一个 JB 的小图标,单击这个小图标可以跳转到 WebStorm 界面。

右击 --> 选项,可以设置监听的地址和端口,WebStorm默认的是63342端口。

3、要实现在 WebStorm 中编辑代码,浏览器自动实时刷新,需要在 WebStorm 中开启 Debug 模式,打开页面,直接在 编辑器板右击选择 Debug 就可以啦!

WebStorm绑定Chrome浏览器实现实时自动刷新 工具插件 第3张
WebStorm绑定Chrome浏览器实现实时自动刷新 工具插件 第3张
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-05-09),如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档