Sublime Text 本身不提供 JavaScript 调试器，必须依赖外部工具协同完成；其设计哲学强调轻量与专注编辑，调试实际流程为：在 Sublime 写代码 → 保存 → 在 Chrome DevTools 中设断点、查看变量、单步执行。
Sublime本身不提供JavaScript调试器，必须靠外部工具协同
Sublime Text 的设计哲学是轻量与专注编辑，它没有、也不会内置像 VS Code 那样的图形化调试界面。所谓“调试”，在 Sublime 中实际是：写代码 → 保存 → 在 Chrome DevTools 中设断点、看变量、单步执行。插件只负责辅助这个流程，比如自动刷新、路径补全、语法校验，而不是替代 Chrome 的 Sources 面板。
真正有用的前端调试相关插件只有这4个
很多推荐列表堆砌10+插件，但和“调试”强相关的其实就几个，其余多为编码提效类：
-
SublimeLinter+ESLint：实时标出undefined、Promise未 catch 等运行前可发现的逻辑隐患，避免调试时卡在低级错误上 -
AutoFileName：在import、src、url()中补全路径，防止因路径错导致脚本根本没加载，白调半天 -
LiveReload或BrowserSync：保存即刷新页面，省去手动F5；尤其对service worker缓存调试很关键——改了sw.js却没生效？大概率是没刷新或缓存没更新 -
Emmet：快速生成带data-*属性或测试用 DOM 结构，方便在 Console 里快速验证函数行为，比如div#test>button.btn*3+ Tab
Chrome DevTools 连接的关键配置不能跳过
Sublime 和 Chrome 调试能否打通，完全取决于 Chrome 是否以调试模式启动。漏掉这步，所有插件都白装：
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 必须关闭所有 Chrome 实例（包括后台进程），否则端口被占，
--remote-debugging-port=9222会静默失败 - macOS/Linux 启动命令要加
--no-first-run --no-default-browser-check，否则首次启动会阻塞 WebSocket 连接 - Windows 下务必指定
--user-data-dir，例如chrome.exe --remote-debugging-port=9222 --user-data-dir=C:\tmp\chrome_debug，否则可能复用已有 profile 导致调试端口不可见 - 启动后访问
http://localhost:9222/json，确认返回中包含webSocketDebuggerUrl字段，才是成功
Service Worker 和 Source Map 调试最容易出问题的地方
这两类调试对环境敏感，Sublime 不参与执行，但编辑时稍有不慎就会让 Chrome 无法映射或注册：
立即学习“前端免费学习笔记（深入）”；
-
sw.js文件必须通过https或localhost提供，本地双击 HTML 打开（file://）一定失败，连navigator.serviceWorker.register都不会执行 - 启用 Source Map 时，确保构建工具（如 Webpack/Vite）输出的
.map文件与 JS 同目录，且 JS 文件末尾有//# sourceMappingURL=xxx.js.map注释行 - Chrome DevTools 的
Sources面板里，如果左侧树状结构显示的是压缩后的main.min.js而不是原始index.js，说明 Source Map 没加载成功——此时检查 Network 面板里xxx.js.map是否 404 或 MIME 类型错误（应为application/json）
真正卡住人的从来不是插件装没装全，而是 Chrome 端口没起来、SW 没走 HTTPS、或者 .map 文件路径错了一级。这些地方一错，Sublime 再配十层插件也没用。
