Sublime Text 默认不支持 F12 浏览器预览，需通过 OpenInBrowser 插件或自定义构建系统实现；推荐插件因其稳定处理路径、编码及多浏览器切换；F12 绑定需手动配置键位且可能与系统冲突；file:// 协议限制导致 AJAX、相对路径等在本地预览中失效。
Sublime Text 默认不支持 F12 浏览器预览，必须手动配置
Sublime Text 本身没有内置浏览器预览功能，所谓「按 F12 在浏览器中打开 HTML」是用户通过插件或自定义构建系统实现的快捷操作。直接按 F12 不会有反应，甚至可能触发系统级快捷键（比如 macOS 的 Mission Control）。关键不是“怎么启用”，而是“怎么安全、可靠地加一层映射”。
推荐用 OpenInBrowser 插件，比自建构建系统更稳定
虽然可以手写 sublime-build 文件调用 start 或 open 命令，但路径空格、URL 编码、默认浏览器识别等问题频发。OpenInBrowser 插件已处理好这些边界情况，且支持 Chrome/Firefox/Edge 多浏览器切换。
- 安装方式：Cmd+Shift+P（Mac）或 Ctrl+Shift+P（Win/Linux）→ 输入
Package Control: Install Package→ 搜OpenInBrowser并回车 - 默认快捷键是
Ctrl+Alt+O（Win/Linux）或Cmd+Alt+O（Mac），不是 F12 - 如真要绑定 F12：右键菜单 →
Preferences → Key Bindings，在用户键位文件里加一行：[{"keys": ["f12"], "command": "open_in_browser"}] - 注意：若系统已有 F12 绑定（如 DevTools），需先禁用系统或浏览器热键，否则 Sublime 接收不到该按键
如果坚持用构建系统（Build System），得绕过空格和编码问题
纯手工配置容易在含中文路径或空格的项目中失败，比如 C:\Users\张三\Desktop\my site\index.html 会被截断为 C:\Users\张三\Desktop\my。必须用引号包裹路径，并显式调用 file:// 协议。
- 新建 Build System：Tools → Build System → New Build System
- 填入以下内容（Windows 示例）：
{ "cmd": ["cmd", "/c", "start", "", "$file_path/index.html"], "selector": "source.html" } - Mac/Linux 应改用：
{"cmd": ["open", "-a", "Google Chrome", "$file"]} -
$file是当前文件绝对路径，$file_path是目录路径；不要混用$file_name，它不含路径，浏览器打不开 - 保存为
HTML.sublime-build，并确保 Build System 菜单里选中它，否则 Ctrl+B 无效
F12 预览本质是“打开本地文件 URL”，不是实时刷新
这个操作只是把当前 HTML 文件用 file:// 协议丢给浏览器，不启动本地服务器，所以：AJAX 请求、fetch 加载本地 JSON、import ES 模块都会因跨域被浏览器拦截；localhost 相关逻辑（如 localStorage 分域）也不生效。真要调试交互逻辑，得配 Live Server 插件或用 python -m http.server 启服务。
立即学习“前端免费学习笔记（深入）”；
很多人卡在“点了 F12 页面空白”，第一反应是插件没装好，其实八成是 HTML 里写了相对路径的 JS/CSS，而 file:// 下相对路径解析规则和 http:// 不同——这点最容易被忽略。
