CodePen点一下就出效果而JSFiddle常空白，因其默认自动补全<html><head><body>结构，用户只需在body内写内容；JSFiddle不自动包裹，须手动写完整HTML结构，漏闭合标签或错放内容即导致预览空白。
CodePen 为什么点一下就出效果，JSFiddle 却常空白？
因为 CodePen 默认帮你补全 <html>、<head>、<body> 结构，你只往 <body> 里写 <h1>Hi</h1> 就能立刻渲染；JSFiddle 不自动包裹，必须你自己写完整结构，漏一个 </body> 或多一层未闭合的 <div>，预览区就彻底空白。
常见踩坑点：
- 在 JSFiddle 的 HTML 栏只写
<h1>Test</h1>—— 没<body>，必然白屏 - 用了
<img src="icon.png">—— 在线编辑器不支持相对路径，得换成https://via.placeholder.com/50 - 中文乱码显示方块 —— 在 HTML 栏顶部加一行
<meta charset="UTF-8">，且必须放在<head>内
fetch() 或 localStorage 为什么点不动？
不是代码写错了，是在线环境默认禁用这些 API 的安全策略。
典型表现与解法：
立即学习“前端免费学习笔记（深入）”；
-
fetch("https://api.example.com/data")报 CORS 错误 → 换成公开允许跨域的地址，比如https://jsonplaceholder.typicode.com/posts/1 -
localStorage.setItem("key", "val")完全没反应 → CodePen 需手动开启：Settings → Behavior → 勾选Allow localStorage - 调用
navigator.mediaDevices.getUserMedia直接静默失败 → 必须是 HTTPS 页面 + 用户手势触发（比如按钮点击事件里调），在线编辑器页面通常不满足
浏览器开发者工具怎么配合在线编辑器调试？
在线编辑器只管渲染，真要查 DOM 错位、样式覆盖或脚本报错，还得靠浏览器原生工具。
实操建议：
- 在 CodePen/JSFiddle 预览区右键 →
Inspect，直接跳转到 Elements 面板，看实际生成的 HTML 是否和你写的对得上 - Console 面板里的报错，注意看文件来源：如果是
pen.js或result-frame，说明是 JS 栏代码的问题；如果是VMxxx，大概率是内联脚本或事件绑定异常 - Network 面板能确认外部资源是否加载成功 —— 比如你用
Add Resource引了 jQuery，但状态码是 404，那就得检查 CDN 地址拼写
什么情况下不该依赖在线编辑器？
当你的代码涉及以下任一环节，就该切回本地环境：
- 读取本地文件（
input[type="file"]后处理）、写入磁盘、调用 Node.js API - 需要真实
file://协议行为（比如某些旧插件或 Cordova 流程） - 依赖服务端逻辑（PHP/Python 接口）、数据库连接或 session 状态
- 测试 PWA 离线缓存、Service Worker 安装流程 —— 在线编辑器无法注册 SW
在线工具省的是安装步骤，不是绕过浏览器安全模型。静态结构和视觉验证用它很稳，但凡牵扯 I/O、持久化或协议层，就得本地起个 http-server 或 VS Code 的 Live Server。
