精华内容
下载资源
问答
  • webstorm实时预览

    2021-09-26 16:23:28
    从 idea 换到 webstorm 了,然后弄那个实时预览,配置来配置去就是不成功,调试老是弹出一个全新的 Google 浏览器,而不是在已经打开的谷歌浏览器上调试。后来谷歌搜索了一下问题,找到了官方回复。WebStorm 2020.3 ...

    从 idea 换到 webstorm 了,然后弄那个实时预览,配置来配置去就是不成功,调试老是弹出一个全新的 Google 浏览器,而不是在已经打开的谷歌浏览器上调试。后来谷歌搜索了一下问题,找到了官方回复。WebStorm 2020.3 从 IDE 首选项中删除了使用扩展名进行调试的选项。

    官方表示:自2017.3版起,无需扩展即可进行调试。于是我按照官方教程弄了一下。

    live edit是捆绑安装的,没捆绑的插件里搜索 live edit 下载安装,配置如下图

    然后配置 web 浏览器,也就是 使用默认的Chrome用户数据启动调试会话

    这是下图会用到的文件路径

    路径1(谷歌默认安装路径):C:\Program Files\Google\Chrome\Application

    路径2(谷歌用户数据默认路径):C:\Users\你的电脑用户名\AppData\Local\Google\Chrome\User Data

    上图第四步,记得路径2,是你自己的用户名或者是默认的Administrator

    然后就配置成功了,调试的时候记得关闭谷歌浏览器,再调试,直接,快捷键 shift + F9,或者再html文件上右键调试(debug)就可以了,修改 HTML 或 CSS 或 JS 后,谷歌浏览器页面会自动刷新。

    展开全文
  • Sublime Text 3 、WebStorm配置实时刷新

    千次阅读 2017-10-18 14:54:25
    本文所用软件版本Sublime Text 3(Build 3143)、WebStorm 2017.2.4(Build #WS-172.4155.35)、Google Chrome v61.0.3163.100,其他版本软件配置过程可能不一样,请知悉!一.Google Chrome安装LiveReload插件1.下载插件...

    本文所用软件版本Sublime Text 3(Build 3143)、WebStorm 2017.2.4(Build #WS-172.4155.35)、Google Chrome v61.0.3163.100,其他版本软件配置过程可能不一样,请知悉!

    一.Google Chrome安装LiveReload插件

    1.下载插件
    LiveReload 2.1.0
    链接:http://pan.baidu.com/s/1bDvsia 密码:aphx

    2.安装插件
    (1)浏览器地址栏输入:chrome://extensions/进入拓展程序
    (2)拖拽安装
    拖拽安装
    鼠标左键选中要安装的插件,拖拽至拓展程序页面,看到“拖放以安装”时释放鼠标,就安装成功了。(小伙伴留下自己的看法,前面这句要删掉吗,我觉得有图片就够了

    打钩
    别忘了打钩哦

    二.Sublime Text 3安装LiveReload插件

    1.安装Package Control
    这里写图片描述
    ctrl+shift+p 打开命令行
    输入Package Control,按下Enter键
    首次安装插件需要该步骤,若之前已安装直接看下一步

    2.安装LiveReload插件
    (1)ctrl+shift+p 打开命令行。 输入install package,按下Enter键
    这里写图片描述
    (2)输入LiveReload,按下Enter键
    (3)安装成功后,依次点击Preferences > Package Settings > LiveReload > Settings User(首选项 > Package Settings > LiveReload > Settings User),在设置页面输入如下代码

    {
        "enabled_plugins": [
            "SimpleReloadPlugin",
            "SimpleRefresh"
        ]
    }

    (4)重启Sublime Text 3,现在插件就能用了

    3.使用LiveReload插件
    (1)Google Chrome打开正在编辑的代码,点击浏览器右上角插件按钮
    这里写图片描述这里写图片描述
    (2)在Sublime Text 3修改代码,切换到Google Chrome,你会发现网页自动刷新了

    三.Google Chrome安装JetBrains IDE Support插件

    1.下载插件
    JetBrains IDE Support 2.0.7
    链接:http://pan.baidu.com/s/1bptqJx1 密码:9sjb

    2.安装插件
    这里写图片描述
    请参考本文前面的描述

    四.WebStorm使用Live Edit功能

    这里写图片描述
    依次点击File>Setttings,搜索框输入live edit。在选择Update>Auto in(ms),点击OK保存设置

    这里写图片描述
    选中要调试的html文件右键选择Debug,这时Google Chrome会弹出该网页。在WebStorm里面修改代码,Google Chrome就可以实时刷新了

    这里写图片描述
    注意别点取消,那样就不能实时刷新了

    总结下:Sublime Text3安装东西要麻烦些,不过安装好了直接就可以用。而WebStorm虽然安装方便,不过每次使用都要右键Debug比较折腾人。对比下来,我个人更喜欢用Sublime Text3写代码!

    展开全文
  • debug实时预览时报错failed to attach debugger 原因是目前 debug 时不需要Chrome扩展程序。在最新的Chrome版本该功能无法可靠运行。 解决办法 webstorm左上角点击File --> Setting --> Build,Execution,...

    今天在webstorm按照网上的教程安装live edit,并且在chrome安装插件jetbrainside support
    debug实时预览时报错failed to attach debugger
    原因是目前 debug 时不需要Chrome扩展程序。在最新的Chrome版本该功能无法可靠运行。

    解决办法
    webstorm左上角点击File --> Setting --> Build,Execution,Deployment --> Debugger --> Live Edit
    取消 Use JetBrains IDE Support extension for debugging and Live Edit的勾选
    如下图
    在这里插入图片描述

    展开全文
  • webstorm实时预览,Debug模式,超级好用

    千次阅读 2020-09-16 11:00:05
    你要使用谷歌浏览器,然后你安装一个插件,这个插件叫做:JetBrains...然后你的webstorm就会有这个: 超级好用,再也不要写完代码,在刷新下浏览器了,你可以左边写代码,右边看结果,或者弄个显示器,超级舒适。 ...

    你要使用谷歌浏览器,然后你安装一个插件,这个插件叫做:JetBrains IDE Support

    在这里插入图片描述
    然后你的webstorm就会有这个:
    在这里插入图片描述
    超级好用,再也不要写完代码,在刷新下浏览器了,你可以左边写代码,右边看结果,或者弄个显示器,超级舒适。

    展开全文
  • WebStorm8.0.3 Live Edit与Google浏览器实时刷新自动加载页面 摘要WebStorm自身就不需要Ctrl+S进行保存,再结合Live Edit,直接一边写代码一边实时查看!再不需要Ctrl+S,F5! 在WebStorm8中是自带...
  • WebStorm设置自动刷新

    千次阅读 2020-05-14 12:09:30
    文章目录1. 修改WS设置2. 开启Debug 1. 修改WS设置 打开Settings⚙️ WebStorm版本:2019.3.2 在Live Edit中修改一些配置 2. 开启Debug 开启Debug???????...随后WS就可以自动刷新啦~
  • 使用webstorm和Chrome配合,实现实时刷新, 使用过webstorm的都知道,自身不需要Ctrl+S进行保存的,这里再结合Live Edit,可以实现一边写代码,一边实时查看。 1,第一步因为在webstorm中自带的Live Edit功能是默认...
  • chrome+webstorm实现实时更新

    万次阅读 2017-04-21 17:05:33
    chrome+webstorm实现实时更新 chrome插件 JetBrains IDE Support 2.0.7.crx ,百度云的连接 http://pan.baidu.com/s/1hssWBBI- webstorm :这是一个编辑器 chrome+webstorm实现实时更新 chrome 插件安装设置...
  • 【1】打开webstorm→Ctrl + Alt + S→在搜索框输入:live edit,并且进行如下设置,设置完成点击右下角“OK”按钮: 【2】在Google浏览器中安装JetBrains IDE Suport 扩展程序,具体为: ... 【3】在W...
  • 摘要: WebStorm自身就不需要Ctrl+S进行保存,再结合Live Edit,直接一边写代码一边实时查看!再不需要Ctrl+S,F5! 在WebStorm8中是自带Live Edit功能的,只是默认没有开启; 1、Ctrl + Alt + S --> Live ...
  • WebStorm如何让浏览器实时更新

    万次阅读 2017-03-03 16:40:08
    webstorm绑定谷歌浏览器实时刷新 WebStorm8.0.3 Live Edit与Google浏览器实时刷新自动加载页面 摘要 WebStorm自身就不需要Ctrl+S进行保存,再结合Live Edit,直接一边写代码一边实时查看!再不需要...
  • 这是我的第一篇博客,因为这次的webstorm代码和浏览器同步刷新的功能添加花费了我大量的时间,查找的方法也都是不可靠的或者说是过时的。下面我将介绍两种方法来实现我们的web开发所见即所得的功能,让webstorm成为...
  • 【1】打开webstorm→Ctrl + Alt + S→在搜索框输入:live edit,并且进行如下设置,设置完成点击右下角“OK”按钮: 【2】在Google浏览器中安装JetBrains IDE Suport 扩展程序,具体为: ... 【3】在WebSto...
  • 完成代码同步浏览器,实现同步刷新的效果。从此彻底告别ctrl+s、F5,告别经常重复的这两个动作。 选择WebStorm实现的效果是比较好的,在它的页面右边有多个多个浏览器logo可供选择。方便你可以在多个浏览器上查看...
  • 1、安装插件Live Edit 这里学到了一个名词,捆绑,意思就是有的编辑器默认自带的,无须另外下载我这里是2020.3.2是自带的,检查是不是自带的也很简单,按照下图去看看是不是有Live Edit,如果是就是自带的(设置推荐...
  • WebStorm使用 webstorm快捷键

    千次阅读 2017-10-13 13:15:32
    WebStorm WebStorm 是 JetBrains 推出的一款商业的 JavaScript 开发工具 任何一个编辑器都需要保存(ctrl + s),这是所有win平台上编辑类软件的特点,但是webstorm编辑文件右上角是没有那个熟悉的 * 的。 好处:...
  • 网页调试实时刷新谷歌插件LiveReload

    千次阅读 2017-08-01 10:25:41
    我们知道编辑器,比如我用的webstorm,或者你们的submit,等等,在编写scss的时候能实时将文件夹中的.scss文件转换为.css文件,或者使用gulp时,能实时将js文件压缩呀等等,这些都是代码处理上编辑器或者前端框架对...
  • WebStorm
  • 一个webstorm插件
  • 重装了 webstorm ,从10升级到了2016 一升不要紧,打开老项目,开启webpakc-dev-server,然后改代码,发现浏览器不会自动刷新了!!! 这可急死我了,各种卸载webpack、webpack-dev-server,安装各种版本,...
  • WebStorm7.0+liveeidt+JetBrainsIDESupport实现自动刷新功能,WebStorm7.0已自带liveeidt扩展并可更改端口,WebStorm7.0端口和JetBrainsIDESupport端口保持一致为默认端口63342 具体操作步骤如下 1、view->...
  •  1、WebStorm 7.0;  2、Chrome;  3、JetBrains IDE Support ;     步骤:  1、WebStorm 7.0端口和JetBrains IDE Support端口保持一致为默认端口 63342;  2、WebStorm 7.0 -> view -&...
  • 关于Webstorm webpack经常不能自动热更新问题 或者 说不会自动编译刷新webstorm修改Vuejs项目时,有一个问题让我困扰了很久,每一次在修改完之后,手动保存时,在Terminal窗口,不会更新和编译,要在代码里改来改...
  • 实时刷新传感器数据效果图效果视频Bootstrap flex布局使用NPM安装Bootstrap布局逻辑图布局分析实时刷新数据定义字段绑定字段设置心跳开启心跳设置钩子函数获取数据结束心跳尾言 效果图 效果视频 Bootstrap flex...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,557
精华内容 1,022
关键字:

webstorm实时刷新