sublime text 前端 js 调试必须依赖 chrome devtools，sublime 仅负责写代码、设 debugger;、保存触发刷新；需确保文件为 .html/.js 后缀且已保存，安装 package control 和 emmet、eslint 插件为首要步骤。
Sublime Text 本身不内置调试器，前端 JS 调试必须靠浏览器 DevTools 主导，Sublime 只能配合设断点、触发刷新、联动查看——强行装 Debugger 插件容易卡死或断连，2026 年主流做法是「写在 Sublime，断在 Chrome」。
安装 Sublime Text 后必须立刻做的三件事
不是装一堆插件，而是先稳住基础环境：
- 确认安装时勾选了
Add to PATH（Windows）或已将subl命令加入 shell（macOS/Linux），否则后续命令行调用会失败 - 首次启动后，按
Ctrl + `打开控制台，粘贴 Package Control 官方脚本（2026 年仍有效），回车执行；重启后左下角出现Package Control提示才算成功 - 右键任意 HTML 文件 → “Open with Sublime Text”，再右键 → “Properties” → 确认默认打开方式已关联，避免双击文件时弹出记事本
Emmet 和 ESLint 是唯二不可跳过的插件
它们解决的是“写错”和“写慢”两个高频痛点，其他插件优先级远低于这两者：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
Emmet：输入!+Tab直接生成完整 HTML5 骨架；div.container>ul>li*3+Tab输出带嵌套结构的列表。注意检查设置里html5模式是否启用（默认开），关了就只能输出 XHTML 风格标签 -
ESLint：必须在项目根目录放.eslintrc.js，且插件配置中指定node_path指向全局或本地eslint可执行文件路径（比如/usr/local/bin/eslint或./node_modules/.bin/eslint），否则标红失效但无任何报错提示
保存即刷新的可靠方案只有两种
别碰 LiveStyle——它自 2022 年起停止维护，新版 Chrome 无法注入 CSS，且不报错，你会以为自己改错了
- 推荐用 Chrome 扩展
Live Server：右键 HTML 文件 → “Open with Live Server”，自动启动本地服务并监听文件变化；Sublime 只需正常Ctrl + S，浏览器秒刷新 - 命令行方案用
browser-sync：npm install -g browser-sync，然后在项目目录运行browser-sync start --server --files "*.html, *.css, *.js"；Sublime 保存后，终端里能看到Reloading Browsers...日志 - 绝对不要依赖 Sublime 自带的
View In Browser插件：它只是用系统默认浏览器打开file://协议地址，不支持热更新，且未保存文件根本打不开（浏览器报ERR_FILE_NOT_FOUND）
Debugger 插件在 2026 年的实际可用性很有限
它能连上 Chrome，但断点命中率低、变量面板常为空、F11 单步偶尔卡死——这不是配置问题，是 Sublime 的事件循环与 Chrome DevTools Protocol 的兼容性瓶颈
- 如果你坚持要用，必须在项目根目录建
.sublime-project文件，明确写入"settings": {"debugger.chrome.path": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"}（macOS 示例），Windows 要填具体 exe 路径，不能只写chrome - 断点只能设在已加载的 JS 文件里（比如
<script src="app.js"></script>），内联<script></script>里的断点大概率不生效 - 真正稳定的调试流程是：Sublime 里写好
debugger;→ 保存 → 切到 Chrome DevTools 的Sources面板 → 刷新页面 → 断点自然停住；这才是 2026 年最省心的做法
最容易被忽略的其实是文件后缀和保存状态：HTML 必须是 .html，JS 必须是 .js，未保存的临时文件（标题栏带 * 号）浏览器根本读不到，所有“刷新没反应”的问题，80% 出在这里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
