讲师中心 微信公众号
AI工具推荐 视频效率加速

Sublime Text配合LiveReload实现浏览器实时刷新的方法

阿敏君_5091

阿敏君_5091

发布时间:2026-08-16 06:06:39

|

635人浏览过

|

来源于php中文网

原创

Sublime Text 4 的 LiveReload 插件已彻底失效,无法实现自动刷新;必须使用 livereload CLI + 浏览器扩展 + HTTP 服务三端协同,且端口、协议(http://)、文件后缀须严格对齐。

sublime text配合livereload实现浏览器实时刷新的方法

Sublime Text 4 根本不能靠 LiveReload 插件实现自动刷新——装了也白装,它已彻底失效;真正能用的路径只有一条:livereload CLI + 浏览器扩展 + HTTP 服务,三者端口、协议、文件后缀必须全部对齐。

为什么 Sublime Text 4 的 LiveReload 插件完全不工作

ST4 上 LiveReload 插件(作者 dwieeb)处于静默失效状态:不注册命令、状态栏无图标、Ctrl+Shift+P 搜不到 LiveReload: Enable,连错误提示都不给。这不是配置问题,是插件本身没适配 ST4 的 API,官方早已停止维护。你看到的“启用成功”只是 UI 假象,背后根本没建立 WebSocket 连接。

ST3 用户仍可勉强使用,但要注意:LiveReload 插件本身不刷新页面,它只负责在保存时发个通知;真正在浏览器里执行 location.reload() 的,是 Chrome/Edge 的 LiveReload 扩展。

正确做法:用 livereload CLI 启动监听服务

先确认已安装 Node.js,然后全局安装 CLI 工具:

npm install -g livereload

进入你的项目根目录,运行:

livereload . --port 35729 --exts html,css,js,md
  • --port 必须显式指定,且后续浏览器扩展要匹配同一端口
  • --exts 必须列出你要监听的后缀,漏掉 css,改样式就不会触发刷新
  • 如果报 EADDRINUSE,换端口如 --port 35730,同时更新浏览器扩展的 Options 页面
  • 别加 --no-browser 参数——它只影响是否自动开新标签页,和 Sublime 刷新无关

浏览器扩展必须手动配对且走 HTTP 协议

Chrome/Edge 必须安装官方 LiveReload 扩展(图标是黑白靶心,开发者为 LiveReload.com),然后右键图标 → Options → 把 Port 改成和 CLI 一致(默认 35729)。

page-agent 浏览器控制(CDP)
page-agent 浏览器控制(CDP)

使用 page-agent CLI(CDP)控制浏览器;CLI只能通过 GitHub Release 的 .tgz 安装,npm 官方包暂未发布。

下载

关键限制:网页必须通过 http://localhost:8000/index.html 这类地址打开,file:// 路径下浏览器会直接禁用 WebSocket 连接——这是安全策略,没法绕过。

首次启用扩展后,已打开的页面需手动按 Ctrl+R 重载一次,否则注入脚本不生效;若弹出“是否允许访问本地文件”,必须点“允许”。

Markdown 实时预览要额外配置

livereload CLI 默认不监听 .md 文件,因为 Markdown 不是 HTML。想改完 .md 立刻看到渲染效果,得靠 Markdown Preview 插件生成临时 HTML,再通知刷新。

在 Sublime 的 Preferences → Package Settings → LiveReload → Settings – User 中填入:

{
  "enabled_plugins": ["SimpleReloadPlugin"],
  "SimpleReloadPlugin": {
    "paths": ["*.md"],
    "command": "markdown_preview",
    "args": {"target": "browser", "parser": "markdown"}
  }
}
  • "command" 必须是 markdown_preview(全小写+下划线),写成 MarkdownPreview 或其他变体都无效
  • 确保 Markdown Preview 插件已安装并能正常渲染

最常被忽略的是三端协同的细节:CLI 是否真在跑、扩展端口是否同步、页面是不是走 HTTP —— 少一个,就静默失败,连控制台报错都不会有。

热门AI工具

更多
WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

相关专题

更多
PHP2Shell高危漏洞修复教程
PHP2Shell高危漏洞修复教程

PHP2Shell漏洞是什么,哪些PHP版本和运行环境会受到影响,服务器应该如何检测与修复?本专题提供版本自查脚本、Linux与Docker升级命令、PHP-FPM和Apache排查步骤,以及修复验证、临时缓解和应急响应方案。

0

2026.10.22

剧云人物设定与关系管理教程
剧云人物设定与关系管理教程

本专题介绍剧云人物设定与关系管理,讲解角色小传、性格职业、人物目标、背景资料和关系网络的创建及维护方法。

0

2026.10.22

剧云故事大纲与分场规划教程
剧云故事大纲与分场规划教程

本专题讲解剧云梗概与多级大纲功能,覆盖全局、分集、分场结构生成,以及主线冲突、剧情节点和场次顺序调整。

0

2026.10.22

VibeKnow PPT讲解视频教程汇总
VibeKnow PPT讲解视频教程汇总

本专题介绍VibeKnow PPT讲解模式的素材准备、旁白生成、页面节奏、画面呈现与导出设置,适合课程和培训场景。

0

2026.10.22

VibeKnow PDF转视频教程合集
VibeKnow PDF转视频教程合集

本专题围绕VibeKnow的PDF转视频功能,讲解文件准备、内容解析、脚本生成、重点可视化及配音字幕检查方法。

0

2026.10.22

二狗PPT模板与视觉设计
二狗PPT模板与视觉设计

本专题介绍二狗PPT的职场模板、主题风格与页面版式,覆盖模板切换、色彩选择、内容匹配和正式汇报场景下的视觉优化方法。

0

2026.10.22

php漏洞修复方法
php漏洞修复方法

PHP漏洞聚合专题,持续整理PHP最新高危漏洞、CVE安全预警、受影响版本、自查命令及修复方案,覆盖PHP-FPM、Docker、Ubuntu与Linux服务器环境,帮助开发者快速完成漏洞排查、版本升级和安全加固。

20

2026.10.22

二狗PPT入门与基础操作
二狗PPT入门与基础操作

本专题整理二狗PPT从官网进入、输入主题、生成大纲到制作成稿的基础操作,帮助新手掌握AI一键生成职场PPT的完整流程。

0

2026.10.22

讯飞绘文AI配图与绘图模型合集
讯飞绘文AI配图与绘图模型合集

本专题讲解讯飞绘文AI配图与绘图2.0 Pro,覆盖提示词、画面比例、参考图、风格选择及图片优化,帮助用户制作匹配内容的视觉素材。

0

2026.10.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn