webstorm的Live Edit插件配合chrome扩展程序JetBrains IDE Support实现实时预览html效果
前言
我们平时在前端网页修改好代码要点击刷新再去看修改的效果，这样比较麻烦，那么很多软件都提供了实时预览的功能，我们一边编辑代码一边可以看到效果。下面说的是webstorm。
1 Live Edit
首先我们需要在webstorm的settings里安装插件Live Edit（一般会已经下载好）。
然后在settings里如下图所示路径找到插件进行设置。
2 JetBrains IDE Support 插件下载
阿里云盘地址
链接：https://www.alipan.com/s/ksu6C2k35z9
提取码：9ed6
将文件直接拖入下图的chrome扩展程序页面即可完成安装。
确认添加
ip地址和端口号自动生成，一般无需去改。下面就可以使用webstorm实现实时预览html效果了。
实时预览变更的页面
相关文章：
webstorm的Live Edit插件配合chrome扩展程序JetBrains IDE Support实现实时预览html效果
前言 我们平时在前端网页修改好代码要点击刷新再去看修改的效果，这样比较麻烦，那么很多软件都提供了实时预览的功能，我们一边编辑代码一边可以看到效果。下面说的是webstorm。 1 Live Edit 首先我们需要在webstorm的settings里安装插件Live …...
ROS环境搭建
ROS首次搭建环境 注：以下内容都是在已经安装好ros的情况下如何搭建workplace 一、创建工作空间二、创建ROS包三、注意 注：以下内容都是在已经安装好ros的情况下如何搭建workplace 如果没有安装好，建议鱼香ros一步到位:鱼香ROS 我也是装了好久…...
Cherry Studio + 火山引擎 构建个人AI智能知识库
🍉在信息化时代，个人知识库的构建对于提高工作效率、知识管理和信息提取尤为重要。尤其是当这些知识库能结合人工智能来智能化地整理、分类和管理数据时，效果更为显著。我最近尝试通过 Cherry Studio 和 火山引擎 来搭建个人智能知识库&#…...
Spring Boot 与 MyBatis 版本兼容性
初接触Spring Boot，本次使用Spring Boot版本为3.4.3，mybatis的起步依赖版本为3.0.0，在启动时报错，报错代码如下 org.springframework.beans.factory.BeanDefinitionStoreException: Invalid bean definition with name userMapper…...
《 C++ 点滴漫谈： 二十九 》风格 vs. C++ 风格：类型转换的对决与取舍
摘要 类型转换是 C 编程中的重要机制，用于在不同数据类型之间进行安全高效的转换。本博客系统介绍了 C 提供的四种类型转换运算符（static_cast、dynamic_cast、const_cast 和 reinterpret_cast）的用法及适用场景，分析了它们相较于…...
AI预测福彩3D新模型百十个定位预测+胆码预测+杀和尾+杀和值2025年3月3日第11弹
前面由于工作原因停更了很长时间，停更期间很多彩友一直私信我何时恢复发布每日预测，目前手头上的项目已经基本收尾，接下来恢复发布。当然，也有很多朋友一直咨询3D超级助手开发的进度，在这里统一回复下。 由于本人既精…...
ArcGIS Pro高级应用：高效生成TIN地形模型
一、引言 在地理信息科学与遥感技术的快速发展背景下，数字高程模型（DEM）已成为地形表达与分析的关键工具。 三角网（TIN）作为DEM的一种重要形式，因其能够精准描绘复杂地形特征而广受青睐。 ArcGIS Pro为用…...
【学术会议论文投稿】Spring Boot实战：零基础打造你的Web应用新纪元
第七届人文教育与社会科学国际学术会议（ICHESS 2024）_艾思科蓝_学术一站式服务平台 更多学术会议请看：https://ais.cn/u/nuyAF3 目录 一、Spring Boot简介 1.1 Spring Boot的诞生背景 1.2 Spring Boot的核心特性 二、搭建开发环境 2.1…...
OpenWebUI提示器：Prompt工程的“智能助手”还是“自动化革命”？
引言：当AI对话成为日常，如何让模型更懂你？ 在AI技术爆炸式发展的今天，从写邮件到生成代码，大型语言模型（如ChatGPT、Claude等）已深入日常场景。但你是否遇到过这样的问题？ “为什么…...
Spring Boot 异步编程深入剖析
Spring Boot 异步编程深入剖析 1. 异步方法的使用 原理深度解析 Spring Boot 的异步方法基于 Spring 的 AOP（面向切面编程）实现。当在方法上添加 Async 注解时，Spring 会为该方法所在的类创建一个代理对象。当调用该异步方法时，…...
使用pyinstaller和tinyaes，对加密文件文件源码进行打包
使用pyinstaller和tinyaes，对加密文件文件源码进行打包 winr后，进入cmd命令行 1. 安装虚拟环境 pip install virtualenv pip install virtualenvwrapper-win2. 制作虚拟环境 mkvirtualenv -p"你的Python解释器地址" py版本号 例如ÿ…...
分布式和微服务的理解
分布式系统 概念：分布式系统是由多个通过网络连接的节点组成的系统，这些节点分布在不同的地理位置或计算机上，它们相互协作，共同完成一个或多个任务，对用户或外部系统而言，就好像是一个单一的、统一的系统…...
麒麟V10-SP2-x86_64架构系统下通过KVM创建虚拟机及配置虚机的NAT、Bridge两种网络模式全过程
文章目录 一、什么是虚拟化？虚拟化具有哪些优势 二、常见的虚拟化技术1、kvm介绍2、kvm工作原理3、kvm功能 三、安装kvm并启动第一个kvm机器1、环境准备2、安装kvm工具3、启动并设置开机自启 libvirtd 服务4、验证 KVM 模块是否加载5、上传系统镜像到指定目录6、网络…...
watchEffect的用法
watchEffect的用法 watchEffect的回调方法里，用到了哪个属性，就监视哪个属性 let temp 0; let height 0; watchEffect(()>{if(temp.value > 60 || height.value > 80){console.log(给服务器发请求)} })...
第15届 蓝桥杯 C++编程青少组中级省赛 202408 真题答案及解析
第 1 题 【 单选题 】 定义 char a[]="hello\nworld"，执行 cout<<a，输出结果是（ ） A：helloworld B： hello world C：hellonworld D：hello\nworld 解析： 转义字符的作用 \n 是换行符，会被编译器解析为换行操作，而非直接输出字符 \n。 输出…...
扫描纸质文件转pdf---少页数+手机+电脑协作
针对手机上扫描软件扫描文件转pdf要收费的问题，提供一种在页数较少时的免费替代方案 。 实现方法：手机软件的免费功能将文件扫描并保存为图片电脑端在word中将图片拼成文档word转pdf 1.借助于“扫描全能王”APP可以免费扫描文件为图片的功能࿰…...
大模型巅峰对决：DeepSeek vs GPT-4/Claude/PaLM-2 全面对比与核心差异揭秘
文章目录 一、架构设计深度解剖1.1 核心架构对比图谱1.2 动态MoE架构实现架构差异分析表 二、训练策略全面对比2.1 训练数据工程对比2.2 分布式训练代码对比DeepSeek混合并行实现GPT-4 Megatron实现对比 2.3 关键训练参数对比 三、性能表现多维评测3.1 基准测试全景对比3.2 推理…...
运维实战---多种方式在Linux中部署并初始化MySQL
运维实战—多种方式在Linux中部署并初始化MySQL 前言实验环境介绍一、源码包安装MySQL 1、配置MySQL&编译安装2、初始化数据库3、配置环境变量 二、yum安装MySQL三、rpm安装MySQL 前言 MySQL是常用的关系型数据库，具有以下特点： 1、开源ÿ…...
SQL注入攻击
SQL注入攻击的原理 原理：将SQL命令插入到web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器，执行恶意的SQL命令 SQL注入攻击的主要原因 SQL注入主要原因是程序员在开发用户和数据库的系统时没有对用户输入的字符串进行过滤…...
面试常问的压力测试问题
性能测试作为软件开发中的关键环节，确保系统在高负载下仍能高效运行。压力测试作为性能测试的重要类型，旨在通过施加超出正常负载的压力，观察系统在极端条件下的表现。面试中，相关问题常被问及，包括定义、重要性、与负…...
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造，完美适配AGV和无人叉车。同时，集成以太网与语音合成技术，为各类高级系统（如MES、调度系统、库位管理、立库等）提供高效便捷的语音交互体验。 L…...
业务系统对接大模型的基础方案：架构设计与关键步骤
业务系统对接大模型：架构设计与关键步骤 在当今数字化转型的浪潮中，大语言模型（LLM）已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中，不仅可以优化用户体验，还能为业务决策提供…...
Linux 文件类型，目录与路径，文件与目录管理
文件类型 后面的字符表示文件类型标志 普通文件：-（纯文本文件，二进制文件，数据格式文件） 如文本文件、图片、程序文件等。 目录文件：d（directory） 用来存放其他文件或子目录。 设备…...
css实现圆环展示百分比，根据值动态展示所占比例
代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...
线程同步：确保多线程程序的安全与高效！
全文目录： 开篇语前序前言第一部分：线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分：synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分ÿ…...
uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖
在前面的练习中，每个页面需要使用ref，onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入，需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...
关于nvm与node.js
1 安装nvm 安装过程中手动修改 nvm的安装路径， 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解，但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后，通常在该文件中会出现以下配置&…...
Go 语言接口详解
Go 语言接口详解 核心概念 接口定义 在 Go 语言中，接口是一种抽象类型，它定义了一组方法的集合： // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的： // 矩形结构体…...
【python异步多线程】异步多线程爬虫代码示例
claude生成的python多线程、异步代码示例，模拟20个网页的爬取，每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程：允许程序同时执行多个任务，提高IO密集型任务（如网络请求）的效率…...
tree 树组件大数据卡顿问题优化
问题背景 项目中有用到树组件用来做文件目录，但是由于这个树组件的节点越来越多，导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多，导致的浏览器卡顿，这里很明显就需要用到虚拟列表的技术&…...