PhpStorm配置游览器实时预览刷新

  • A+
所属分类:前端开发

在本地编辑代码中,我们预览代码,通常是保存代码 → 切换到游览器打开 → 刷新。小修改还好,如果是刚起步的项目,那免不得一天要重复好多遍吧!今天介绍一种很实用的方法PhpStorm配置游览器实时预览刷新

编辑器使用的是PhpStorm 2017.3.3,游览器使用的是Chrome 63.0.3239.132

此方法同样适用于webstorm

 

安装:

1、打开PhpStorm ,文件 → 设置 (快捷键Ctrl +Alt + S)→ Plugins (快捷键Ctrl +Shift + A,搜索plugin)→ Jetbrains安装插件PhpStorm配置游览器实时预览刷新

 

搜索 “liveedit” → lnstall。重新启动PhpStorm

PhpStorm配置游览器实时预览刷新

 

2、打开游览器,如果你有“梯子”的话,直接搜索“JetBrains IDE Support”安装重启。

没有“梯子”的,可以下载我打包好的插件程序(最新版为2.0.9)

将crx文件拖到游览器中,点击继续PhpStorm配置游览器实时预览刷新

 

2-1、如果遇到“无法添加来自此网站的应用、扩展程序和用户脚本”,点击确认。

游览器输入:chrome://extensions/

进入到扩展程序,此时再拖入,即可成功显示

PhpStorm配置游览器实时预览刷新 PhpStorm配置游览器实时预览刷新

 

3、测试

新建一个html,随便复制一段话进去,右键“ debug 'XXX.html' ”。一定要选择调试

这样你修改代码就可以实时的预览啦!!PhpStorm配置游览器实时预览刷新

 

注意事项

1、一定要保证PhpStorm和Chrome的端口一样,PhpStorm是63342,插件也是PhpStorm配置游览器实时预览刷新

 

2、这个目前只支持 HTMLCSS,JavaScript

 

有其他的问题,可以在下面留言。大家一起讨论哦!

下载信息 JetBrains IDE Support 128 KB
下载地址 查看演示
  • 扫扫关注公众号
  • weinxin
  • 扫扫体验小程序
  • weinxin
亦枫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: