sublime实时刷新页面

最新推荐文章于 2024-10-10 12:08:16 发布
最新推荐文章于 2024-10-10 12:08:16 发布
阅读量543 收藏
点赞数
分类专栏： 前端积累
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/L20150514/article/details/119042004
版权
本文介绍了如何在Sublime Text中配置实时刷新页面的功能。首先，详细讲解了浏览器脚本的下载、安装和使用，包括通过、或构建和打包扩展。接着，阐述了在Sublime Text中安装LiveReload脚本的步骤，以及在Preferences中配置Settings。最后，测试了在Chrome、Firefox和Microsoft Edge等浏览器中的实时刷新效果。
摘要由CSDN通过智能技术生成

浏览器脚本安装

  1. 插件下载地址
    LiveReload
  2. 使用 npm install安装
  3. 使用 grunt chrome、 grunt firefox或grunt all构建和打包扩展
    构建和打包的项目存放在同级目录 dist 文件夹
    在这里插入图片描述
  4. 如果 grunt 不可使用；使用 npm install -g grunt-cli
  5. 安装脚本到浏览器
    打开扩展管理界面，将 第四步 构建的文件解压之后直接拖拽到页面进行安装。

sublime脚本安装

  1. Ctrl + shift + p

  2. 进入脚本安装 输入：pcip然后回车
    在这里插入图片描述

  3. 安装 LiveReload脚本

  4. 配置 preferences -> Package Settings -> Live Reload -> Sett

最低0.47元/天 解锁文章
sublime Text3之保存刷新 Browser Refresh
微也的博客
11-25 8377
进行web编码的过程中，我们不厌其烦的进行 编码，ctrl+s保存，打开浏览器，刷新，就这样循环复循环，当然这无疑反映了开发人员在这点上是个很有耐心的人，后来发现有一天手指要起茧了，如果你有隐隐的莫名疼痛，ok，想不想简化步骤呢，或者能不能在保存后就刷新呢，省了不少事…… 今天推荐一个Sublime Text 3的插件，Browser Refresh，实现保存后页面刷新的问题。 1. 既然是插
sublime3安装插件实现前端自动刷新
sqqihao的博客
09-18 1267
这两天倒腾编辑器，atom实在太大了，还是sublime好用 　　以前一直用sublime2， 然后更新到sublime3， 然后把一些必要的插件安装了一下：liveload(自动刷新)； 　　package control 　　首先给sublime添加了一个package control的插件， sublime2和sublime3安装package control 的方式不同， 查看这里
sublime3安装liveload，实现前端自动F5刷新html界面
weixin_34194317的博客
09-07 224
　　这两天倒腾编辑器，atom实在太大了，还是sublime好用 　　以前一直用sublime2， 然后更新到sublime3， 然后把一些必要的插件安装了一下：liveload(自动刷新)； 　　package control 　　首先给sublime添加了一个package control的插件， sublime2和sublime3安装package control 的方式不同， 查看这...
全面体验Sublime Text 3编辑器核心功能与特性
最新发布
weixin_30356433的博客
10-10 853
本文还有配套的精品资源，点击获取 简介：Sublime Text 3是一款受开发者喜爱的高级文本编辑器，它具有高度的可定制性和丰富的插件生态系统。本简介详细介绍了其核心功能，包括多选与多列编辑、即时预览、代码自动完成、Goto Anything、分割编辑、强大的搜索与替换、宏、插件系统、主题和配色方案以及跨平台支持。 1. Sublime Text 3编辑器特性 ...
sublime使用LiveReload自动刷新
郑斯达的博客
08-03 693
sublime使用LiveReload自动刷新安装LiveReload设置LiveReload启用浏览器安装 安装LiveReload 打开sublime后，ctrl+shift+p 输入 install package 在出现的搜索框中输入 LiveReload 进行搜索，然后选择LiveReload安装。由于我已经安装，下图中没有出现对应的项 设置LiveReload启用 等待安装完成后，ctrl+shift+p，输入 LiveReload，选择 LiveReload: Enable/disable
sublime自动刷新网页
qq_29755359的博客
03-02 1184
sublime自动刷新网页，网页自动刷新,前端开发利器,前端开发必备
sublime3配置markdown实时刷新（chrome）
lei___2011的专栏
04-19 1173
目录 需求分析 工具 安装插件 安装Package Control 安装插件 插件配置 使用 需求分析 轻量级的编辑器 支持编辑刷新预览同步 免费 基于目前市面上各种各样的Markdown编辑器，排除掉收费的、在线的、以及笔记类工具，最终选择了sublime3 + MarkdownEditing插件的模式。 需要的工具 Sublime3 Sublime3插件...
Sublime Text3 实现实时刷新页面
ion_L的博客
02-25 2878
https://blog.csdn.net/dearmorning/article/details/78925758
Sublime Text 3 + Chrome 配置LiveReload 实现实时刷新
qq_45642410的博客
12-26 473
一、在sublime text3中安装插件liveReload 1、Ctrl + shift + P，弹出以下页面，输入 install ，然后点击 Install Package 2、在弹出的新的页面中输入add repository，点击搜索出来的 add repository 底下会出现一个框，增加下面的 url https://github.com/NickWoodhams/LiveReload.git 3、之后再按 Ctrl + shift + P 4、点击 Install Package
Sublime Text Build
09-29
3. **实时预览**：通过插件如LiveReload，Sublime Text 可以实现实时的代码编辑和浏览器刷新，让你在编写前端代码时看到即时效果。 4. **强大的语法高亮**：Sublime Text 提供了对多种编程语言的语法高亮支持，使得...
sublime配置自动刷新和开启vim模式
九段刀客的博客
09-07 347
工具 sublime中安装 liveReload sublime中安装 sublimeServer chrome中安装 liveReload 配置 sublime { "enabled_plugins": [ "SimpleReloadPlugin", "SimpleRefresh" ] } chrome的插件liveReload中配置 启动 ...
sublime3--auto-save + LiveReload 实现前端自动刷新
choutiqiao5317的博客
02-24 356
前言： 近期学习前端，由于网页制作要实时预览 当时年少无知和满腔热血 ，不断的循环着 coding + Ctrl-S + F5 的体力活动；终于觉悟想偷懒 ，于是找到了LiveReload + sublime3 组合，试了很多帖子的方法。 出现的问题的猜想： 当subl...
Sublime text3配置LiveReload 实时预览 无需刷新
qq_43682537的博客
01-30 981
Sublime text3配置LiveReload 实时预览 无需刷新
Browser Refresh - Sublime Text 插件
gitblog_00017的博客
03-18 351
Browser Refresh - Sublime Text 插件 去发现同类优质开源项目:https://gitcode.com/ 是一个用于实时刷新浏览器的 Sublime Text 插件。 项目简介 作为一个前端开发者，我们经常需要在开发过程中不断地刷新浏览器以查看最新的代码效果。手动刷新不仅耗时且效率低下，因此，Browser Refresh 插件应运而生，它可以自动检测文件变更并在浏...
sublime 自动保存和自动刷新浏览器插件安装配置
weixin_33923148的博客
06-03 468
2019独角兽企业重金招聘Python工程师标准>>> ...
Sublime Text3搭配LiveReload实现实时刷新
DearMorning的博客
12-28 5893
前言： LiveReload是一款连接编辑器与浏览器解放F5的开发工具。LiveReload会监视文件系统的变化，一旦你保存文件，它就将浏览器刷新。所以当你改变保存一个CSS文件或图像，浏览器是即时刷新页面，无需你手动点击F5刷新。 一、下载安装插件LiveReload 在Chrome应用商店下载插件LiveReload，点击添加到Chrome后在菜单栏中显示一个有着空心圆的图标。
sublime text 编辑器插件文本修改在浏览器直接更新
hanqingsong412的专栏
10-20 872
sublime text 安装插件 ctrl+shift+P 命令面板，输入install package，输入browser 找到 view in browser选中安装 插件配置修改 preference>>package settings>>view in browser>>settings-user 修改 { "nt": { "win32": { "fir
Sublime Text3+FireFox+LiveReload配置与使用
m0_60402183的博客
03-09 634
本文补充：1、配置的总体步骤2、配置成功以后，每次启用Sublime Text编写网页，还需要怎么做才能使浏览器自动刷新？3、中途新开文件写网页可以保持连接吗？
使用sublime text3配合chrome实现自动刷新
永远的三分钟热度的博客
06-20 3013
下载LiveReload浏览器插件，在chrome商店中（当然需要科学上网）下载后安装——右键（管理扩展程序）——打开“允许访问文件网页”2.下载LiveReload的sublime text插件sublime插件3.在sublime中把下载好的LiveReload插件解压后放在在打开的文件夹中，重命名为“LiveReload”4.在sublime中选择settings-user添加：{"enab...
旅游网页设计sublime text代码
06-23
在使用Sublime Text进行旅游网页设计时，这款文本编辑器因其轻量级、高效和丰富的插件生态系统而受到开发者喜爱。以下是如何在Sublime Text中进行网页设计的一些基本步骤和注意事项： 1. **设置基础环境**： - 安装HTML、CSS和JavaScript支持：Sublime Text本身已经内置了对这些语言的基本支持，确保它们被正确地识别。 - **安装插件**： - Emmet：用于编写简洁的HTML和CSS，提高代码编写速度。 - SideBarEnhancements：提供文件夹和预览功能，方便管理项目结构。 - ColorPicker：选择颜色更便捷。 - Autoprefixer：自动添加浏览器前缀，保持代码兼容性。 - LiveReload：实时更新，无需手动刷新查看更改。 2. **代码格式化**： - 使用插件如"Package Control + Alt+Shift+F" (或`Ctrl+Shift+F`取决于你的键盘布局)来格式化HTML/CSS/JS代码，使代码更具可读性。 3. **代码片段**（Snippets）： - 创建和保存常用的代码片段，例如导航栏、页脚、表单等，可以通过`Ctrl+Shift+P`调出命令面板选择"New Snippet"快速插入。 4. **代码高亮和语法检查**： - Sublime Text的内置语法高亮功能可以让你轻松区分不同的标签、属性等，同时可以使用如JSHint或ESLint的插件进行JavaScript代码的错误检查。 5. **项目管理和构建工具**： - 如果你的网站项目较大，可以利用Git进行版本控制，或者配置Webpack、Gulp等构建工具以自动化编译过程。 6. **实时预览**： - 使用插件如"Live Server"可以在Sublime Text内启动一个本地服务器，方便实时查看和调试网页。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值