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

前端学习1 31.1K4字数 662阅读2分12秒阅读模式

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

编辑器使用的是PhpStorm 2017.3.3,游览器使用的是Chrome 63.0.3239.132文章源自亦枫博客-https://yflad.cn/1724.html

此方法同样适用于webstorm文章源自亦枫博客-https://yflad.cn/1724.html

 文章源自亦枫博客-https://yflad.cn/1724.html

安装:

1、打开PhpStorm ,文件 → 设置 (快捷键[code]Ctrl +Alt + S[/code])→ Plugins (快捷键[code]Ctrl +Shift + A[/code],搜索plugin)→ Jetbrains安装插件PhpStorm配置游览器实时预览刷新文章源自亦枫博客-https://yflad.cn/1724.html

 文章源自亦枫博客-https://yflad.cn/1724.html

搜索 “liveedit” → lnstall。重新启动PhpStorm文章源自亦枫博客-https://yflad.cn/1724.html

PhpStorm配置游览器实时预览刷新文章源自亦枫博客-https://yflad.cn/1724.html

 文章源自亦枫博客-https://yflad.cn/1724.html

2、打开游览器,如果你有“梯子”的话,直接搜索“JetBrains IDE Support”安装重启。文章源自亦枫博客-https://yflad.cn/1724.html

没有“梯子”的,可以下载我打包好的插件程序(最新版为2.0.9)文章源自亦枫博客-https://yflad.cn/1724.html

将crx文件拖到游览器中,点击继续PhpStorm配置游览器实时预览刷新文章源自亦枫博客-https://yflad.cn/1724.html

 文章源自亦枫博客-https://yflad.cn/1724.html

2-1、如果遇到“无法添加来自此网站的应用、扩展程序和用户脚本”,点击确认。文章源自亦枫博客-https://yflad.cn/1724.html

游览器输入:chrome://extensions/文章源自亦枫博客-https://yflad.cn/1724.html

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

文章源自亦枫博客-https://yflad.cn/1724.html

 文章源自亦枫博客-https://yflad.cn/1724.html

3、测试文章源自亦枫博客-https://yflad.cn/1724.html

新建一个html,随便复制一段话进去,右键“ debug 'XXX.html' ”。一定要选择调试文章源自亦枫博客-https://yflad.cn/1724.html

这样你修改代码就可以实时的预览啦!!PhpStorm配置游览器实时预览刷新文章源自亦枫博客-https://yflad.cn/1724.html

 文章源自亦枫博客-https://yflad.cn/1724.html

注意事项

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

 

2、这个目前只支持 HTML,CSS,JavaScript

 

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

下载信息 JetBrains IDE Support 128 KB
最近更新2019-5-11
下载地址 查看演示
扫扫关注公众号
weinxin
我的微信
扫扫体验小程序
weinxin
我的公众号
亦枫
  • 本文由 发表于 2018年2月1日 16:19:35
评论  1  访客  1
    • 404
      404 4

      请问phpstorm中有没有可以实时刷新php页面的插件

    匿名

    发表评论

    匿名网友 填写信息

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

    确定