WebStorm+Chrome开启Live Edit

最新推荐文章于 2025-02-27 23:25:50 发布
最新推荐文章于 2025-02-27 23:25:50 发布
阅读量5k 收藏 6
点赞数 4
分类专栏： 开发工具 文章标签： WebStorm Chrome Live Edit
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luopotaotao/article/details/80482533
版权

使用WebStorm做前端开发,Chrome+jb插件进行调试,可以实现Live Edit,所见即所得,极大的加快开发效率

工具下载:

WebStrom

Chrome

Chrome JB插件

步骤

Chrome 配置jb插件

安装完成后,桌面上有Chrome的快捷方式
双击该快捷方式,启动Chrome,选择...->更多工具->扩展程序,勾选开发者模式,关闭浏览器
重新启动Chrome,选择...->更多工具->扩展程序,将当前文件夹内的jetbrains_ide_support_2_0_7_.crx 拖动到Chrome窗口中即可


WebStorm配置

新建一个空的项目,并创建html文件
选择File Settings->输入 Live Edit->选择Build,Execution,Deployment>Debugger>Live Edit
在该页面内勾选全部选项,并调整页面刷新时间,OK
编辑debugger选项,新建一个JavaScript Debug,Name随意,点击url后面的...按钮,选择要debug的html文件,
如需调试js代码,请勾选Ensure breakpoints are detected when loading scripts选项,OK

点击Debug按钮或者在html编辑框内右键,debug该页面即可



webstorm使用Live Edit插件配合chrome扩展程序JetBrains IDE Support实现实时预览html效果
qq_43881663的博客
10-11 2147
文章目录前言1 Live Edit2 JetBrains IDE Support 前言 我们平时在前端网页修改好代码要点击刷新再去看修改的效果，这样比较麻烦，那么很多软件都提供了实时预览的功能，我们一边编辑代码一边可以看到效果。下面说的是webstorm。 1 Live Edit 首先我们需要在webstorm的settings里安装插件Live Edit（一般会已经下载好）。 然后在settings里如下图所示路径找到插件进行设置。 2 JetBrains IDE Support 前面的都容易解.
WebStorm中使用live-server插件
最新发布
Eddie'Blog
04-10 590
打开文件后输入 *.fdy.live.com 的域名。若不需要指定直接使用localhost就直接运行。默认打开的页面，也可以指定某个html地址。
WebStorm 6.0的live edit功能实现步骤
Quincylk的专栏
04-25 3740
http://hi.baidu.com/shaw_cd/item/8af86aa0e6c098a029ce9d1e JetBrains最新发布的WebStorm 6.0确实是Web前端开发的最佳工具，试用了一下，简直爽惨了。破天荒地第一次自费掏腰包买了正版的，才99块（OSChina争取到了中国用户3折）。 微博上有位小兄弟提到每次用WebStorm编写完代码后，要打开浏览器，
webstorm的Live Edit插件配合chrome扩展程序JetBrains IDE Support实现实时预览html效果
Active_IT的博客
02-27 617
我们平时在前端网页修改好代码要点击刷新再去看修改的效果，这样比较麻烦，那么很多软件都提供了实时预览的功能，我们一边编辑代码一边可以看到效果。下面说的是webstorm。首先我们需要在webstorm的settings里安装插件Live Edit（一般会已经下载好）。ip地址和端口号自动生成，一般无需去改。下面就可以使用webstorm实现实时预览html效果了。将文件直接拖入下图的chrome扩展程序页面即可完成安装。然后在settings里如下图所示路径找到插件进行设置。
webstorm 网页实时同步 live edit 和 JetBrains IDE Support
hxc2101的博客
01-10 2194
1. webstorm 一般是自带插件 live edit 的，不用下载 2. chrome浏览器下载插件 JetBrains IDE Support 3. webstorm 的设置中 对 live edit 进行自定义设置 如图1，随自己的需要修改即可，解释：(1) 3ms 网页更新会很快 (2) 最后一个必须打勾，才能真正使用浏览器的JB插件 4. 上面几步完成之后只需要 de...
webstorm 使用 live edit 调试时 加载外部资源出现CORS跨域的解决办法
发光吖的博客
09-09 1159
webstorm 使用 live edit 调试时 加载外部资源出现CORS跨域的解决办法 Access to font at 'http://at.alicdn.com/t/c/font_3641113_95201r1jrm.ttf?t=1662715902681' from origin 'http://localhost:63342' has been blocked by CORS policy: Response to preflight request doesn't pass access c
webstorm2021.3
06-14
7. **Live Edit**：实时预览功能让开发者可以直接在浏览器中查看代码更改的效果，2021.3可能在性能或功能上有所改进，提供更快的反馈速度。 8. **代码重构**：WebStorm的重构工具强大且易于使用，新版本可能会引入...
Webstorm 10——最全文档教学安装包
01-19
6. **Live Edit**：这个特性允许你在浏览器中实时预览代码更改，无需手动刷新页面，极大地提升了开发效率。 7. **项目导航**：通过“Structure”视图和“Go to”功能，可以快速定位到代码的任何部分，节省大量查找...
2021最新方法WebStorm实现浏览器代码同步刷新
Lzllzlmmm的博客
10-25 6527
前言使用的工具webstorm的设置两种方法360浏览器篇 这是我的第一篇博客，因为这次的webstorm代码和浏览器同步刷新的功能添加花费了我大量的时间，查找的方法也都是不可靠的或者说是过时的。下面我将介绍两种方法来实现我们的web开发所见即所得的功能，让webstorm成为我们的web开发神器。 使用的工具 WebStorm JetBrains IDE Support（下载地址下面我会附链接） webstorm的设置 安装浏览器插件前需要对webstorm进行设置 打开WebStorm，打开文件-&gt
webstorm运行的端口在哪看,更改WebStorm LiveEdit端口（63342）
weixin_42144201的博客
12-21 669
How can I change the port of the LiveEdit feature in WebStorm ?The default port is 63342, so i can run my project from : http://localhost:63342/PROJECT_NAME.but due to authentication issues I need to ...
WebStorm 8.0.4的live edit功能实现步骤 以及 WebStorm 连接不上chrome 方法详解
Just try !
09-17 2592
1.打开WebStore的设置对话框，找到live edit选项，选中Enable live editing。 2.打开Chrome浏览器，进入Chrome网上商店，搜索JetBrains IDE Suport扩展程序。点击“添加至Chrome“按钮，安装该扩展程序到Chrome。这时候，Chrome浏览器工具栏上就会出现一个JB图标。注(有时可能在网上商店里搜索不到，我这里提供了一
IDEA插件Live Edit和Chrome实现热部署
qq1016499728博客
12-14 565
IDEA插件Live Edit+谷歌浏览器JetBrains IDE Support2.0.10 JetBrains IDE Support2.0.10 下载链接 https://chrome.zzzmh.cn/info?token=hmhgeddbohgjknpmjagkdomcpobmllji 把下载的 crx后缀名改为 rar，再把rar文件解压。 谷歌浏览器–点击更多工具–扩展程序–...
webStrom调试debug vue + live edit
04-14 623
用webStrom开启调试vue 第二个文章比较全 WebStorm+Chrome调试Vue步骤 其中与到了webstorm点run能启动chrome，但是debug缺无法响应的问题，网上找了一下，重启MAC电脑搞定了。 ...
phpstorm live Edit 自动刷新html、js、css设置
Make
07-20 901
PHPSTORM的设置： Ctrl +Shift + A 呼唤出这个搜索界面，搜索plugin关键词，选择下图箭头指向回车进入设置 重启IDE Chrome浏览器设置： https://chrome.google.com/webstore/search/jetbrains%20ide%20support 安装后： 使用： Phpstorm中：在要调试的页面选择debug模式，记住，一定要是debug 此时，就可以实时编辑内容显示了 ...
webstorm chrome热更新
Claroja
01-19 659
webstorm 点击debug
IDEA Springboot项目调试Javascript代码
chengshang4326的博客
08-09 1700
编者注 最近需要编写页面，则需要进行代码debug。但是很长时间没有写前端页面导致忘记如何使用。特此记录 JavaScript Debug run->Editor Configuration -> + -> JavaScript Debug Name: 名称建议写URL UR...
webstorm实时预览
02-25
### 设置和使用 WebStorm 中的实时预览功能 #### 配置 Live Edit 插件 为了启用并配置实时预览，在 WebStorm 中需要安装和激活 Live Edit 插件。该插件允许开发者在浏览器中查看 HTML、CSS 和 JavaScript 的更改效果而无需手动刷新页面。 确保已启用了 Live Edit 功能，可以通过 `File | Settings` （对于 macOS 用户则是 `WebStorm | Preferences`），导航到 `Plugins` 并查找名为 "Live Edit" 的插件来确认其状态[^1]。 #### 启动 Chrome 浏览器调试模式 要使实时预览正常工作，还需要启动支持 WebSocket 协议的 Chrome 实例用于连接 IDE 与浏览器之间的通信桥梁。这通常通过点击编辑器右上角的小图标完成，此操作会打开一个新的带有特殊扩展程序加载项的 Chrome 窗口[^2]。 #### 使用 Live Preview 进行开发 一旦上述准备工作就绪，当修改项目文件时，任何改动都会被立即反映在关联的 Chrome 浏览器标签页内。这对于快速迭代 UI 设计尤其有用，因为可以即时看到调整后的布局变化或样式更新[^3]。 ```javascript // Example of a simple script that could benefit from live preview during development. document.querySelector('button').addEventListener('click', function() { alert('Button clicked!'); }); ``` #### 调整设置优化体验 如果希望进一步定制化 Live Preview 行为，可以在 `Settings/Preferences Dialog > Tools > JavaScript Debugger` 下找到更多选项。这里提供了诸如自动滚动至源码位置等功能，有助于提高工作效率[^4]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值