根本原因是浏览器对file://协议施加严格安全限制，禁用fetch、XMLHttpRequest、localStorage等API；唯一可靠解法是启动本地HTTP服务（如python3 -m http.server 8000），通过http://localhost访问。
为什么直接用浏览器打开 HTML 文件会失败
本地双击打开 index.html 时，fetch 报错 net::ERR_FILE_PROTOCOL、XMLHttpRequest 被拦截、localStorage 在某些场景下不可用——根本原因是浏览器对 file:// 协议施加了严格限制，连本地 JSON 文件都读不了。
- 这不是代码写错了，是协议层面的封锁
- 所有依赖跨域、资源加载、服务端交互的实验（比如调用 API、读取本地
.json、使用Web Workers）在file://下必然失败 - 即使页面渲染正常，只要涉及异步加载或存储操作，就可能静默出错
最轻量的解法：用系统自带命令起一个临时 HTTP 服务。不需要装 Node.js 或 Python 全套环境，只调一条命令。
三秒启动本地服务器的终端命令
Windows、macOS、Linux 都能用，前提是已安装对应运行时：
- Python 3.x：运行
python -m http.server 8000 - Python 2.7：用
python -m SimpleHTTPServer 8000（不推荐，已停止维护） - Node.js：全局安装
http-server后运行http-server -p 8000 - macOS 自带 Ruby（1.9+）：
ruby -run -e httpd . -p 8000
注意：
立即学习“前端免费学习笔记（深入）”；
- 确保当前终端路径在 HTML 文件所在目录（例如
cd ~/my-idea） - 端口被占时换一个，比如
8080 - 浏览器访问
<a href="https://www.php.cn/link/fcbb3a1c04ec11f1506563c26ca63774">https://www.php.cn/link/fcbb3a1c04ec11f1506563c26ca63774</a>，不是file://路径
这一步绕过了所有 file:// 限制，fetch('./data.json')、new Worker('./worker.js') 全部恢复正常。
免安装的在线沙箱怎么选
需要快速验证一段带 DOM 操作或第三方库的代码，又不想搭环境？优先考虑这些真实可用的在线工具：
-
CodePen：适合带样式和交互的片段，但默认沙箱模式会隔离console输出，调试时勾选Settings → Behavior → Disable Sanitize -
JSFiddle：支持外链 CDN（如<a href="https://www.php.cn/link/18c759da375254a1eae0714d32157a21">https://www.php.cn/link/18c759da375254a1eae0714d32157a21</a>），但 HTML 面板里不能写<!DOCTYPE>，否则解析异常 -
Playcode：小众但支持原生 ES 模块、import.meta.url、甚至Web Components，适合验证现代语法
关键提醒：
- 所有在线编辑器都会重写你的
<script></script>加载方式，比如把内联脚本移到window.onload里，可能影响执行时机 - 如果用了
localStorage或IndexedDB，不同域名之间数据完全隔离，codepen.io和jsfiddle.net的存储互不相通 - 不要粘贴含敏感 token 或本地路径的代码（比如
fetch('/api/key')）
Chrome DevTools 里的实时编辑够用吗
够，但仅限单文件快速验证，比如改个颜色、试个事件监听器、看下 querySelector 是否命中。
- 直接在 Elements 面板修改 HTML 或 CSS，效果即时可见
- Console 面板输入
document.querySelector('button').click()可触发行为 - Sources → Page → 右键 “Save as” 可导出当前编辑后的 HTML
但要注意：
- 刷新后所有改动丢失，不保存到磁盘
- 无法调试跨文件引用（比如
import的模块报错时堆栈不完整） -
fetch请求若指向相对路径（如./config.json），仍需本地服务支持，DevTools 本身不提供 HTTP 服务
真正想留痕、复现、协作，还是得回到文件 + 本地服务这个组合。
有些开发者卡在“为什么我写的 demo 在桌面双击能打开，发给别人就白屏”，其实问题不在代码，在协议。别花时间改逻辑，先换 http://。
