配置Webstorm的实时预览

原创 已于 2022-05-28 21:27:16 修改 · 3.9k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#webstorm #chrome #前端

于 2022-05-28 21:12:48 首次发布
本文介绍如何通过安装JetBrains IDE Support Chrome插件实现Webstorm的实时预览功能，包括解决安装过程中遇到的问题及配置步骤。

配置Webstorm的实时浏览

  1. 下载JetBrains IDE Support Chrome插件，也就是对应的chorme浏览器的插件，一般下载下来都是crx格式
    在这里插入图片描述

    为了稳定性，我们选择2.0.7版本的JetBrains IDE Support

    也就是
    在这里插入图片描述

  2. 安装插件

    一般来说，插件crx直接拖拽到Chrome浏览器中的扩展界面chrome://extensions/就可以直接安装

    如果上述操作无法正确安装并且报错程序包无效："CRX_HEADER_INVALID"，可以将.crx文件重命名为.rar文件，再进行解压。

    然后在
    在这里插入图片描述

    这里点击加载已解压的扩展程序，打开刚才解压rar后的目录
    在这里插入图片描述

  3. 安装完毕后，在扩展程序页面可以找到
    在这里插入图片描述

    一般在这个页面就可以看到一个选项的按钮，我的这个浏览器需要把JetBrains IDE Support放到快捷栏中，才能找到选项

在这里插入图片描述

点开之后就配置网页以及端口了，一般默认就好（我设置的是端口63342）

在这里插入图片描述

  1. 配置webstorm客户端
    在这里插入图片描述

    新建一个html文件，可以在右上角的chrome的快捷栏中点击运行，如果提示找不到’chrome’，就在后续弹出的对话框里点Fix…
    在这里插入图片描述

    对chrome浏览器的目录进行配置

  2. 配置完毕后，就可以对html页面右键debug

![在这里插入图片描述](https://img-blog.csdnimg.cn/41303eaa98214ffb90c7e647d23b10bf.png#pic_center

稍等一下就会弹出可以实时预览的html文档

webstorm使用Live Edit插件配合chrome扩展程序JetBrains IDE Support实现实时预览html效果
qq_43881663的博客
10-11 2295
文章目录前言1 Live Edit2 JetBrains IDE Support 前言 我们平时在前端网页修改好代码要点击刷新再去看修改的效果，这样比较麻烦，那么很多软件都提供了实时预览的功能，我们一边编辑代码一边可以看到效果。下面说的是webstorm。 1 Live Edit 首先我们需要在webstorm的settings里安装插件Live Edit（一般会已经下载好）。 然后在settings里如下图所示路径找到插件进行设置。 2 JetBrains IDE Support 前面的都容易解.
如何在 WebStorm 中配置一个 Web 服务器
m0_74825135的博客
12-25 1359
如果你的项目需要与更复杂的 Web 服务器集成，可以使用 Apache 或 Nginx。WebStorm 提供了内置的 HTTP 服务器功能，可以快速预览项目的静态文件（HTML、CSS、JS 等）。如果需要动态内容或更复杂的服务器逻辑，可以在 WebStorm 中配置一个 Node.js Web 服务器。如果不需要复杂逻辑，可以使用 Python 的内置 HTTP 服务器。打开 WebStorm 的终端。Node.js Web 服务器。查看你的 Web 服务器。在项目中创建一个文件。查看项目的静态文件。
webstorm-live-templates:WebStorm IDE 的实时模板
06-27
###Copy XML 文件到特定目录 Windows： <your>\.<product><version>\config\templates Linux： ~\.<product><version>\config\templates MacOS： ~/Library/Preferences/<product><version>/templates ###模板 ####吞咽 gulpt - gulp.task('name', [modules], function() {}) gulp.task('$NAME$', [], function() { }); gulps - gulp.src('/path').pipe() gulp.src('$PATH$') .pipe
在webstorm里面自己添加浏览器
sina_panda
09-01 1万+
首先   1：File>Setting>tools>web browsers如图所示 2:我们可以看到webstrom原生的有默认的几个浏览器。如果你安装了也可以直接在运行界面的右上角直接点击，或者按alt+f2出现选择框再点击。 3：在 File>Setting>tools>web browsers这个界面可以看到在path路径这里我们点击左键出现如图，我们输入自己想要的浏览器的运行文件
设置webstorm实时预览看这一篇就够了，5分钟解决！！
LiuHu
06-21 1万+
1、安装插件Live Edit 这里学到了一个名词，捆绑，意思就是有的编辑器默认自带的,无须另外下载我这里是2020.3.2是自带的，检查是不是自带的也很简单，按照下图去看看是不是有Live Edit，如果是就是自带的（设置推荐按照图上的来），没有的话就去插件里面寻找下载即可。 installed表示之前已经安装过(就是捆绑的意思)，这里再点击是没有效果的，正常如果每安装的话应该是install，想卸载的话是uninstall 2、安装扩展 去哪下？ 翻墙还不会，好不容易有热心博主分享链接但是 当时现在
WebStrom实时预览功能
底层码农
05-03 2642
WebStrom实时预览功能
webstorm实时预览
CQG1988的博客
09-26 2563
从 idea 换到 webstorm 了，然后弄那个实时预览，配置来配置去就是不成功，调试老是弹出一个全新的 Google 浏览器，而不是在已经打开的谷歌浏览器上调试。后来谷歌搜索了一下问题，找到了官方回复。WebStorm 2020.3 从 IDE 首选项中删除了使用扩展名进行调试的选项。 官方表示：自2017.3版起，无需扩展即可进行调试。于是我按照官方教程弄了一下。 live edit是捆绑安装的，没捆绑的插件里搜索 live edit 下载安装，配置如下图 然后配置 web 浏览器，也就是
webstorm浏览器预览
最新发布
03-16
此方法的优点在于无需额外配置即可实现快速预览，同时能够即时反映代码修改后的变化。 #### 实时同步预览 为了获得更高效的开发体验，可以通过 JetBrains IDE Support Chrome 插件启用实时同步预览功能。以下是具体...
webstorm：Webstorm配置
02-18
本文将详细介绍如何配置WebStorm以优化开发体验。 1. **安装与启动** - 首先，从JetBrains官网下载最新版本的WebStorm安装包，根据操作系统选择Windows、macOS或Linux版本。 - 安装过程中，遵循向导的指示进行，...
WebStorm安装配置方法图文教程
10-14
3. Web Starter Kit：Google的开源项目，包含BrowserSync等工具，实现跨浏览器实时预览和同步。 4. React App：用于创建基于React.js的原生App。 5. Twitter Bootstrap：流行的前端开发框架，提供响应式布局和组件。...
webstorm的Live Edit插件配合chrome扩展程序JetBrains IDE Support实现实时预览html效果
Active_IT的博客
02-27 1037
我们平时在前端网页修改好代码要点击刷新再去看修改的效果，这样比较麻烦，那么很多软件都提供了实时预览的功能，我们一边编辑代码一边可以看到效果。下面说的是webstorm。首先我们需要在webstorm的settings里安装插件Live Edit（一般会已经下载好）。ip地址和端口号自动生成，一般无需去改。下面就可以使用webstorm实现实时预览html效果了。将文件直接拖入下图的chrome扩展程序页面即可完成安装。然后在settings里如下图所示路径找到插件进行设置。
webstorm实时预览,Debug模式，超级好用
43612538的博客
09-16 3538
你要使用谷歌浏览器，然后你安装一个插件，这个插件叫做：JetBrains IDE Support 然后你的webstorm就会有这个： 超级好用，再也不要写完代码，在刷新下浏览器了，你可以左边写代码，右边看结果，或者弄个显示器，超级舒适。 ...
WebStorm实时预览设置指南
gitblog_06547的博客
09-20 472
WebStorm实时预览设置指南 【下载地址】WebStorm实时预览设置指南 WebStorm实时预览设置指南本仓库提供了一个详细的指南，帮助你在5分钟内完成WebStorm的实时预览设置 项目地址: https://gitco...
WebStorm8.0.3 Live Edit与Google浏览器实时无刷新自动加载页面
weixin_34372728的博客
06-18 360
2019独角兽企业重金招聘Python工程师标准>>> ...
WebStrom实时预览功能--Chrome
热门推荐
liumengwei1的博客
10-25 1万+
1.配置WebStrom 2.chrome安装插件jetbrainside support 3.chrome插件jetbrains ide support配置 4.webstromdebug启动项目，这样修改webstrom的代码，不需要刷新就可以直接在浏览器查看了 博主扣扣：...
webstorm实时更新，热重载，刷新（设置方法）
xiaochuanxuzhou的博客
01-11 4092
拒绝废话！
WebStorm10.0.4 Live Edit与Google浏览器实时无刷新自动加载页面
weixin_30512089的博客
11-18 237
【1】打开webstorm→Ctrl + Alt + S→在搜索框输入：live edit，并且进行如下设置，设置完成点击右下角“OK”按钮： 【2】在Google浏览器中安装JetBrains IDE Suport 扩展程序，具体为： http://jingyan.baidu.com/article/bad08e1eef45fa09c85121c2.html 【3】在WebSto...
webstorm实现手机预览页面
dengdi8489的博客
05-31 1651
效果：在webstorm中开发页面，复制该页面在电脑中的浏览网址，发给手机，在手机上点击链接，可以直接访问本地开发的页面。并且，电脑上修改后保存，手机上刷新即可看到效果。 步骤： 1、webstorm菜单栏，点击 File ——> settings... ，选择 Debugger，然后按下图红框里的配置。 2、选择 Deployment，按照下图配置。 ...
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值