FE - WebStorm 与 Chrome 热加载配置

最新推荐文章于 2024-03-10 16:57:29 发布

原小明

最新推荐文章于 2024-03-10 16:57:29 发布

阅读量5.5k

点赞数 1

文章标签： chrome web webstorm 热更新

本文链接：https://blog.csdn.net/lablenet/article/details/56276729

版权

1.背景

刚接触 webstorm 进行开发，总是在chrome 上手动刷新网页看效果，总是太麻烦。之前在做Android开发的时候，了解到热加载，想着web也有，就此有了这篇文章。

2.webstorm配置

file/settings/Build…./Debuger/live Edit

选中Auto in 多少ms , 将下面的Restart if hotswap fails 打钩！

这里写图片描述

3.Chrome 配置

下载 jetBrains IDE support 插件，自己翻墙咯。chrome 应用商店的，直接安装即可。

这里写图片描述

4. 使用

打开webstorm ，在html 上右击 Debug xxx.html 在chrome打开即可。

这里写图片描述

chrome上会出现下面内容：

这里写图片描述

如果想再次打开，可以直接点击工具栏上的debug :

这里写图片描述

5.更多

运行后，底部debug下会出现 console,这个可浏览器中的是一样的。

这里写图片描述

更多待发掘 …

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

原小明

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

webstorm 实时更新 热加载

lwh156541064的博客

02-22

3267

原文链接:webstorm 实时更新 热加载 下载安装Chrome插件JetBrains IDE Support https://pan.baidu.com/s/1dEWaePV，设置端口，必须和webstorm中的一样开启设置，设置端口对于文件右键debug即可会自动打开浏览器，并且自动更新数据 ...

wenstorm设置谷歌_WebStorm+Chrome调试Vue步骤

weixin_39663378的博客

12-22

277

在调试时请注意:在WebStorm中启动调试时，WebStorm会根据你设置的url，自动打开新的Chrome浏览器进程访问这个设置的url，而且这个浏览器页面和你平常看到的浏览器差异会比较大，看不到书签栏，也看不到你先前所装的所有插件。这是因为平常我们打开Chrome浏览器进程时，并不会添加–remote-debugging-port选项，而WebStorm无法让已经打开的Chrome实例支持...

参与评论您还未登录，请先登录后发表或查看评论

实现热加载的Chrome扩展

08-10

实现热加载的Chrome扩展

webstorm实时更新，热重载，刷新（设置方法）

xiaochuanxuzhou的博客

01-11

3208

拒绝废话！

webStorm--热部署supervisor配置

mpchen的博客

11-04

1061

1、全局安装supervisor npm install -g supervisor 2、新建Node.js项目 3、配置路径，按下图配置，点ok即可

React项目调试---WebStorm+Chrome调试

weixin_45178761的博客

04-07

4431

React项目其实是可以调试的。并且WebStorm+chrome也可以调试React项目。 1种调试方式 WebStorm + Chrome WebStorm + Chrome WebStorm是我最喜欢的前端开发IDE，只是比较重量级，启动速度较慢。而在调试方面WebStorm + Chrome进行调试时，可以在WebStorm中源代码处加断点，当代码执行到断点处时，系统会让WebStorm...

Alfred-workflow-webstorm:Alfred-workflow-webstorm

06-02

WebStorm Workflow for Alfred 简介 WebStorm 工作流 for Alfred WebStorm -> Tools -> Create Command-line Launcher 添加 /usr/local/bin/wstorm 命令先添加 workspace，再使用用法：打开操作 ws query 通过 ...

前端开发-Webstorm

最新发布

12-05

前端开发-Webstorm

docker-webstorm:运行JetBrains WebStorm Javascript IDE的Docker映像

04-30

Docker Compose文件被配置为将您的主目录挂载到容器中。故障排除用户帐号该图像假定运行Continer的帐户的用户和组ID为1000：1000。这使容器可以将文件保存在您的主目录中，并保留适当的权限。 X视窗如果映像...

bruce-li-webstorm 2019

05-17

bruce_li_ 2019

【前端】debug调试 - 使用 Webstorm 与 Chrome 相结合的方式（JetBrains IDE Support插件）

shenli_MLZS

01-09

2841

准备工作 JetBrains IDE Support插件链接：https://pan.baidu.com/s/1kDmdgOdhhAzsQQ_ljoeUqw 提取码：un5k 安装方式：直接在“拓展工具”中，将云盘中的文件拖入，即可安装；安装完成后端口修改网址（需要与webstorm的端口一致）：chrome-extension://hmhgeddbohgjknpmjagkdomcpo...

谷歌浏览器安装webstorm插件JetBrains IDE Support Chrome下载地址及使用方法实现自动刷新

未曾远去

04-23

2572

1，参考链接：JetBrains IDE Support Chrome插件使用方法。如果插件安装失败考虑下载低版本谷歌浏览器怎么在谷歌浏览器中安装.crx扩展名的离线chrome插件 2，下载地址：插件点击下载。 3，安装好之后具体使用步骤：在webstorm中打开页面，选择谷歌浏览器打开，在谷歌浏览器中右键选择inspect in webstorm即可出现提示。 4、webstorm用J...

webstorm热更新

球球之家

06-13

6116

打开setting选择system settings去掉勾选项，如图所示

webstorm开发nodejs项目的相关配置

壁立千仞无欲则刚的博客

08-12

4753

一开始用sublime写nodejs，发现他的代码提示还是不够好用，另外有些地方出错了，代码上面也没有提示（明显的格式错误等），有次一个低级的错误很久没找出来，就是因为即使你写了错误的参数，他仍然不会有错误的提示。经过一番研究搜索之后，决定试用下传说中的js神器webstorm，确实是很棒！说一些遇到的问题： 1、他会检查拼写错误，如果一个字符串单词他经常要提示你拼写错了，这个很烦，

WebStorm的必装插件（2024版）

AGW.的博客

03-10

9470

WebStrom真的很牛！

webstorm chrome热更新

Claroja

01-19

656

webstorm 点击debug

WebStorm开发热更新

Lee_01的博客

03-25

1106

前端开发热更新 1.Chrome安装LiveReload插件 2.WebStorm设置live edit 3.npm安装livereload 全局安装 npm install -g livereload 4.监听文件 livereload [filepath] livereload ./demo livereload ./demo/Demo.html d ./demo/Demo.ht...

LiveReload Chrome插件配合SpringBoot的热部署使用（三）

殇莫忆的博客

07-31

1181

LiveReload Chrome 目录 LiveReload Chrome LiveReload插件概述 LiveReload插件下载安装 LiveReload插件使用说明 LiveReload插件相关文章推荐 LiveReload Chrome插件下载地址 LiveReload插件概述 LiveReload是一款跨平台的软件，在OS X、Windows以及 Linux 下都能...

Webstorm 超实用教程

weixin_34409703的博客

05-05

584

更新日志 2017年10月18日（四） Webstorm 启动缓慢，操作卡顿优化。 2017年10月22日（三.7） Webstorm 配置 Less 自动转译 CSS。 2017年11月2日 Webstorm 配置 File Types，使微信小程序代码高亮显示。（三.9） 2017年11月29日 Webstorm 2017.2 版...

webstorm开启热加载

11-20

WebStorm是一款强大的JavaScript IDE，它的热加载(Hot Module Replacement, HMR)功能允许你在不刷新整个页面的情况下实时更新代码并看到变化。要启用WebStorm的热加载，通常需要按照以下步骤操作： 1. **安装插件** (如果尚未安装)：对于HTML/CSS/JS项目的热加载，WebStorm内置了一些支持，但如果使用像React、Vue等框架，可能需要安装额外的HMR插件，如"Hot Templates" 或 "React Hot Loader"。 2. **设置项目配置**： - 打开 `File` > `Settings`（Mac: `Preferences`），选择 `Editor` > `Inspections`，确保 `Live Edit` 配置已关闭，因为这可能会干扰HMR。 - 在 `Languages & Frameworks` 菜单下找到对应的语言（如 `JavaScript`, `TypeScript`, `Vue.js` 等），然后选中 `Webpack` 或 `Rollup` 选项，配置相关的构建工具。 3. **启用HMR**： - 对于基于Webpack的项目，打开项目根目录下的 `webpack.config.js` 或其配置文件，找到 `module.hot` 相关部分并确保已经配置了HMR的支持。 - 如果使用React，可以在`webpack.dev.conf.js`或类似配置文件中启用`react-hot-loader`. 4. **启动项目**： - 使用WebStorm的 `Run` 或 `Debug` 功能启动项目，选择支持热加载的运行配置。 5. **编辑代码**： - 在WebStorm中修改源代码后，保存即可看到更改立即反映在浏览器上，无需手动刷新页面。请注意，不是所有语言和框架都支持热加载，具体情况需要查看文档或者项目配置。如果你遇到问题，可以检查一下WebStorm的错误日志或者尝试在网上搜索特定技术栈的教程。