配置Webstorm的实时预览

已于 2022-05-28 21:27:16 修改
阅读量3.7k 收藏 3
点赞数
分类专栏： 前端 文章标签： webstorm chrome 前端
于 2022-05-28 21:12:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/eb_else/article/details/125023174
版权
本文介绍如何通过安装JetBrains IDE Support Chrome插件实现Webstorm的实时预览功能，包括解决安装过程中遇到的问题及配置步骤。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

配置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 2136
文章目录前言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 1147
如果你的项目需要与更复杂的 Web 服务器集成，可以使用 Apache 或 Nginx。WebStorm 提供了内置的 HTTP 服务器功能，可以快速预览项目的静态文件（HTML、CSS、JS 等）。如果需要动态内容或更复杂的服务器逻辑，可以在 WebStorm 中配置一个 Node.js Web 服务器。如果不需要复杂逻辑，可以使用 Python 的内置 HTTP 服务器。打开 WebStorm 的终端。Node.js Web 服务器。查看你的 Web 服务器。在项目中创建一个文件。查看项目的静态文件。
webstorm实时预览
CQG1988的博客
09-26 2478
从 idea 换到 webstorm 了，然后弄那个实时预览，配置来配置去就是不成功，调试老是弹出一个全新的 Google 浏览器，而不是在已经打开的谷歌浏览器上调试。后来谷歌搜索了一下问题，找到了官方回复。WebStorm 2020.3 从 IDE 首选项中删除了使用扩展名进行调试的选项。 官方表示：自2017.3版起，无需扩展即可进行调试。于是我按照官方教程弄了一下。 live edit是捆绑安装的，没捆绑的插件里搜索 live edit 下载安装，配置如下图 然后配置 web 浏览器，也就是
【前端】webstorm中运行一个前端项目
最新发布
成为你自己，做你想做的
03-20 470
准备项目文件夹。（可开源下载）前端文件夹中要放入环境配置文件。打开webstorm左上角打开项目确认此窗口打开。标题详情作者JosieBook头衔CSDN博客专家资格、阿里云社区专家博主、软件设计工程师博客内容开源、框架、软件工程、全栈（,NET/Java/Python/C++）、数据库、操作系统、大数据、人工智能、工控、网络、程序人生口号成为你自己，做你想做的欢迎三连。
设置webstorm实时预览看这一篇就够了，5分钟解决！！
LiuHu
06-21 9838
1、安装插件Live Edit 这里学到了一个名词，捆绑，意思就是有的编辑器默认自带的,无须另外下载我这里是2020.3.2是自带的，检查是不是自带的也很简单，按照下图去看看是不是有Live Edit，如果是就是自带的（设置推荐按照图上的来），没有的话就去插件里面寻找下载即可。 installed表示之前已经安装过(就是捆绑的意思)，这里再点击是没有效果的，正常如果每安装的话应该是install，想卸载的话是uninstall 2、安装扩展 去哪下？ 翻墙还不会，好不容易有热心博主分享链接但是 当时现在
WebStrom实时预览功能
底层码农
05-03 2454
WebStrom实时预览功能
webstorm的Live Edit插件配合chrome扩展程序JetBrains IDE Support实现实时预览html效果
Active_IT的博客
02-27 593
我们平时在前端网页修改好代码要点击刷新再去看修改的效果，这样比较麻烦，那么很多软件都提供了实时预览的功能，我们一边编辑代码一边可以看到效果。下面说的是webstorm。首先我们需要在webstorm的settings里安装插件Live Edit（一般会已经下载好）。ip地址和端口号自动生成，一般无需去改。下面就可以使用webstorm实现实时预览html效果了。将文件直接拖入下图的chrome扩展程序页面即可完成安装。然后在settings里如下图所示路径找到插件进行设置。
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
WebStorm8.0.3 Live Edit与Google浏览器实时无刷新自动加载页面
weixin_34372728的博客
06-18 324
2019独角兽企业重金招聘Python工程师标准>>> ...
WebStorm安装配置方法图文教程
10-14
3. Web Starter Kit：Google的开源项目，包含BrowserSync等工具，实现跨浏览器实时预览和同步。 4. React App：用于创建基于React.js的原生App。 5. Twitter Bootstrap：流行的前端开发框架，提供响应式布局和组件。...
webstorm：Webstorm配置
02-18
本文将详细介绍如何配置WebStorm以优化开发体验。 1. **安装与启动** - 首先，从JetBrains官网下载最新版本的WebStorm安装包，根据操作系统选择Windows、macOS或Linux版本。 - 安装过程中，遵循向导的指示进行，...
webstorm预览
02-26
### WebStorm 中配置和使用预览功能 #### 内置HTTP服务器预览静态文件 WebStorm 提供了内置的 HTTP 服务器功能，允许开发者快速预览项目的静态文件（HTML、CSS、JS 等）。当在 Project Tool Window 中找到 HTML ...
webstorm实时预览,Debug模式，超级好用
43612538的博客
09-16 3390
你要使用谷歌浏览器，然后你安装一个插件，这个插件叫做：JetBrains IDE Support 然后你的webstorm就会有这个： 超级好用，再也不要写完代码，在刷新下浏览器了，你可以左边写代码，右边看结果，或者弄个显示器，超级舒适。 ...
webstorm实时更新，热重载，刷新（设置方法）
xiaochuanxuzhou的博客
01-11 3222
拒绝废话！
WebStorm10.0.4 Live Edit与Google浏览器实时无刷新自动加载页面
weixin_30512089的博客
11-18 210
【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 1568
效果：在webstorm中开发页面，复制该页面在电脑中的浏览网址，发给手机，在手机上点击链接，可以直接访问本地开发的页面。并且，电脑上修改后保存，手机上刷新即可看到效果。 步骤： 1、webstorm菜单栏，点击 File ——> settings... ，选择 Debugger，然后按下图红框里的配置。 2、选择 Deployment，按照下图配置。 ...
WebStorm如何让浏览器实时更新
热门推荐
yunfeng823的博客
03-03 1万+
webstorm绑定谷歌浏览器实时刷新 WebStorm8.0.3 Live Edit与Google浏览器实时无刷新自动加载页面 摘要 WebStorm自身就不需要Ctrl+S进行保存，再结合Live Edit，直接一边写代码一边实时查看！再不需要Ctrl+S，F5！     在WebStorm8中是自带Live Edit功能的，只是默认没有开启； 1、
Web前端 html实时预览
coder的专栏
12-12 5011
Web前端 html实时预览，推荐几种方案： 1.使用webstorm 加chrome的webstorm插件 2.使用liverReload工具 3.使用hbuilder（不稳定） 4.Brackets
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值